The integration of any payment gateway with the single page application (SPA) is not an easy task. If you are working on it, there are some challenges you have to face. Working with the third party core JavaScript which works on API key is another core challenge for you.
In this article, we will discuss functional and useful steps to integrating Affirm payment gateway with your SPA. This can be a helpful guide to do the procedure without much time and hurdles. But, before we move ahead, we must know about Affirm? Affirm is a payment gateway API, which allows users to pay their bills or subscription charges based on monthly installments.
Before the start of integration Affirm.js in your system you must review the following things :
- js transaction flow when purchase with Affirm
- Affirm API documentation
- A complete end-to-end Affirm.js transaction
In this step you have to add Affirm.js embed code to the head of your global page of application but in our case we are working with SPA so we have to add Affirm.js embed code to head part of index.html file.
Once you add Affirm.js code in your application you will use following commands
- checkout({ }) for creates and stores the Affirm checkout object
- checkout.open() for sends the checkout object to our Affirm Checkout API
Create a checkout object
The Affirm checkout object have all the information about the order. You have to create the checkout object using affirm.checkout({ }).
Send the checkout object
Once you create the checkout object then call affirm.checkout.open({});
Inside affirm.checkout.open({}) we have defined two callback functions as follow
This does the following:
1. Send checkout object to Affirm checkout API
2. Redirects the customer to the Affirm checkout process and shows them an Affirm modal
3. Validates affirm checkout object data
Error handling
A pop-up window will display any errors generated by the checkout process.
Following are reasons where affirm give error
- Invalid phone number
- Invalid address
You can define a callback function. In this callback function you will handle error.
Once you finished affirm checkout process, now you have to authorize the charge
Receive the checkout token
Follow these steps to receive the checkout token:
1. Initiate checkout to access the Affirm account creation screen
2. If you have an existing account, click Sign In
3. If you don’t have an existing account, create one with the following:
- Any first and last name
- An email address with a valid format
- A valid US cell phone number (you do not need access to this number) that you will use in all subsequent checkout attempts
- A birth date older than 18 years old
- Any four digits
4. Enter 1234 for the verification code and click VERIFY CODE
5. Complete checkout flow and click CONFIRM LOAN
Once we complete these steps than affirm will redirect us to our application and in our on onSuccess callback function we will receive checkout token.
Authorize the charge
After completing checkout flow and click confirm loan user will redirect to their application and in onSuccess callback function we have checkout token.
Now for affirm authorized charge we have to send this checkout token and order id to affirm.A transaction is not visible in the Read response, nor in the merchant dashboard until you authorize it.
For authorized charge we have to send following request to affirm.
URL
Options
- Type: POST
- Authorization: Basic
- Content type: application/JSON
- Data: JSON string
Authorization
In Http request you have to convert your publict_key and private key pair to base64 and then send in request header. Followings are examples.