Skip to main content

 

Affirm Merchant Help

Upgrade Prequalification Messsaging (Prequal banner)

Upgrading your Affirm integration allows you to take advantage of our upcoming and future releases as soon as they’re available with little or no development work. Our lightweight upgrade includes:

  • New promotional messaging components that respond dynamically to your unique financing programs such as longer terms (18, 24 and 36-month repayment terms) and 0% APR promotions, with customizable messaging to personalize the consumer journey
  • Our Prequalification flow within promotional messaging components to unlock purchasing power upfunnel while minimizing additional development work for your teams
  • Our updated Affirm.js library, which includes Enhanced Analytics that provide consumer insights and enable A/B testing to keep your site optimized

 The upgrade steps are:

  1. Delete Affirm.js from each page
  2. Add Affirm.js to the global page template
  3. Delete legacy prequalification messaging
  4. Update Affirm promotional messaging
  5. Add the Confirmation Page function
  6. Test and set live

Recommended: Sandbox development

Perform this upgrade in your development environment connected to our sandbox. To connect your development environment to our sandbox, do the following:

1. Delete Affirm.js from each page

Delete all references to Affirm.js from each page where it's currently embedded. These pages include but may not be limited to the category, product, cart, and payment pages.

Adding the Affirm.js embed code only to your global page template loads it just once instead of loading it with each page that displays Affirm messaging.

2. Add Affirm.js to the global page template

Add the Affirm.js embed code to the head of your global page template.


<!-- Affirm -->
<script>
 _affirm_config = {
   public_api_key:  "YOUR_PUBLIC_KEY",
   script:          "https://cdn1-sandbox.affirm.com/js/v2/affirm.js"
 };
 (function(l,g,m,e,a,f,b){var d,c=l[m]||{},h=document.createElement(f),n=document.getElementsByTagName(f)[0],k=function(a,b,c){return function(){a[b]._.push([c,arguments])}};c[e]=k(c,e,"set");d=c[e];c[a]={};c[a]._=[];d._=[];c[a][b]=k(c,a,b);a=0;for(b="set add save post open empty reset on off trigger ready setProduct".split(" ");a<b.length;a++)d[b[a]]=k(c,e,b[a]);a=0;for(b=["get","token","url","items"];a<b.length;a++)d[b[a]]=function(){};h.async=!0;h.src=g[f];n.parentNode.insertBefore(h,n);delete g[f];d(g);l[m]=c})(window,_affirm_config,"affirm","checkout","ui","script","ready");
// Use your live public API Key and https://cdn1.affirm.com/js/v2/affirm.js script to point to Affirm production environment.
</script>
<!-- End Affirm -->

Be sure to use your public API key from the sandbox merchant dashboard for public_api_key.

Your global page template is the only place where you need this embed code.

3. Delete legacy prequalification banners

We are planning on deprecating the legacy prequalification banners. You should remove the legacy javascript references that resemble this: 

<script>
    affirm.ui.ready(function(){
        var a = {
            "page_type": “product”, //This may differ based on the pages, example cart will have a page_type as 'cart'
            "item": [{
                "display_name": "Best Product Ever",
                "item_url": "https://www.merchantname.com/best_product_ever"
                "sku": "A1B2C3,
                "unit_price": 49999,
                "qty": 1
            }]
        };
        affirm.prequal.set(a);
    });
    function buttonClicked () {
        affirm.ui.prequal.launchPrequalFlow();
    }

    //if you want to display the reminder to the customer
    if(youWantToShowReminder) {
        affirm.ui.prequal.show();
    }
</script>
  • You may be using affirm.ui.ready function for other functionality, so please make sure that you are only removing 'launchPrequalFlow', 'affirm.prequal.set' and 'affirm.ui.prequal.show' functions
  • Remove all CSS associated with the prequal banners

If you're unsure of any of the steps above, please reach out to Affirm Merchant Help to get assistance.

