Modal Checkout with Direct Checkout

Learn how to initiate modal checkout with the Direct Checkout API

Overview

With Modal checkout, your customers go through the the Affirm loan application flow in a modal while remaining on your site. As a result, customers experience a seamless process since this flow doesn't redirect to an affirm.com site. Modal checkout also enables client-side callbacks so that you can receive confirmation checkout from affirm.js instead of HTTP.

If you're using our [Direct Checkout API]((https://docs.affirm.com/developers/reference/direct), follow these steps to retrieve the checkout ID on your server-side. Then, launch the modal from the client-side while supplying the checkout ID.


Step 1: Send the checkout object to Affirm

Call the /api/v2/checkout/direct endpoint to send the checkout object to Affirm.

curl --request POST \
     --url https://api.affirm.com/api/v2/checkout/direct \
     --header 'Accept: application/json' \
     --header 'Content-Type: application/json' \
     --data '
{
     "merchant": {
          "use_vcn": "false"
     }
}
'

Step 2: Receive the checkout_id from the response

Receive and store the checkout_id from the /api/v2/checkout/direct response.

{
    "redirect_url": "https://sandbox.affirm.com/products/checkout?public_api_key=AF8E24MPN009M9OS&checkout_ari=PO4D77JZ6W5X123T",
    "checkout_id": "PO4D77JZ6W5X123T"
}

Step 3: Launch the Affirm modal

Use the affirm.checkout function and configure the checkout object to launch the Affirm modal.

  • Call the affirm.checkout function
  • Set the checkoutAri parameter with the checkout_id
  • Set the mode parameter to modal
  • Launch the Affirm modal
affirm.checkout({
  ...
  "checkoutAri"  : "PO4D77JZ6W5X123T",
  "metadata": {
     "mode": "modal"
  }
});
...
affirm.checkout.open();

Recipe

Use our Modal checkout recipe to walk through the code step by step.