Modal vs Redirect checkout

Learn about modal checkout.

Overview

Affirm enables your customers to go through the Affirm loan application flow using our Modal or Redirect checkout.

Modal

Users go through the Affirm flow in a modal while remaining on your site. Modal checkout also enables client-side callbacks so that you can receive confirmation checkout from affirm.js instead of HTTP.

Redirect

Users are redirected to Affirm's site, where they authenticate and go through the checkout flow. Once they complete checkout, they're returned to the merchant site.


Modal Checkout

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)},
    onOpen: function(){yourAffirmOpenFunction()}
}

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.

onOpen

optional function. Called when the customer successfully loads the Affirm checkout flow.

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)},
    onOpen: function(token){console.log("Affirm modal was opened successfully, checkout token is: " + token)}
});

Design

12321232 12321232

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.

10281028

Safari

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

507507

2. Uncheck Enable content blockers.

375375

Did this page help you?