Modal checkout

Learn about 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

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(success_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

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": "[email protected]"
      },
      "billing":{
        "name":{
          "first":"Joe",
          "last":"Doe"
        },
        "address":{
          "line1":"633 Folsom St",
          "city":"San Francisco",
          "state":"CA",
          "zipcode":"94107",
          "country":"USA"
        },
        "phone_number": "4151234567",
        "email": "[email protected]"
      },
      "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

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.

Safari

1. Go to Safari > Settings for This Website... .

2. Uncheck Enable content blockers.


Did this page help you?