Skip to main content

Merchant Help

 

Affirm Merchant Help

Prequalification Integration

Overview

What is Affirm Prequalification?

Prequalification is a new feature that allows your customers to discover how much they qualify to spend with Affirm on your site early in their shopping process.  This simple tool lets your customers shop with confidence. Shoppers who leveraged Prequalification during the feature Beta program spent an average of up to 30% more per transaction - on top of the existing Affirm AOV lift.

How does Prequalification work?

Add the Affirm Prequalification text or button (e.g., 'Pre-qualify now',  'See if you qualify') anywhere on your site where Affirm is mentioned, such as the PDP, category page, financing page, or homepage. When a customer clicks on the Prequalifcation text or button, a modal describes Affirm’s simple monthly payment programs.  From there, the customer completes a simple application using top-of-mind information that lets them know in real-time how much they qualify to spend with Affirm on your site. Once they complete the application and see the amount they've prequalified for, they will continue shopping on your site as usual. When they select Affirm at checkout, their Prequalification decision will be applied automatically.

Is Prequalification easy to integrate?

Yes, Prequalification is easy to integrate; about an hour of developer time. First, make sure Affirm.js is embedded on your page, using our standard embed code here. Then, simply add two lines of Javascript to your page to set the Prequalification configuration. Finally, add the HTML placeholder element to your page template, and the Affirm Prequalification promo will render in that location at page load.

See the prequalification flow here.


Integration

  1. Select your Prequalification text
  2. Request your Promo ID
  3. Embed affirm.js on the page
  4. Wait for Affirm UI to be ready
  5. Define the Prequalification configuration
  6. Insert HTML placeholder on the page

Select your Prequalification text

You can select which Affirm Prequalification text is rendered on the page. Just choose one of the options below:

  • Prequalify now
  • See if you prequalify
  • See how much you prequalify for
  • Check how much you can spend at Merchant with Affirm
  • Split your purchase into easy monthly payments. See how much you qualify for.
  • Prequalify for Affirm financing. Apply now.
  • Prequalify for as low as 0% APR financing. Learn More. (for 0-30% merchants)
  • Prequalify to pay over time with Affirm. Rates from 0% APR. Learn More. (for 0%-30% merchants)
  • Prequalify to pay over time with Affirm at 0% APR. Learn More. (for 0% only merchants)
  • Prequalify for 0% APR financing. Learn More. (for 0% only merchants)

Request your Promo ID

Before integrating Prequalification, you will a Promo ID to configure the Prequalification text that will appear.

  1. Reach out to your Client Success Manager (CSM). You can contact merchanthelp@affirm.com if you're not sure who this is.
  2. Dicsuss with your CSM what text you'd like to be displayed (e.g., 'Prequalify for Affirm financing. Apply now.')
  3. Receive the Promo ID (to be used later when you drop in the HTML embed code)

Embed affirm.js

