Skip to main content
The Javascript SDK can be used for a simple, lightweight integration, but it also includes an in-context mode which will host the Sezzle checkout in a modal iframe or pop-up window.

Checkouts

Create checkouts and capture payments with Sezzle.

Integrations

Checkout in an iframe, pop-up window, or redirect to Sezzle.

Payments

Handle payment success, failure, or cancel with your Sezzle orders.

Sezzle Button

Render the Sezzle checkout button on your store.

​
Include SDK code

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

​
Checkout Configuration

The first requirement to get started with the direct JavaScript SDK is to configure a new Checkout object.

​
Configuration Options

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

​
Payment Option

This section covers how to present Sezzle as a payment method at checkout. Depending on your webpage’s design, you might wish to display Sezzle as an alternative payment method (APM) button, a radio option in a list of payment methods, and/or as an alternative submission button. Below are some examples of how to implement the front-end component.
If you wish to use a different design from the options displayed below, please refer to our Co-Branded Guidelines for Approved Messaging and Sezzle logo acceptable use.

​
Sezzle in Payment Methods Table

Below is an example of Sezzle as a payment method radio.
Payment Methods Table

​
Sezzle Button

The button option is available as a component of this SDK library. It is comprised of two parts: the configurable element plcaeholder and the render function.

​
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.
APM-button

Sezzle as a button alongside other APMs
Submit%20button

Sezzle as a Submit button as alternative to default button

​
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. 
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 (event) {
    console.log(event.data);
  },
  onCancel: function () {
    console.log("Checkout cancelled.");
  },
  onFailure: function () {
    console.log("Checkout failed.");
  },
});

​
Checkout Initialization

checkoutSdk.startCheckout({
  checkout_payload: {
    order: {
      intent: string,
      reference_id: string,
      description: string,
      order_amount: {
        amount_in_cents: integer,
        currency: string,
      },
    },
  },
});
Alternatively, start checkout by URL:
checkout.startCheckout({
    checkout_url: "https://checkout.sezzle.com/?id=example",
});
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.

​
Checkout completed by Payload

function onCompleteHandler(event) {
    var data = event.data || Object.create(null);

    console.log("session data:", data.session_uuid, data.order_uuid);
}

checkout.init({
    onComplete: onCompleteHandler,
});

​
Checkout completed by URL

function onCompleteHandler(event) {
    var data = event.data || Object.create(null);

    console.log("checkout data:", data.checkout_uuid);
}

checkout.init({
    onComplete: onCompleteHandler,
});

​
Capture Payment

Capturing an order is not required if the CAPTURE intent was used when creating the checkout.
var payload = {
    capture_amount: {
        amount_in_cents: integer,
        currency: string,
    },
};

checkout.capturePayment(data.order_uuid, payload);

​
Installment Plan

const checkout = new Checkout({});
checkout.getInstallmentPlan(1000);

{
    "schedule": string,
    "totalInCents": integer,
    "installments": [
        {
            "installment": integer,
            "amountInCents": integer,
            "dueDate": string
        }
    ]
}
This function will provide the installment details based on an amount in cents. An existing checkout can be used, or a checkout without any configuration can also be used to quickly get installment details.