January 16, 2020 By Angelina Eillott Category: Web Development

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.

Pre-requisites

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

Sandbox development

Step 1: Add Affirm.js

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.

Your index.html is only file where you need this embed code.

[Recommended Reading: 10 Ways You Can Enhance The Performance Of Your Angular App ]

Step 2: Initiate a checkout

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.

Step 3: Authorize the charge

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.

Data

  • checkout_token : Unique token which we will receive after authorized charge
  • order_id :Unique order_id for identify merchant order.

Error handling

  • Authorization failed (400)
  • Unauthorized (401)
  • Checkout_token expired (401)

Step 4: Capture the charge

Once you authorized charge from affirm now for merchant you have to capture charge. For capture charge merchant have two options
1. Capture charge from your affirm dashboard
2. Make http request to affirm
If you go with the second option then you have to make the following request to affirm.

URL

Options

  • Type: POST
  • Parameter: Id field which we will receive from response after call authorized charge API
  • 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.

Data

  • order_id :Unique order_id for identify merchant order.

Note

In Angular Application might you have faced one problem like sometime affirm load earlier than your application so you have to again call affirm.ui.refresh(); in your particular route html file like follow

Conclusion

We hope this guide is ample to supplement your knowledge with the right technicalities and skills. We at Bytes Technolab use high-end technology stack including Angular and Mean Stack Development to build Affirm Payment gateway for ecommerce websites.

We are also determined to using innovative and high quality technology to drive the right business results for our customers. For any ecommerce design and development solutions, you can feel free to connect with us.

Share with :

Total Ratings 3.6/5 (5)

Rate Us!

Thanks For Rating Us