Open Affirm Checkout Function

Overview

Using the affirm.checkout.open() function, you can direct your customers to Affirm's secure payment portal. This guide outlines the steps for executing this feature.

Implementation Steps

Using JavaScript for Initialization

Initiate the checkout process by creating your checkout object with affirm.checkout(). To transition the customer to the Affirm Checkout portal, call affirm.checkout.open().

affirm.ui.ready(function(){
   affirm.checkout(checkoutObject);
   affirm.checkout.open();
})

Example

Here's a code example to guide you through the process:

affirm.checkout({
 
      "merchant": {
        "user_confirmation_url": "https://merchantsite.com/confirm",
        "user_cancel_url": "https://merchantsite.com/cancel",
        "user_confirmation_url_action": "POST",
        "name": "Your Customer-Facing Merchant Name"
      },
      "shipping":{
        "name":{
          "first":"Joe",
          "last":"Doe"
        },
        "address":{
          "line1":"633 Folsom St",
          "line2":"Floor 7",
          "city":"San Francisco",
          "state":"CA",
          "zipcode":"94107",
          "country":"USA"
        },
        "phone_number": "4153334567",
        "email": "[email protected]"
      },
      "billing":{
        "name":{
          "first":"Joe",
          "last":"Doe"
        },
        "address":{
          "line1":"633 Folsom St",
          "line2":"Floor 7",
          "city":"San Francisco",
          "state":"CA",
          "zipcode":"94107",
          "country":"USA"
        },
        "phone_number": "4153334567",
        "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",
        "categories": [
            ["Home", "Bedroom"],
            ["Home", "Furniture", "Bed"]
        ]
      }
   ],
      "discounts":{
         "RETURN5":{
            "discount_amount":500,
            "discount_display_name":"Returning customer 5% discount"
        },
        "PRESDAY10":{
            "discount_amount":1000,
            "discount_display_name":"President's Day 10% off"
      }
   },
   "metadata":{
      "shipping_type":"UPS Ground",
      "mode":"modal"
   },
   "order_id":"JKLMO4321",
   "currency":"USD",  
   "financing_program":"flyus_3z6r12r",
   "shipping_amount":1000,
   "tax_amount":500,
   "total":100000
});

affirm.checkout.open();

For additional information, please refer to our Checkout Object page or Checkout Object recipe linked below.

📚

Configure the Checkout Object

Open Recipe

Parameters and Callbacks

Method Arguments

Parameter	Type	Description
`checkoutObject`	Required	The object containing the data payload for customer checkout.

Callback Mechanisms

Note that this method typically doesn't return a value. Set redirection URLs using the checkout object. If your metadata setting is 'modal,' implement the following callback functions:

onFail: Called when the customer exits, cancels or is declined in the Affirm checkout flow.
onSuccess: Triggered upon successful confirmation of the Affirm loan. This function yields a success object, which contains a checkout_id. Note that this checkout_id will be the value used to authorize the loan in the following Authorization request. The default onSuccess will complete a form submission to the user_confirmation_url with the method defined by user_confirmation_url_action. Specifying an onSuccess callback will override the default functionality.
onOpen: Called when Affirm Checkout is successfully initialized on the user interface.
onValidationError: Alerts you in case of a validation error during the checkout request.

// Callback example
affirm.checkout.open({
    onFail: function(error) {
      // Error handling
    },
    onSuccess: function(checkout) {
      // Success procedures
    },
    onOpen: function(token) {
      // Initialization successful
    },
    onValidationError: function(checkout_validation_error) {
      // Validation error handling
    }
});