Skip to main content

Merchant Help

 

Affirm Merchant Help

Modal Checkout

Overview

Modal checkout is a more fluid checkout experience for customers on all 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.

Implementation

You can enable the modal checkout by adding a new checkout object parameter, and by switching out the function name you use to initiate checkout.

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.

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")};
    onSucces: 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

  });