Skip to main content
The Sezzle Express checkout button gives shoppers a single-click path to pay with Sezzle directly from the cart, using the contact and payment details on their Sezzle account. Fewer fields to fill in means fewer abandoned carts.

​
Installation

​
Include SDK code

Include the following script in the <head> section of the page. 
<script
    type="text/javascript"
    src="https://checkout-sdk.sezzle.com/express_checkout.min.js"
></script>

​
Checkout Configuration

​
Configuration Options

const checkoutSdk = new Checkout({
  mode: string,
  publicKey: string,
  apiMode: string,
  apiVersion: string,
});

​
Sezzle Button

​
Sezzle Button Configuration

Place the element snippet from the Template tab where you wish the Sezzle Button to be rendered on the page, then update the Options attributes as needed. 
<div
    id="sezzle-smart-button-container"
    style="text-align: center"
></div>

​
Render the Sezzle Button

Add the following function to render the button when it is appropriate, such as when payment methods section loads, or when Sezzle is selected as a payment method. The parameter corresponds to the element created in the previous step. 
await checkoutSdk.renderSezzleButton("sezzle-smart-button-container");

​
Initialize the Checkout

​
Event Handlers

The SDK uses these event handlers to tell your site what’s happening in the checkout. Implement each one to react to shopper actions like completing, cancelling, or running into an error. 
checkoutSdk.init({
  onClick: function () {
    event.preventDefault();
    checkoutSdk.startCheckout({...});
  },
  onComplete: function (response) {
    console.log(response.data);
  },
  onCancel: function () {
    alert("Transaction cancelled.");
  },
  onFailure: function () {
    alert("Transaction failed.");
  },
  onCalculateAddressRelatedCosts: async function (
    shippingAddress,
    order_uuid
  ) {
    // Authentication and the checkout update must run on your backend -
    // the calls below hit Sezzle directly for illustration only.
    // See the onCalculateAddressRelatedCosts section for the backend-safe pattern.
    const response = await fetch(
      "https://gateway.sezzle.com/v2/authentication",
      {
        method: "POST",
        headers: {
          "Content-Type": "application/json",
        },
        body: JSON.stringify({
          public_key: string,
          private_key: string,
        }),
      }
    );
    const data = await response.json();
    const token = data.token;
    const updateResponse = await fetch(
      `https://gateway.sezzle.com/v2/order/{order_uuid}/checkout`,
      {
        method: "PATCH",
        headers: {
          "Content-Type": "application/json",
          Authorization: `Bearer ${token}`,
        },
        body: JSON.stringify({
          currency_code: string,
          address_uuid: shippingAddress.uuid,
          shipping_options: [
             {
               name: string,
               description: string,
               shipping_amount_in_cents: integer,
               tax_amount_in_cents: integer,
               final_order_amount_in_cents: integer
             }
          ]
        }),
      }
    );
    const updateStatus = updateResponse.ok;
    return {
      ok: updateStatus,
    };
  },
});

​
Checkout Initialization

checkoutSdk.startCheckout({
  checkout_payload: {
    // "cancel_url":{
    //     "href": string
    // },
    // "complete_url":{
    //     "href": string
    // },
    express_checkout_type: string,
    order: {
      intent: string,
      reference_id: string,
      description: string,
      requires_shipping_info: boolean,
      items: [
        {
          name: string,
          sku: string,
          quantity: integer,
          price: {
            amount_in_cents: integer,
            currency: string,
          },
        },
      ],
      discounts: [
        {
          name: string,
          amount: {
            amount_in_cents: integer,
            currency: string,
          },
        },
      ],
      metadata: {
        some_property: string,
        some_other_property: string
      },
      order_amount: {
        amount_in_cents: integer,
        currency: string,
      },
    },
  },
});
The startCheckout method should be implemented in the checkout onClick handler. There are two ways to start checkout:
  • With a checkout payload — pass the full session object inline (shown above). The cancel and complete URLs are optional for iframe and popup mode.
  • With an existing checkout URL — call startCheckout({ checkout_url }). The SDK mode must match the checkout_mode you used when creating the session. For iframe and popup, include the parent window’s origin in the cancel and complete URLs.
Customer Tokenization: the customer UUID isn’t delivered through onComplete. To receive it, subscribe to the customer.tokenized webhook event.

​
Capture Payment

Skip this step if you used CAPTURE intent when starting the checkout — Sezzle captures the order automatically.
checkoutSdk
  .capturePayment(response.data.order_uuid, {
    capture_amount: {
      amount_in_cents: integer,
      currency: string,
    },
    partial_capture: boolean,
  })
  .then((r) => {
    console.log(r);
  });

​
onCalculateAddressRelatedCosts

For security purposes, authentication and checkout update must originate from merchant’s back-end code.
  1. Get authentication token
    • Call the authentication endpoint to obtain a bearer token
    • You should have already set this up in your back-end for the standard integration
    • Instead of pointing directly to Sezzle as in the below example, you can re-use your existing function
  2. Update the order
    • Call the Update Checkout endpoint to provide Sezzle with shipping option(s) and final tax and shipping amount based on shopper’s shipping address
Your back-end must respond within 40 seconds. If Sezzle does not receive your shipping option(s) within this window, the checkout fails with a merchant_shipping_cost_timeout error and the shopper is unable to complete their purchase.
Once shipping_options have been provided to Sezzle for a checkout, they cannot be edited unless the shopper changes their shipping address.
onCalculateAddressRelatedCosts: async function (
  shippingAddress,
  order_uuid
) {
  // Call authentication endpoint
  const response = await fetch(
    yourBackendAuthenticationURL,
    {
      method: "POST",
      headers: {
        "Content-Type": "application/json",

      },
      body: JSON.stringify({
        public_key: string,
        private_key: string,
      }),
    }
  );
  const data = await response.json();
  const token = data.token;
  const updateResponse = await fetch(
    yourBackendUpdateOrderURL,
    {
      method: "PATCH",
      headers: {
        "Content-Type": "application/json",
        Authorization: `Bearer ${token}`,
      },
      body: JSON.stringify({
        currency_code: string,
        address_uuid: shippingAddress.uuid,
        shipping_options: [
           {
           name: string,
           description: string,
           shipping_amount_in_cents: integer,
           tax_amount_in_cents: integer,
           final_order_amount_in_cents: integer
           }
        ]
      }),
    }
  );
  const updateStatus = updateResponse.ok;
  return {
    ok: updateStatus,
  };
},
Response
{
  ok: boolean,
  error: {
    code: string
  }
}