Skip to main content

Merchant Help

 

Affirm Merchant Help

Modal Checkout Upgrade

Overview

Modal checkout is a more fluid checkout experience for customers on most platforms and devices. The modal checkout flow also enables client-side callbacks so that you can receive the checkout confirmation from our JavaScript runtime instead of HTTP. You can upgrade your checkout implementation to take advantage of this new experience.

Implementation

You can enable Modal Checkout by:

  1. Adding a new checkout object parameter.
  2. Switching out the function you use to initiate checkout.
  3. Optional: define JS callback functions for the user cancel/confirm events

Add checkout object parameter

Modal checkout is enabled 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. If a other/blank/null value is passed, the default, redirect checkout flow will be used.

 

Change checkout method call

Currently, you're using affirm.checkout.post() to initiate the Affirm checkout (redirect) flow. To start using the new modal checkout, you can start using the affirm.checkout.open() function instead. You can still go back to the old redirect checkout flow just be removing the "mode":"modal" parameter from the checkout object, as affirm.checkout.open() works for both checkout flows.

//old
//affirm.checkout.post();

affirm.checkout.open();

Define callback functions

Note: This step is optional. If you don't specify JS callbacks, we will redirect the parent window to the user_confirmation_url or user_cancel_url.

The affirm.checkout.open() function will accept an argument object where you can define a success and failure callback function.

{
    onFail: function(){yourAffirmCancelFunction()},
    onSuccess: function(succes_object){yourAffirmSuccessFunction(succes_object)}
}
onFail
optional function. Called when the user exits from, cancels, or is declined in the Affirm checkout flow
onSuccess
optional function. Called when the user confirms their approved Affirm loan. A success_object is passed through to your success function, which contains the checkout_token.

Initiate checkout

Call affirm.checkout.open() and the modal checkout flow will appear in a lightbox modal above your page contents.

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)};
});

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

  });