Skip to main content

Merchant Help

 

Affirm Merchant Help

BigCommerce Integration

Overview

This guide describes how to integrate Affirm into the BigCommerce Ecommerce platform so you can provide Affirm as a payment option to your customers. After integrating Affirm, your BigCommerce site will:

  • Offer Affirm as a payment option on the checkout page
  • Display Affirm promotional messaging

The integration steps are:

  1. Install and configure Affirm
  2. Review your order management functions
  3. Test your integration
  4. Deploy to production

Before you begin

Before beginning integration, you should review:

Sandbox development

You should have received an email inviting you to create an Affirm account. Click here for information about accessing your account.

Develop and test the Affirm integration in your development environment connected to our sandbox. To use our sandbox, retrieve your sandbox API keys at https://sandbox.affirm.com/dashboard/#/apikeys for use during integration.

After development and testing, you'll need to update your integration to use your live API keys, which you can find at https://affirm.com/dashboard/#/apikeys.

1. Install and configure Affirm 

Affirm app installation

Affirm app for BigCommerce can be found on the BigCommerce marketplace. This app can also be installed from your BigCommerce dashboard by going to Apps and searching for Affirm. Once you click on Install and confirm the terms and conditions, Affirm app will be installed on your store

Configure Affirm as a payment method

Add a payment method for Affirm

  1. In BigCommerce dashboard, select Store Setup > Payments
  2. Select Cash on Delivery under Offline Payment Methods
  3. Fill out the form
    • Add Display Name as Affirm
    • Set Available Countries to United States
    • Add text for Delivery Information
  4. Click Saveclipboard_e3e1cfbeca409ac67f8651b5a17bed78d.png

Add a custom script to the Script Manager

  1. Go to Storefront > Script Manager
  2. Select Create a Script
  3. Fill out the form
    • Add Name of script as Affirm Custom Script
    • Set Location on page as Head
    • Set Select pages where script will be added as All pages
    • Set Script type as Script
    • Add Script contents as: 
      <script>
          var token = '5bca0d02bec17';
          var store_hash = 'My1mSNUcx7PLUSwBTPLUS8TOLDWdo5sgc241tvnOEFNPLUSPnKaYEQUALS';
      </script>
    • Click Save

Screen Shot 2018-10-19 at 10.23.30 AM.png

 

Enable Affirm scripts 

  1. Go to Apps > Affirm Checkout > Installation
  2. Enable  Script Manager Injected File: Affirm Checkout by clicking on Click to Install 
  3. Enable Script Manager Injected File: JQuery by clicking on Click to Install 

Screen Shot 2018-10-19 at 10.30.26 AM.png

Configure the Affirm settings

  1. Go to Apps > My Apps > Affirm Checkout > Settings
  2. Enter the Sandbox Public API Key and Sandbox Secret Key (private key) you retrieved from the Affirm sandbox merchant dashboard
  3. Leave Sandbox Mode enabled (for testing and development)
  4. Enable Modal Window if you would like Affirm checkout to launch in a modal window. If you would like Affirm checkout to launch in a redirect, leave this disabled.
  5. Enable Orders will be marked as Awaiting Fulfillment in Bigcommerce to automatically capture Affirm orders
  6. Enter the dollar amount values for Minimum Order and Maximum Order that will display Affirm as a payment option to your customers during checkout 
  7. Click Save
Screen Shot 2018-10-19 at 12.05.02 PM.png

 

Configure Promotional Messaging

  1. Go to Apps > My Apps > Affirm Checkout > Promotional Messaging
  2. Toggle Promotional Messaging on Products to enable Affirm messaging on the product pages
  3. Toggle Promotional Messaging on Cart Page to enable Affirm messaging on the product page
  4. Enter the following for both product and cart page settings:
    • Site theme: We support the Cornerstone theme and any 3rd party theme need will need to add a div element to the product/cart page with an id, and place the id in the input field when Custom option is selected
    • Height
    • Width
    • Promo ID
    • Minimum Product Price
    • Logo Type
    • Logo Color
  5. Click Save

Screen Shot 2018-10-19 at 1.44.12 PM.png

2. Review your order management functions

For more information on processing orders in BigCommerce, refer to their documentation. Affirm app currently does not process order cancelations. Please use the Affirm dashboard to process refunds or cancel a loan.

3. Test your integration

After completing your integration, do a thorough testing of both your front-end and order management functions in our sandbox to ensure that everything works as expected. Click here for our recommended test plan. However, you’ll need to tailor your testing plan to your specific systems, processes, and integration.

4. Deploy to production

Coordinate testing with Affirm

Before deploying the Affirm integration to your production site, Affirm will need to test it in your development or staging environment connected to our live environment. Contact your Client Success Manager to coordinate this test.

Connect to the live Affirm environment

Contact your Client Success Manager for instructions on connecting to the Affirm live environment.

Launch to production

After you’ve connected to our live environment and we’ve tested your integration, you’re ready to deploy to your production environment and offer Affirm as a payment option to your customers.