CODEWITHSUNDEEP
reactjssingle-page-applicationauthorize.netaccept.js
sontek
sontek

Reputation: 12451

Accept.js (authorize.net) and single page apps

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!

Upvotes: 0

Views: 2259

Answers (1)

Jeremy Allard
Jeremy Allard

Reputation: 321

If you are using React, there is a pretty useful library called react-authorize-net that let you interact with Authorize.Net through a simple and clean component-based API.

To integrate it with your project, you would typically use the FormContainer component along with FormComponent to get a fully-featured and ready-to-use payment form right away.

You can have custom rendering logic by providing your own component/function to FormContainer too.

Here is an example of the library being used in an existing React project https://github.com/j-em/react-authorize-net-example

Upvotes: 0

Related Questions