Skip to main content

Merchant Help

 

Affirm Merchant Help

Promotional Messaging - Beta

 

Affirm Promotional Messaging allows you to display the monthly payment price and information modal on your site by using Affirm's API and runtime Javascript. The monthly payment messaging is dynamically generated into placeholder elements on your pages to inform customers about the availability of installment financing, which will help drive increased average order value and conversion rates.

Design

 

Integration

Overview
  1. Add the Affirm JS embed code to your page template
  2. Add a placeholder HTML element for the monthly payment messaging and/or modal that you want to implement.
  3. Configure API key and JS URL in the Affirm JS embed code to reference either the Affirm Sandbox or Live environment

Affirm JS embed code

Include this Javascript snippet on the pages where Affirm promotional messaging will be displayed:

Promotional Messaging JS

Live Javascript URL: https://cdn1.affirm.com/js/v2/affirm.js
Live API keys: (Retrieve from www.affirm.com/dashboard/)

Monthly Payment Messaging

"Starting at [monthly_price] / month with [affirm_logo]" monthly payment pricing string can be included on product page, product gallery, and shopping cart for which Affirm financing is available.

For pricing strings that include the Affirm logo, choose from any of the following options:

  •  

You can display the monthly payment price for any product based on a few parameters:

  • data-amount: Price of the item (in cents)
  • data-affirm-type: Optional; Default value is set to Affirm logo. It can be changed to a value of "text" for plain text
  • data-affirm-color: Optional; Default value is set to blue. It can be changed to a value of "black" for the Affirm logo
  • data-learnmore-show: Optional; Default value is set to true. It can be changed to a value of "false" 
Instructions:
  1. Make sure the affirm.js snippet is present on the page (it only has to be included once on the page)
  2. Include data-amount using HTML snippet as a placeholder from below.
<p class="affirm-as-low-as" data-amount="50000" data-affirm-type="text" data-affirm-color="blue"></p>

 

Product Modal

Instructions:
  1. Make sure the affirm.js snippet is present on the page (it only has to be included once on the page)
  2. Include data-amount using HTML snippet from below.
<a class="affirm-product-modal" data-amount="50000">Learn more</a>

 

Site-Wide Modal

Instructions:
  1. Make sure the affirm.js snippet is present on the page (it only has to be included once on the page)
  2. Include HTML snippet from below. 
<a class="affirm-site-modal">Learn more</a>

 

Live Example

 

Example Code

  1. Monthly Payment Price (As-Low-As)
  2. Monthly Payment Price Modal - https://jsfiddle.net/og3yq8qu/
  3. Site-Wide Modal - https://jsfiddle.net/6odd08hp/