Skip to main content

Merchant Help

 

Affirm Merchant Help

Modal Checkout

Overview

Modal checkout allows your customers to go through the Affirm loan application flow in a modal while remaining on your site. Customers experience a more seamless process since this flow doesn't redirect them to an affirm.com site. Modal checkout also enables client-side callbacks so that you can receive confirmation checkout from Affirm.js instead of HTTP.

Implementation

The steps to enable modal checkout are:

  1. Add a metadata flag to your checkout object
  2. Define callback functions (optional)

Add a metadata flag to your checkout object

Enable modal checkout by adding a new parameter to the checkout object metadata:

{
    ...,
      "metadata": {
        "mode":        "modal"
      },
    ...
}
mode
optional enum. Set to modal to enable the modal checkout flow (default uses redirect checkout flow).

Define callback functions (optional)

The affirm.checkout.open() function accepts an argument object where you can define success and failure callback functions.

{
    onFail: function(){yourAffirmCancelFunction()},
    onSuccess: function(succes_object){yourAffirmSuccessFunction(success_object)}
}
onFail
optional function. Called when the customer exits, cancels, or is declined in the Affirm checkout flow.
onSuccess
optional function. Called when the customer confirms their Affirm loan. Receives success_object, which contains the checkout_token.

Test modal checkout

After implementing modal checkout, call affirm.checkout.open(). The modal checkout flow appears in a lightbox modal above your page contents. Use the the following code to test your modal checkout.

affirm.checkout.open({
    onFail: function(){console.log("User cancelled the Affirm checkout flow")},
    onSuccess: function(a){console.log("Affirm checkout successful, checkout token is: " + a.checkout_token)}
});

Note that there are Safari-specific issues when using a network response to trigger the Affirm checkout.

Design

Screen Shot 2017-09-21 at 10.14.28 AM.pngScreen Shot 2017-09-21 at 10.14.13 AM.png

Screen Shot 2017-09-21 at 10.14.13 AM.png

Example code

 

Example checkout object

affirm.checkout({

      "merchant": {
        "user_confirmation_url":    "https://merchantsite.com/confirm",
        "user_cancel_url":          "https://merchantsite.com/cancel",
        "user_confirmation_url_action": "GET",
        "name": "Your Customer-Facing Merchant Name"
      },
      
      "metadata": {
        "mode":        "modal",
      },
      
      "shipping":{
        "name":{
          "first":"Joe",
          "last":"Doe"
        },
        "address":{
          "line1":"633 Folsom St",
          "city":"San Francisco",
          "state":"CA",
          "zipcode":"94107",
          "country":"USA"
        },
        "phone_number": "4151234567",
        "email": "joedoe@123fakestreet.com"
      },
      "billing":{
        "name":{
          "first":"Joe",
          "last":"Doe"
        },
        "address":{
          "line1":"633 Folsom St",
          "city":"San Francisco",
          "state":"CA",
          "zipcode":"94107",
          "country":"USA"
        },
        "phone_number": "4151234567",
        "email": "johndoe@123fakestreet.com"
      },
      "items": [{
        "display_name":         "Awesome Pants",
        "sku":                  "ABC-123",
        "unit_price":           1999,
        "qty":                  3,
        "item_image_url":       "http://merchantsite.com/images/awesome-pants.jpg",
        "item_url":             "http://merchantsite.com/products/awesome-pants.html"
      }],

      "discounts": {
        "RETURN5": {
          "discount_amount":    500,
          "discount_display_name": "Returning customer 5% discount"
        }
      },
      
      "shipping_amount":        1000,
      "tax_amount":             500,
      "total":                  6997

  });

Appendix

Stringing network requests and checkout initiation

Due to implementations relying on an asynchronous HTTP response to trigger the Affirm checkout, customers using Safari with pop-up blocking enabled may initially see a Continue button instead of the Affirm checkout window. This adds one additional click to the checkout process and doesn't prevent the customer from using Affirm. While this only affects a fraction of users, there are workaround solutions if you'd like to implement them.

For example, you can configure network requests that trigger Affirm to be synchronous instead of asynchronous. Most JavaScript HTTP/AJAX libraries, including the native XMLHttpRequest method, support synchronous mode.

var xhttp = new XMLHttpRequest();
//xhttp.open(method, page, async)
xhttp.open(POST, 'https://site.com/somepage/', false); 

Please contact us if you have any questions about this browser behavior and available workarounds.

Third-party cookies

Modal checkout requires that third-party cookies are allowed and enabled within a browser's privacy and security settings. If third-party cookies are blocked, and the Affirm.com cookie is not already present on the customer's device, then the Affirm checkout flow will display in a new pop-up window instead of in a modal window. If you (or your customer) experience any issues, please check the browser settings/

Chrome:

Go to Preferences > Advanced > Content Settings > Cookies.

Screen Shot 2018-05-14 at 9.55.40 AM.png

Safari:

  1. Go to Preferences -> Privacy.
  2. In the Cookies and website data: section, click Always allow.

Screen Shot 2018-05-14 at 9.58.14 AM.png