Skip to main content

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.

  • Create Checkout
  • Capture Payment
  • Supports Sezzle Checkout in an iframe, pop-up window, or redirect to Sezzle
  • Handle Payment Success
  • Handle Payment Cancel
  • Handle Payment Failure
  • Render Sezzle Button

Include SDK code

Include https://checkout-sdk.sezzle.com/checkout.min.js in the <head> section of the page.

<head>
<script type="text/javascript" src="https://checkout-sdk.sezzle.com/checkout.min.js"></script>
</head>

Checkout Configuration

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

Configuration options

AttributeRequiredOptions
publicKeyYesxxxx (used only when creating a checkout or capturing payment)
modeNopopup or iframe, or redirect is also supported
apiModeNolive or sandbox
apiVersionNov2 is the standard
info

popup mode will work out-of-the-box. No additional configuration is required to use popup. Sezzle currently recommends popup mode.

iframe mode will not work properly without first contacting Sezzle. For security reasons, Sezzle must enable iframe for your domain(s). To have it enabled, please submit a request with your Sezzle Merchant UUID and a list of domains to be allowed per environment (production and sandbox). For example, please enable uat1.mysite.com, uat2.mysite.com in sandbox and www.mysite.com, mysite.com in production.

The integration for popup and iframe are identical, aside from the mode. Using popup mode will expedite your development. Upon completing the integration, if iframe is a requirement, then contact Sezzle to enable your domain(s) and switch the mode to iframe.

Example configuration

const checkout = new Checkout({
'mode': "popup",
'publicKey': "xxxx",
'apiMode': "sandbox",
'apiVersion': "v2"
});

Sezzle Button Configuration

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

  • Use HTML attributes to customize the button.

AttributeDescription
templateTextText that will prepended with the Sezzle logo. Default is Checkout with %%logo%%
borderTypeOptions are square and semi-rounded
customClassCustom classes to be applied
paddingTopDefault is 1px
paddingBottomDefault is 7px
paddingLeftDefault is 30px
paddingRightDefault is 30px
sezzleImageWidthDefault is 84px
sezzleImagePositionTopPosition of the Sezzle logo from top.
sezzleImagePositionBottomPosition of the Sezzle logo from bottom.
sezzleImagePositionLeftPosition of the Sezzle logo from left.
sezzleImagePositionRightPosition of the Sezzle logo from right.
letterSpacingSpacing between the templateText letter.
widthWidth of the button
heightHeight of the button. Default is 4.2em

Example Setup

<!-- button placeholder -->
<div id="sezzle-smart-button-container"></div>

<!-- button with customization -->
<div id="sezzle-smart-button-container" style="text-align: center"
templateText="Pay with %%logo%%"
borderType="semi-rounded"
customClass="action,primary,checkout">
</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.

checkout.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.

EventRequiredDescription
onClickYesSezzle Button is clicked by the user
onCompleteYesSezzle payment is successfully completed
onCancelYesSezzle payment is cancelled
onFailureYesSezzle payment has failed

Event handler details

  • A successfully completed Sezzle checkout will trigger an event to the onComplete handler. The event should include a data object with data relevant to the start checkout input parameter.
  • If the user exits the Sezzle checkout for any reason, the onCancel handler will be executed.
  • If there is an error loading the Sezzle checkout page, the onFailure handler will be executed.

Checkout Initialization

This checkout will be started by payload

checkout.init({
onClick: function () {
event.preventDefault();
checkout.startCheckout({
checkout_payload: {
"order": {
"intent": "AUTH",
"reference_id": "ord_12345",
"description": "sezzle-store - #12749253509255",
"order_amount": {
"amount_in_cents": 10000,
"currency": "USD"
}
}
}
});
},
onComplete: function (event) {
console.log(event.data)
},
onCancel: function() {
console.log("checkout canceled");
},
onFailure: function() {
console.log("checkout failed");
}
})

Alternate 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.

  1. Use a checkout payload as detailed in the Session Object.
    • The cancel and complete urls are not required for iframe and popup mode.
  2. 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: 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.

Installment Plan

const checkout = new Checkout({});
checkout.getInstallmentPlan(1000);
{
"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.