Using Direct Javascript SDK

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,
});

const checkoutSdk = new Checkout({
  mode: "popup",
  publicKey: "sz_pub_...",
  apiMode: "sandbox",
  apiVersion: "v2",
});

mode

string

default:"popup"

Available options: popup, iframe, redirect

If you use iframe mode, add *.sezzle.com to your site’s Content Security Policy (CSP) allowlist so the Sezzle checkout iframe can load.

popup (recommended): works out of the box for most browser-based SDK integrations.
iframe: required when popups are blocked (e.g. inside a webview or embedded browser). Sezzle must enable iframe for your domain(s) first — submit your Merchant UUID and the domains to allow per environment (sandbox and production). For example: please enable uat1.mysite.com, uat2.mysite.com in sandbox and www.mysite.com, mysite.com in production.
redirect: supported but generally less useful with the SDK, since the SDK’s value is the in-context checkout and window messaging.

publicKey

string

required

Used when creating a checkout or capturing payment. Find your API keys at https://dashboard.sezzle.com/merchant/settings/apikeys

apiMode

string

default:"live"

Environment in which the checkout is to be completedAvailable options: live, sandbox

apiVersion

string

default:"v2"

The version of the Sezzle Checkout API the SDK will call. Use v2 unless directed otherwise.Available options: v2

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.

Image
Example Snippet

This example snippet is for informational use only. Please follow the established HTML format of your existing payment methods.

        <div class="payment-method-tile">
            <input type="radio" id="sezzlepay" value="sezzlepay"/>
            <label for="sezzlepay">
                <div style="width: 100%; display: inline; align-items: center; justify-content: left;">
                    <img src="https://media.sezzle.com/branding/2.0/Sezzle_Logo_FullColor.svg" alt="Sezzle" style="height: 20px; width: fit-content; padding: 0px 4px 0 2px; position: relative; top: 4px;"/>
                    <span>Buy Now, Pay Later</span>
                </div>
            </label>
        </div>

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.

Image
Template
Example
Options

Sezzle as a button alongside other APMs

Sezzle as a Submit button as alternative to default button

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

<div
    id="sezzle-smart-button-container"
    style="text-align: center"
    templateText="Pay with %%logo%%"
    borderType="semi-rounded"
    customClass="action,primary,checkout"
></div>

templateText

string

default:"Checkout with %%logo%%"

Text to appear inside the button. Use %%logo%% inside the text to display the Sezzle image

theme

string

default:"light"

The theme corresponds to your site’s background color. If theme: dark, the button will be white with dark text. Else, the button will be dark purple with white text.Available options: dark, light

borderType

string

default:"square"

Available options: square, semi-rounded

customClass

string

Custom classes to be applied

paddingTop

string

default:"1px"

Blank space between the top of the content and the top edge of the button

paddingBottom

string

default:"7px"

Blank space between the bottom of the content and the bottom edge of the button

paddingLeft

string

default:"30px"

Blank space between the left side of the content and the left edge of the button

paddingRight

string

default:"30px"

Blank space between the right side of the content and the right edge of the button

sezzleImageWidth

string

default:"84px"

Width of the Sezzle logo within the button

sezzleImagePositionTop

string

CSS top offset for the Sezzle logo inside the button (e.g., 2px).

sezzleImagePositionBottom

string

CSS bottom offset for the Sezzle logo inside the button (e.g., 2px).

sezzleImagePositionLeft

string

CSS left offset for the Sezzle logo inside the button (e.g., 2px).

sezzleImagePositionRight

string

CSS right offset for the Sezzle logo inside the button (e.g., 2px).

letterSpacing

string

Spacing between the templateText letters.

width

string

Width of the button

height

string

default:"4.2em"

Height of the 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 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.

Template
Example
Options

checkoutSdk.init({
  onClick: function () {
    event.preventDefault();
    checkoutSdk.startCheckout({...});
  },
  onComplete: function (response) {
    console.log(response.data);
  },
  onCancel: function () {
    console.log("Checkout cancelled.");
  },
  onFailure: function () {
    console.log("Checkout failed.");
  },
});

checkoutSdk.init({
  onClick: function () {
    event.preventDefault();
    checkoutSdk.startCheckout({
      checkout_payload: {
        order: {
          intent: "AUTH",
          reference_id: "543645yg5tg5675686",
          description: "sezzle-store - #12749253509255",
          order_amount: {
            amount_in_cents: 10000,
            currency: "USD",
          },
        },
      },
    });
  },
  onComplete: function (response) {
    alert("Completed transaction. Capture started.");
    checkoutSdk
    .capturePayment(response.data.order_uuid, {
        capture_amount: {
        amount_in_cents: 10000,
        currency: "USD",
        },
        partial_capture: false,
    })
    .then((r) => {
        console.log(r);
    });
  },
  onCancel: function () {
    console.log("Checkout cancelled.");
  },
  onFailure: function () {
    console.log("Checkout failed.");
  },
});

