A Simple And Useful Guide To Integrating Affirm Payment Method With SPA

Jan 16, 2020

Angelina Eillott

By Angelina Eillott

A Simple And Useful Guide To Integrating Affirm Payment Method With SPA

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.

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.

Are you looking for similar services ?

Yes

More from us

Steps to Find The Right Offshore Development Company

Steps to Find The Right Offshore Development Company

Introduction For software developers, outsourcing has become the new norm. Businesses have been forced to outsource due to the massive upheaval ...

Top Benefits of Hiring an Offshoring Development Partner

Top Benefits of Hiring an Offshoring Development Partner

Introduction Custom software application development always is a complex process. As it needs building of custom modules, features, and function...

Top eCommerce Trends to Power Up Your Online Business

Top eCommerce Trends to Power Up Your Online Business

Introduction Retail has been transformed by eCommerce. It has evolved to meet people’s evolving demands and to make online shopping more c...

Got a project for us?

Let's talk.

Reduce Development Cost by 60%

Faster Deployment, Highest Quality

100+ Software Engineers for Hire