Using accept.js in a single page app (react.js)

[sontek]

Hello!   We are looking to use Authorize.NET accept.js to maintain our SAQ-A compliance (we already do this with braintree and stripe).

I'm finding it very difficult to work with accept.js based on the documentation and I'm hoping what I wan't is do-able in a non-docmented way!

My big problem is this:

"IMPORTANT: When using the payment information form, be sure that your page loads the library after the button is defined."

The script seems to want to process the DOM as soon as it loads and find the attributes it needs.  This makes it extremely difficult to work with from a single page app perspective because if the user views the payment page, then decides to go back to add something else to the cart, and then goes to pay again... the script is already been loaded but now the form isn't being rendered.

What I want to be able to do is have accept.js give me a function to call and pass it the things that are necessary (is test mode, publish key, etc).   This is how it is done in braintree:

braintree.dropin.create({
      authorization: 'CLIENT_TOKEN_FROM_SERVER',
      container: '#dropin-container'
    }

and this is how it is done with stripe:

// Create an instance of the card Element
var card = elements.create('card', {style: style});

// Add an instance of the card Element into the `card-element` <div>
card.mount('#card-element');

This API style works *beautifully* on the web, because I can load the javascript file once but construct the payment form when I need it.

Is there some way to do this with accept.js?  The only way I've been able to come up with is building the form myself and then calling Accept.dispatch, but this would move us from SAQ-A to SAQ-A EP

Thanks!

[tjmoretto]

Hi - I'm still seeing the issue where the Accept.js modal is scrolled off the screen.  Is this going to be fixed?

[j-em]

Hello,

Do not hesitate to let me know if this kind of posts are not welcome here.

I am the creator and maintainer of react-authorize-net, which is a React library aiming to make the integration of the Authorize.Net platform with a React application as smooth as possible.

I hope this can be as useful to others as it has been for me.

Constructive feedback is greatly appreciated.

Thank you!

[mukesh1619]

If you are using ReactJs then you need to call this function in Component

Issue resolved: addEventListner is undefined

loadScript: function (src) {

        var tag = document.createElement('script');     

        tag.src = src;

        document.body.appendChild(tag);

    }

In componentDidMount():

loadScript('https://jstest.authorize.net/v3/AcceptUI.js');

Now my issue resolved 

[mukesh1619]

If you are using ReactJs then you need to call this function in Component

Issue resolved: addEventListner is undefined

loadScript: function (src) {

        var tag = document.createElement('script');     

        tag.src = src;

        document.body.appendChild(tag);

    }

In componentDidMount():

loadScript('https://jstest.authorize.net/v3/AcceptUI.js');

Now my issue resolved 

[mukesh1619]

If you are using React.js then you need to follow below things to render the script after button render:

loadScript: function (src) {

        var tag = document.createElement('script');     

        tag.src = src;

        document.body.appendChild(tag);

    }

And in componentDidMount()

componentDidMount() {

loadScript('https://jstest.authorize.net/v3/AcceptUI.js');

}

[mukesh1619]

If you are using React.js then you need to follow below things to render the script after button render:

loadScript: function (src) {

        var tag = document.createElement('script');     

        tag.src = src;

        document.body.appendChild(tag);

    }

And in componentDidMount()

componentDidMount() {

loadScript('https://jstest.authorize.net/v3/AcceptUI.js');

}

[kevintechie]

The problem with this solution is that the script is added to the dom each time the user returns to the page in the context of the single page app. If the user is on the page with the Pay button, then hits the back button, then goes back to the page with the Pay button, the script will be injected into the dom again.

This causes the callback to be called several times, which then returns multiple errors for Anet when the transaction is processed.

[kevintechie]

Error messages caused by multiple calls to the callback function include invalid OTS token E00114 and duplicate transaction errors.

[ArmandoBaldwin]

Your share is essential. I also used Mod apk applications for android on TechCrue.com, most of them are similar to yours.