4. Update Affirm promotional messaging for prequalification

Add an HTML element everywhere you want to display an Affirm promotional messaging component. The element attributes (see below) determine which component displays. We generally recommend adding promotional messaging to your category, product, cart, and payment pages.

In each HTML element, include the new data-page-type attribute corresponding to the page where that promotional messaging component is placed. The data-page-type attribute allows you to customize messaging in the future without development work. By default, promotional messaging on product pages have prequalification enabled, but you can work with your Client Success Manager to change this and configure additional customizations.

Required attributes

class

string
This determines the Affirm promotional messaging component to display.

Value Description
affirm-as-low-as Monthly payment messaging links to a product modal that offers additional price-specific information and prequalification.
affirm-site-modal A site modal provides general information about Affirm and does not include pricing information. Any HTML element can trigger a site modal.

data-amount

integer
This is the loan amount passed to the monthly payment messaging component and is required if you want to display price specific messaging. Value in USD cents (e.g., $100 = 10000).

data-page-type

string
This identifies your promotional messaging so Affirm can apply the necessary customizations based on the page they’re displayed.

Value Description
category A product category page
product A product description page
cart The customer cart page
payment The payment selection page
homepage Your site's home page
landing A landing page that describes Affirm
search  Your site's search results page
banner A banner image (use for any promotional messaging triggered by your banner or image regardless of page location)

Monthly payment messaging (affirm-as-low-as) usually display price-specific information (requires data-amount) and are typically used with the following data-page-types:

  • category
  • product
  • cart
  • payment

Since site modals (affirm-site-modal) do not display price-specific information, they are typically used with the following data-page-types:

  • homepage
  • banner
  • landing
  • search

If you don’t pass data-page-type, the component will use a default setting.

An Affirm staff member can enable Prequalification for your account, just reach out to your Affirm contact via email to get the process started.

Please specify:

  • Pages that you'd like Prequalification to be available through (e.g., we can use the above product and homepage). We can enable prequalification for those page-types.
  • (optional) Which Prequalification call to action to use in place of the default 'Learn more' or 'Prequalify Now'.
  • (if using MFP) Specify which financing program Prequalification should attempt to use.

Examples

<p class="affirm-as-low-as" data-page-type="category" data-amount="99900"></p>

Screen Shot 2018-07-02 at 9.58.37 PM.png 

<p class="affirm-as-low-as" data-page-type="product" data-amount="99900"></p>

Screen Shot 2018-07-02 at 3.35.35 PM.png 

<p class="affirm-as-low-as" data-page-type="cart" data-amount="99900"></p>

Screen Shot 2018-07-02 at 10.02.03 PM.png

5. Add the Confirmation Page function

When a customer completes their purchase, you can send their order and product information to Affirm for A/B testing, which will help you optimize your site. Send this information by adding the Confirmation Page function to your payment confirmation page. We only require orderId, total, productId, and quantity for A/B testing.

Click here for all the Confirmation Page function parameters.


affirm.analytics.trackOrderConfirmed({
    "orderId": "T12345",
    "total": 3739
}, [{
    "productId": "SKU-1234",
    "quantity": 1
}, {
    "productId": "SKU-5678",
    "quantity": 1
}]);

Required function parameters

Order object

orderId string Your internal unique identifier representing the order. Maximum 500 characters.
total integer The total amount of the transaction, including tax and shipping, stated in USD cents (e.g., $100 = 10000).

Product object

productId string Your internal unique identifier representing the product, such as the SKU or an internal database identifier. Maximum 500 characters.
quantity integer The quantity of the purchased product.

6. Test and set live

Confirm that all of your Affirm promotional messaging components display as expected.

After testing everything, update the script parameter in the Affirm.js embed code to point to our live environment at https://cdn1.affirm.com and replace the public_api_key parameter with your live public API key found at https://affirm.com/dashboard/#/apikeys.

After you’ve connected to our live environment, you’re ready to deploy to your production environment.