<script>
  _affirm_config = {
    public_api_key:  "XXXXXXXXXXXXXXX",
    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>

Note: replace the 'public_api_key' value with your own public API key. The API key must match the Affirm-environment you're referencing ('sandbox' or 'live').

Wait for Affirm UI to be ready

affirm.ui.ready(function(){
    //Scripts that use Affirm JS functionality live here.
});

Define the Prequalification configuration

 

The Prequal configuration object contains the page_type. If this prequal configuration object is defined before affirm.js runtime is initialized, the prequal widget will appear on the page. 

{
    "page_type": "home"
}
page_type
required enum. This indicates what type of page the prequal widget is embedded on. Possible values:
  • "home" - A home page or landing page.
  • "category" - Gallery/category pages.
  • "product" - Product detail page (PDP).
  • "cart" - Can be used for cart and checkout pages.
  • "in_store" - In-store landing pages.
mode
optional string. Defaults to null (pop-up window) presentation if key is any value other than "modal". Modal mode displays the Prequal modal and application within an iFrame modal.

Set Prequalification configuration

Once the Prequalification configuration has been defined as a Javascript object variable, you can pass that variable as an argument to the affirm.prequal.set() function in order to set the configuration.

 
//wait for Affirm UI to be ready
affirm.ui.ready(function(){
    //define the Prequal JSON object
    var a = {
    "page_type": "home"
    };
    //set the Prequal configuration
    affirm.prequal.set(a);
});

Insert the HTML placeholder

The HTML placeholder is where the Prequalification promo text will be rendered on the page. You must be provided a 'promo id' in order to render the Prequalification text. The Prequalification promo is set up for you by the Client Success team (merchanthelp@affirm.com), and it will serve the approved text string you've discussed. 

<p class="affirm-prequal-text" data-promo-id="YOUR_PREQUAL_PROMO_ID"></p>

  • 'class': (required) Prequalification promo elements must have a class name of 'affirm-prequal-text' present.
  • 'data-promo-id': (required) Identifier for the Prequalification promo, pulls down the configured Prequalification promo text template.

There are some options that can also be specified with additional HTML attributes:

  • 'data-affirm-color': (optional) The color of the Affirm logo or symbol.
    • Possible values are: 'black', 'blue'.
    • Default is 'blue'
       
  • 'data-affirm-type': (optional) How the Affirm name shows up in the Prequalification promo text.
    • Possible values: 'logo', 'text', 'symbol'
    • Default is 'logo'
       
  • 'data-learnmore-show': (optional) Whether 'Learn more' displays at the end of the Prequalification promo text.
    • Possible values: 'true', 'false'
    • Default is 'false'
    • If set to 'false', all of the Prequalification promo text is clickable. If set to 'true', only the 'Learn more' text will be clickable.

Page load

At page load, Affirm.js will scan the page DOM for any elements with the class of 'affirm-prequal-promo', and render the Prequalification promo text into that placeholder using the template specified by the 'data-promo-id'.


Text Example

Include this code in the <head> of your page to have the Prequalification banner and reminder appear automatically:

HTML/JS

<script>
  _affirm_config = {
    public_api_key:  "ARQBLCL7NAMBTZ7F",
    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");
</script>
<p class="affirm-prequal-text" data-promo-id="prequal_text_test"></p>

Button Example

You can display Prequalification as a button using a combination of a custom Prequalification promo ID (setup by Affirm staff) and some CSS that you'll place on the page. The HTML/Javascript embed code is the same as the Text Example.

CSS

To make the rendered text into a button, you can add the following CSS code:

.affirm-prequal-text {
    font-family: helvetica;
    display: inline-block;
    padding:20px;
    background:#0f72e5;
    border-radius:4px;
    color:#fff;
}

Banner Example

You can display Prequalification as a banner using a combination of a custom Prequalification promo ID (setup by Affirm staff) and some CSS that you'll place on the page. The HTML/Javascript embed code is the same as the Text Example.

CSS

To make the rendered text into a banner, you can add the following CSS code:

/*Affirm Prequal Banner*/
 
 
/*Customize these
===============*/
 
.affirm-prequal-text {
    /*change this to your */
    font-family:helvetica;
    color:#000;
     
    /*adjust size to fit*/
    font-size:.8em;
 
    /*use for responsive*/
    /*width:auto;*/
 
    /*use for fixed with*/
    /*width:800px;*/
     
    background:#fff;
}
 
/*END customize*/
 
 
/******************/
 
 
/*Don't touch these
=================*/
.affirm-prequal-text {display: table;}
.affirm-prequal-text p {margin:0px;}
#pane_left {display:table-cell; padding:.4em;vertical-align:middle;}
.affirm-prequal-text .__affirm-logo {display:table-cell;vertical-align:middle;font-size:3em;text-align: center;}
#pane_right {display:table-cell;}
#line1 {padding:.3em;line-height: 2em;}
.affirm-prequal-text .buywith {font-size:2.5em; padding:.4em .2em;text-align: left;}
#line2 {padding:.3em;line-height:1.2em;}
.affirm-prequal-text .realtime, .affirm-prequal-text .prequalify {font-size:1.8em; padding:.3em;}
.affirm-prequal-text .realtime {color:#888;white-space:nowrap;}
.affirm-prequal-text .prequalify {color:#00C8E5;white-space:nowrap;}

User Flow

  1. Prequalification is embedded on the page.
  2. User clicks Prequalification link or button
  3. Informational modal is displayed, with a 'Continue' button.
  4. User clicks 'Continue', then creates an account or logs in.
  5. Income verification (for the first time at a particular merchant).
  6. User sees amount they've prequalified for.
  7. User receives email and SMS.
  8. User goes through your normal checkout flow, chooses Affirm, and completes the application.
    • The prequalification only applies to the user's next checkout attempt at your store.
    • If a user decides to cancel the transaction, they will need to get prequalified again.

Mobile


  1. Screen Shot 2017-11-07 at 8.49.54 AM.png

  2. Screen Shot 2017-11-07 at 8.50.05 AM.png

  3. Screen Shot 2017-11-07 at 8.53.00 AM.png

  4. Screen Shot 2017-11-07 at 8.50.25 AM.png

  5. Screen Shot 2017-11-07 at 8.50.38 AM.png

Desktop


  1. Screen Shot 2017-11-07 at 8.44.24 AM.png

  2. Screen Shot 2017-11-07 at 8.44.42 AM.png

  3. Screen Shot 2017-11-07 at 8.44.46 AM.png

  4. Screen Shot 2017-11-07 at 8.46.15 AM.png

  5. Screen Shot 2017-11-07 at 8.46.19 AM.png

Notifications

 

Email

Screen Shot 2017-11-07 at 8.48.35 AM.png

SMS
text-prequal.png