Skip to main content

Merchant Help

 

Affirm Merchant Help

Prequalification Integration

Overview

Monthly Payment Messaging's Educational Modals now support 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.

Once a customer is prequalified, that prequalification will automatically be applied to their next Affirm checkout attempt on your site. No manual intervention or additional integration steps are required for Prequalification to function.

You can find more information about Prequalification here.

Setup

Prequalification can be added to the Educational Modals for your existing Monthly Payment Messaging with no changes, assuming that you're already using the latest embed code and configuring it with a Promo ID.  To start using the latest version of our Educational Modals, you can either follow the integration instructions above, or review our Educational Modal upgrade guide.

  1. Reach out to your Affirm contact, like your Client Success Manager, and request that they add Prequalification to your Educational Modals. 
  2. Affirm will provide you with a Promo ID to use in your Monthly Payment Messaging HTML embed code.
    • If you're already using a Promo ID, we can add Prequalification to that existing Promo ID, or create a new Promo ID for you to use.
  3. Enter the new Promo ID into the Monthly Payment Messaging HTML element, for example:
    <span class="affirm-as-low-as" data-promo-id="promo_set_123" data-amount="50000">

Once the new Promo ID has been added to the Affirm messaging on your pages, Prequalification will be enabled for the Educational Modals triggered by your "as low as" messaging.

Design
 

Screen Shot 2018-03-12 at 9.06.17 PM.png

Customization

Prequalification-specific Monthly Payment Messaging ("As Low As")

The default call to action in Affirm Monthly Payment Messaging is 'Learn more'. The addition of Prequalification to our Educational Modals will  can have the "Starting your at $10/mo with Affirm.  Monthly Payment Messaging that is more specific to Prequalification. 

Examples:

  • "Starting at $10 a month with Affirm. Prequalify now"
  • "Starting at $10 a month with Affirm. See if you prequalify"

In order to setup this type of messaging, there are two main steps:

1. Inform your Affirm Client Success Manager that you'd like the Prequalification call to action added to your Monthly Payment Messaging. 

Your Affirm contact will add the new call to action (e.g., "Prequalify now") to a given Promo ID and communicate that to your team. You'll then use that specific Promo ID anywhere that you want this call to action to appear in the Monthly Payment Messaging.

2. Remove the default 'Learn more' call to action.

The 'Learn more' call to action is always appended by default, but it can be removed by setting the Monthly Payment Messaging HTML element's 'data-learnmore-show' attribute to 'false'.

For example:
<span class="affirm-as-low-as" data-promo-id="promo_set_defaul" data-learnmore-show="false"></span>

With the new call to action being added by the Prequalification-specific Promo ID, and the default 'Learn more' removed, the Monthly Payment Messaging will now appear as expected.

Exclude Prequalification from certain Educational Modals, if desired

Affirm Prequalification is enabled in Educational Modals when a Prequalification-enabled Promo ID is specified in the Monthly Payment Messaging's HTML embed code.

For example, 'promo_set_prequal' is setup with Prequalification enabled, and 'promo_set_default' does not have Prequalificaiton enabled, we should use 'promo_set_default' as the Promo ID anywhere that Prequalification messaging shouldn't be present.

Please work with your Client Success Manager to ensure that you have all the Educational Modal varients you'll need on your pages.

Examples
With Prequalification
<p class="affirm-as-low-as" data-promo-id="XXXXXXXXXXXXX" data-amount="50000" data-learnmore-show="false"></p>


Button Example

You can display the promo as a button using a combination of a custom 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 default implementation above.

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 the promo as a banner using a combination of a custom 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 default implementation above.

CSS

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

/*Affirm Prequal Banner*/
 
 
/*Customize these
===============*/
 
.affirm-site-modal {
    /*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-site-modal {display: table;}
.affirm-site-modal p {margin:0px;}
#pane_left {display:table-cell; padding:.4em;vertical-align:middle;}
.affirm-site-modal .__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-site-modal .buywith {font-size:2.5em; padding:.4em .2em;text-align: left;}
#line2 {padding:.3em;line-height:1.2em;}
.affirm-site-modal .realtime, .affirm-prequal-text .prequalify {font-size:1.8em; padding:.3em;}
.affirm-site-modal .realtime {color:#888;white-space:nowrap;}
.affirm-site-modal .prequalify {color:#00C8E5;white-space:nowrap;}

User Flow

  1. Promo with prequalification is embedded on the page.
  2. User clicks promo text or button.
  3. Informational modal is displayed, with a 'See if you qualify' 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