The Sezzle Express checkout button is a powerful tool for custom platform merchants. Integrated directly into the cart page, the button allows shoppers to select Sezzle as their payment method with a single click, leveraging their Sezzle account for a seamless payment experience. This feature is designed to reduce cart abandonment, increase conversion rate, and enhance customer satisfaction.

​
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 ExpressCheckout({
  mode: string,
  publicKey: string,
  apiMode: string,
  apiVersion: string,
});

​
Sezzle Button

​
Sezzle Button Configuration

Create a placeholder element for the Sezzle Button to be rendered on the page(s).

<div
    id="sezzle-smart-button-container"
    style="text-align: center"
></div>

​
Render the Sezzle Button

Requires having the checkout object created from above to render the button. Call renderSezzleButton passing the id of the placeholder element defined in Button Configuration, above.

await checkoutSdk.renderSezzleButton("sezzle-smart-button-container");

​
Initialize the Checkout

​
Event Handlers

The SDK requires the following event handlers that can be used to extend features in your application.

checkoutSdk.init({
  onClick: function () {
    event.preventDefault();
    checkoutSdk.startCheckout({...});
  },
  onComplete: function (response) {
    checkoutSdk
      .capturePayment(response.data.order_uuid, {...})
      .then((r) => {
        console.log(r);
      });
  },
  onCancel: function () {
    alert("Transaction cancelled.");
  },
  onFailure: function () {
    alert("Transaction failed.");
  },
  onCalculateAddressRelatedCosts: async function (
    shippingAddress,
    order_uuid
  ) {
    // Call authentication endpoint
    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({
          amount_in_cents: integer,
          currency_code: string,
          shipping_amount_in_cents: integer,
          tax_amount_in_cents: integer,
          address_uuid: shippingAddress.uuid,
        }),
      }
    );
    const updateStatus = updateResponse.ok;
    return {
      ok: updateStatus,
    };
  },
});

​
Checkout Initialization

checkoutSdk.startCheckout({
  checkout_payload: {
    // "cancel_url":{
    //     "href": string
    // },
    // "complete_url":{
    //     "href": string
    // },
    is_express_checkout: boolean,
    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
      },
      shipping_amount: {
        amount_in_cents: integer,
        currency: string,
      },
      tax_amount: {
        amount_in_cents: integer,
        currency: string,
      },
      order_amount: {
        amount_in_cents: integer,
        currency: string,
      },
    },
  },
});

Start checkout should be implemented in the checkout onClick handler. There are two methods for hosting a checkout.

Use a checkout payload as detailed in the Session Object

  • The cancel and complete URLs are not required for iframe and popup mode.

Use an existing checkout URL

  • The mode used when configuring the SDK checkout must match the checkout_mode when creating a session.
  • The parent window origin must be provided in the cancel and complete urls when the checkout_mode is iframe or popup.

Customer Tokenization This is not supported in the onComplete event. To receive a customer UUID, subscribe to the customer.tokenized event.

​
Capture Payment

Capturing an order is not required if the CAPTURE intent was used when creating the checkout.

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 and Checkout endpoint to update shipping and tax amount
    • See Options tab below for more details
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({
        amount_in_cents: integer,
        currency_code: string,
        shipping_amount_in_cents: integer,
        tax_amount_in_cents: string,
        address_uuid: shippingAddress.uuid,
      }),
    }
  );
  const updateStatus = updateResponse.ok;
  return {
    ok: updateStatus,
  };
},
Response
{
  ok: boolean,
  error: {
    code: string
  }
}