onClick

function

required

Runs when the shopper clicks the Sezzle button.Use this function to create the Sezzle checkout session and direct the shopper into that flow.

See Checkout Initialization section for startCheckout payload options.

onComplete

function

required

Runs when Sezzle checkout completes successfully. Use this to save the order and, if you used intent: AUTH, to capture the payment.

See Capture Payment section for capturePayment payload options.

Show parameters

response

object

The checkout completion response

Show child attributes

data

object

Checkout completion data

Show child attributes

status

string

"success"

checkout_uuid

string

Checkout UUID

session_uuid

string

Session UUID

order_uuid

string

Order UUID

origin

string

Origin URL of the checkout window

onCancel

function

required

Runs when the shopper exits Sezzle checkout before completing payment. Use this to update the order status in your system.

Show parameters

response

object

The cancel event response

Show child attributes

data

object

Cancel event data

Show child attributes

status

string

"cancel"

checkout_uuid

string

The UUID of the checkout that failed

session_uuid

string

Session UUID

order_uuid

string

Order UUID

origin

string

Origin URL of the checkout window

onFailure

function

required

Runs when Sezzle checkout fails to load or hits an error. Use this to update the order status and surface the failure to the shopper.

Show parameters

response

object

The failure response

Show child attributes

data

object

Error object or API error response. When data is an Error:

Show child attributes

status

string

"failure"

checkout_uuid

string

The UUID of the checkout that failed

session_uuid

string

Session UUID

order_uuid

string

Order UUID

message

string

Error message (e.g., "Public Key is missing.")

origin

string

Origin URL of the checkout window

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,
      },
    },
  },
});

checkoutSdk.startCheckout({
  checkout_payload: {
    order: {
      intent: "AUTH",
      reference_id: "543645yg5tg5675686",
      description: "sezzle-store - #12749253509255",
      order_amount: {
        amount_in_cents: 10000,
        currency: "USD",
      },
    },
  },
});

The checkout_payload schema mirrors the Create Session request body. See that reference document for the full list of fields, types, and constraints.

Alternatively, start checkout by URL:

checkout.startCheckout({
    checkout_url: "https://checkout.sezzle.com/?id=example",
});

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.

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

Skip this step if you used CAPTURE intent when starting the checkout — Sezzle captures the order automatically.

Template
Example
Options

var payload = {
    capture_amount: {
        amount_in_cents: integer,
        currency: string,
    },
};

checkout.capturePayment(data.order_uuid, payload);

var payload = {
    capture_amount: {
        amount_in_cents: 5000,
        currency: "USD",
    },
};

checkout.capturePayment(data.order_uuid, payload);

The capture payment method requires two parameters, the order_uuid and the payload as detailed in the Capture Amount By Order Object.

The capturePayment request body mirrors the Capture by Order request body. See that reference document for the full list of fields, types, and constraints.

Installment Plan

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

Template
Example
Options

{
    "schedule": string,
    "totalInCents": integer,
    "installments": [
        {
            "installment": integer,
            "amountInCents": integer,
            "dueDate": string
        }
    ]
}

{
    "schedule": "bi-weekly",
    "totalInCents": 1000,
    "installments": [
        {
            "installment": 1,
            "amountInCents": 250,
            "dueDate": "2020-10-14"
        },
        {
            "installment": 2,
            "amountInCents": 250,
            "dueDate": "2020-10-28"
        },
        {
            "installment": 3,
            "amountInCents": 250,
            "dueDate": "2020-11-11"
        },
        {
            "installment": 4,
            "amountInCents": 250,
            "dueDate": "2020-11-25"
        }
    ]
}

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.

Checkouts

Integrations

Payments

Sezzle Button

​Include SDK code

​Checkout Configuration

​Configuration Options

​Payment Option

​Sezzle in Payment Methods Table

​Sezzle Button

​Sezzle Button Configuration

​Render the Sezzle Button

​Initialize the Checkout

​Event Handlers

​Checkout Initialization

​Checkout completed by Payload

​Checkout completed by URL

​Capture Payment

​Installment Plan

Include SDK code

Checkout Configuration

Configuration Options

Payment Option

Sezzle in Payment Methods Table

Sezzle Button

Sezzle Button Configuration

Render the Sezzle Button

Initialize the Checkout

Event Handlers

Checkout Initialization

Checkout completed by Payload

Checkout completed by URL

Capture Payment

Installment Plan