Open Affirm Checkout

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.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": "Merchant Name"
  },
  // Additional parameters for shipping, billing, etc.
});

affirm.checkout.open();

Parameters and Callbacks

Method Arguments

Callback Mechanisms

It's important to note that this method typically doesn't return a value. You should set redirection URLs using the checkout object. If your metadata setting isn't set to 'modal,' you'll need to 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.
• 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
    }
});