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

  • Template
  • Example
  • Options
const checkoutSdk = new Checkout({
  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).
  • Template
  • Example
  • Options
<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. 
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.
  • Template
  • Example
  • Options
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

  • Template
  • Example
  • Options
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.
  • Template
  • Example
  • Options
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);
  • Template
  • Example
  • Options
{
    "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.