Skip to main content

 

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
  • Process Affirm charges in your order management system
  • 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 

1. Confirm Optimized one-page checkout

The Affirm integration for BigCommerce requires the use of the Optimized one-page checkout. To change this:

  1. Go to Advanced Settings -> Checkout
  2. If you are on the legacy checkout, you will see a "Checkout Type" field available. For Affirm to be enabled, you must be using the Optimized one-page checkout.
    If you do not see the Checkout Type setting available, you are already using the Optimized one-page checkout.

BC_optimized_one_page.png

2. Enable Affirm as an Online Payment Method

Go to Store Setup › Payments and find Affirm on the list of Online Payment Methods. Click Set up.

BC_Affirm_setup.jpeg

You will be taken to the Affirm Settings tab. Enter the credentials from your Affirm merchant account into their corresponding fields.

BC_affirm_settings.png

  • Public Key — The Public Key from your Affirm dashboard.
  • Private Key — The Private Key from your Affirm dashboard.
  • Minimum Order Value — The minimum order amount (before taxes and discounts) that must be met before Affirm displays as an option at checkout. If blank, Affirm will be displayed for all orders over $50.
  • Transaction Type — can be set to Authorize & Capture or Authorize Only.
    • Authorize & Capture will capture your Affirm charge and your order will have the status of Awaiting Fulfillment in BigCommerce.
    • Authorize Only allows you to capture the funds manually. Your order will have the status of Awaiting Payment in BigCommerce. Once you manually capture the order in BigCommerce, the charge will be captured automatically in Affirm. See Manually Capturing Transactions (Authorize Only) to learn more on how to manually capture transactions within BigCommerce.
  • Test Mode — determines whether your store is in Test Mode. Make sure this is enabled until you are ready to take payments.
3. Affirm Marketing App installation

The Affirm Marketing 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 Marketing app will be installed in your store.

4. Configure Affirm Promotional Messaging

The following steps are for configuring promotional messaging on Stencil. For configuration on Blueprint, click here.

Step 1: Add Affirm scripts

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

BC_Affirm_required_scripts.png

Step 2: Configure the Affirm app settings

  1. Go to Apps > My Apps > Affirm Marketing > Settings
  2. Enter the Live Public API Key from your Affirm dashboard (available here)
  3. Enter the Sandbox Public API Key for testing and development (optional, available here)
  4. Leave Sandbox Mode enabled for testing and development (optional)
  5. Click Save
Screen Shot 2019-10-23 at 11.00.47 AM.png

Step 3: Enable Affirm's enhanced analytics (optional)

Affirm's Enhanced Analytics can help you gain new insights into your customers shopping journeys and preferences. Enhanced Analytics also allows you to easily A/B test new promotional messaging and financing programs to ensure that their sites are fully optimized for both cost and conversion rates

  1. Go to Apps > My Apps > Affirm Marketing > Settings
  2. Enable Enhanced Analytics in the settings
  3. Click Save

Step 4: Configure Promotional Messaging

  1. Go to Apps > My Apps > Affirm Marketing > 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. For a custom theme, you will need to select Custom and add a div element to the product/cart page with an id, and place the id in the input field. (See FAQ below for more details)
    • Height (optional)
    • Width (optional)
    • Minimum Product Price (optional, product settings only)
    • Product Page Price (for Affirm use only, product settings only)
    • Product Page Options (for Affirm use only, product settings only)
    • Logo Type
    • Logo Color
  5. Click Save

clipboard_e66f1319b6435e9668f80494e7a3dcfd7.png

2. Review your order management functions

Processing orders (capture, void, refund, and partial refund) in BigCommerce updates the order status in the Affirm dashboard. While you can process orders in the dashboard, we strongly recommend using BigCommerce to keep order status synced with Affirm. For more information on processing orders in BigCommerce, refer to their documentation

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 Integration Consultant or merchanthelp@affirm.com to coordinate this test.

Connect to the live Affirm environment

  1. Go to Store Setup › Payments and click Affirm settings. Change Test Mode dropdown value to "No".
  2. Go to Apps > Affirm Marketing and click on Settings. Toggle off Sandbox Mode and click Save.

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.

FAQ

1. If I am using a custom theme, where can I find the Selector ID for the product and cart page promotional messaging?

For custom themes, we require a 'Selector ID' value so that Affirm promotional messaging can be easily added to the product and cart pages. You can use an existing selector ID or a class name available in your theme files. To find the selector ID, go to, Storefront > My Themes and under Advanced Options click Edit HTML/CSS., and search for product and cart related templates. Usually, the naming format for these files are product-view.html, product.html, cart.html, cart-view.html, etc. Use any existing class name or ID after which you want to add the promotional messaging. For the example below, productView-price is what should be used as the Selector ID:

<div class="productView-price">
    ......
    .....
</div>

If none of the existing classes or IDs from the product/cart templates are working, you can also add another div in your template right under the product or cart price and use this ID, customAffirmPromoContainer, as the Selector ID. Ex: <div id="customAffirmPromoContainer"></div>

  • Was this article helpful?