topic Using accept.js in a single page app (react.js) in Integration and Testing

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

sontek — Wed, 06 Dec 2017 04:31:20 GMT

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!

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

Anurag — Wed, 06 Dec 2017 06:51:06 GMT

Hi @sontek

You can use our Accept.js built-in, mobile-optimized, payment form hosted by Authorize.Net, for a PCI DSS SAQ-A solution.

https://developer.authorize.net/api/reference/features/acceptjs.html#Integrating_the_Hosted_Payment_Information_Form

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

sontek — Wed, 06 Dec 2017 07:08:18 GMT

@Anurag Sorry if I wasn't clear, the thing you linked to is the thing I'm trying to use but can't because:

- There doesn't seem to be a way to style it

- There doesn't seem to be a way to attach it to a form after load (so single page apps don't work)

Think of it like this:

- Server side page renders first page

- User clicks "Pay"

- Payment page loads the Accept.js script

- Hosted form from accept.js is rendered

- User clicks "Keep Shopping"

at this point, the accept.js javascript file has been loaded, but they are no longer on the payment page. This is a single page app (SPA) using react.js.

Now lets continue:

- User clicks "Pay"

How do I tell accept.js hosted to attach to the button on the payment page at this point, since the script is already loaded? I can't load the script a second time.

I need something like "Accept.attach("#id-of-form", function(response) { ...})"

Does this make sense?

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

sontek — Tue, 12 Dec 2017 19:43:02 GMT

Hello, I'm still having issues with this. We are considering monkey patching window.onload and dynamically reloading the script with a new script tag every time but we aren't confident that it wouldn't violate our SAQ-A if we start monkey patching the authorize.net script functionality.

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

Anurag — Tue, 12 Dec 2017 19:55:38 GMT

Hi @sontek

I checked with the team internally and the script should load again when the Pay button is clicked again .

Is this not happening ?

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

sontek — Mon, 18 Dec 2017 18:12:59 GMT

@Anurag Hey. Yeah, this is not happening, but its just one of many of my issues.

Let me try to document the issues more clearly:

1. The script doesn't work if the button isn't already on the page, it gives this error:

Uncaught TypeError: Cannot read property 'addEventListener' of undefined
at g (AcceptUI.js:1)
at e (AcceptUI.js:1)
at window.AcceptUI (AcceptUI.js:1)
at AcceptUI.js:1

This causes issues because it means I have to show a user a button that isn't functional yet, because the javascript that makes the button function has to be loaded *after* I render the button. Which means they have to see the button and then download javascript before the button works.

2. We would prefer rendering the form inline rather than a modal, your modal doesn't seem to have any aria attributes on it which causes issues for accessibility. An inline form would allow users who need assistance to more easily work with it. This would also align more with our design in general but the accessibility issues makes it so we can't overlook it.

3. Since the script attaches onLoad, I can't find how to send it what language the user is in. So even though they are a spanish speaking user, they are still getting an english form from authorize.net

4. My original issue. This is react / single page application. Which means this script only gets loaded the first time the form is required, even if they change pages and then come back. We could dynamically force a reload of the script by injecting a new script tag on every render like:

new Element("script", {src: "accept.js", type: "text/javascript"});

but that is super inefficent and will make the UI extremely unresponsive since I'll continually render a button that isn't functional until a script is re-downloaded. Many of our users are mobile users and so having to re-download the same script over and over on their data plan isn't ideal.

5. The script doesn't seem to read scroll position at all, so the modal renders off the screen. If we could render the form inline then this would fix this issue, here is a gif of it:

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

sontek — Mon, 18 Dec 2017 19:28:55 GMT

@Anurag To help with this conversation, I've created a demo:

https://www.webpackbin.com/bins/-L0f2-7FM8vleda4TOZX

This demo dynamically loads the script *every time*, which is inefficient, but it mostly works. You'll see we get lots of errors in the console if you swap between "review" and "pay":

Uncaught TypeError: Cannot read property 'addEventListener' of undefined
    at g (VM8036 AcceptUI.js:1)
    at e (VM8036 AcceptUI.js:1)
    at window.AcceptUI (VM8036 AcceptUI.js:1)
    at VM8036 AcceptUI.js:1

but other than that console errors (which we can't deploy with, we'd be alerted that there are production javascript errors), the UI mostly functions.

The issues it shows:

1. The scroll error, shrink your window so you have to scroll and then click the payment button

2. I have no way to set a response handler. This script assumes we have a global javascript function but we use modern javascript with ES6/React and don't have any globals. So we need a way to set a callback that isn't a string data attribute.

I also don't know how to do my questions from earlier:

- How do I make the modal accessible with aria attributes

- How do I set what language I need the form rendered in

- How do I prevent the javascript errors in the console

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

Anurag — Tue, 19 Dec 2017 06:10:47 GMT

Hi @sontek

Thanks for the details on it .

The strolling issue team is planning of fixing in the upcoming release .

I have provided details on the other issues to the team and will keep you posted .

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

Shoagraw — Tue, 19 Dec 2017 20:16:47 GMT

It seems to me that you are loading the acceptUI.js with button,

Can you Please try just to load it on application initialization.

We need acceptUI to be loaded with application initialization and it should stay on page.

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

Shoagraw — Tue, 19 Dec 2017 21:48:45 GMT

Also related to responseHandler, I can see you have it inside your class, here what you need to do is

-- define a response handler at window level [top level]

-- call your inside function from there react Statics can also help you.

Thanks,

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

tjmoretto — Sat, 04 Aug 2018 14:55:13 GMT

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

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

j-em — Sun, 13 Jan 2019 02:02:15 GMT

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!

Re: Using accept.js in a single page app (react.js) - Mukesh jaiswal

mukesh1619 — Tue, 05 Mar 2019 15:25:35 GMT

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

Re: Using accept.js in a single page app (react.js) - Mukesh jaiswal

mukesh1619 — Tue, 05 Mar 2019 15:29:00 GMT

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

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

mukesh1619 — Wed, 06 Mar 2019 05:45:00 GMT

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');

}

Re: Using accept.js in a single page app (react.js) - Mukesh kumar jaiswal

mukesh1619 — Wed, 06 Mar 2019 05:49:09 GMT

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');

}

Re: Using accept.js in a single page app (react.js) - Mukesh kumar jaiswal

kevintechie — Sat, 16 Mar 2019 00:47:45 GMT

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.

Re: Using accept.js in a single page app (react.js) - Mukesh kumar jaiswal

kevintechie — Tue, 19 Mar 2019 16:53:37 GMT

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

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

ArmandoBaldwin — Fri, 13 Mar 2020 09:58:56 GMT

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