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

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.

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

• Sandbox:  https://sandbox.affirm.com/api/v2/charges
• Live:  https://api.affirm.com/api/v2/charges

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

• Sandbox: https://sandbox.affirm.com/api/v2/charges /<transaction_id>/capture
• Live:  https://api.affirm.com/api/v2/charges /<transaction_id>/capture

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.