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
Attribute | Required | Options |
---|---|---|
publicKey | Yes | xxxx (used only when creating a checkout or capturing payment) |
mode | No | popup or iframe , or redirect is also supported |
apiMode | No | live or sandbox |
apiVersion | No | v2 is the standard |
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.
Attribute | Description |
---|---|
templateText | Text that will prepended with the Sezzle logo. Default is Checkout with %%logo%% |
borderType | Options are square and semi-rounded |
customClass | Custom classes to be applied |
paddingTop | Default is 1px |
paddingBottom | Default is 7px |
paddingLeft | Default is 30px |
paddingRight | Default is 30px |
sezzleImageWidth | Default is 84px |
sezzleImagePositionTop | Position of the Sezzle logo from top. |
sezzleImagePositionBottom | Position of the Sezzle logo from bottom. |
sezzleImagePositionLeft | Position of the Sezzle logo from left. |
sezzleImagePositionRight | Position of the Sezzle logo from right. |
letterSpacing | Spacing between the templateText letter. |
width | Width of the button |
height | Height 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.
Event | Required | Description |
---|---|---|
onClick | Yes | Sezzle Button is clicked by the user |
onComplete | Yes | Sezzle payment is successfully completed |
onCancel | Yes | Sezzle payment is cancelled |
onFailure | Yes | Sezzle payment has failed |
Event handler details
- A successfully completed Sezzle checkout will trigger an event to the
onComplete
handler. The event should include adata
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.
- Use a checkout payload as detailed in the Session Object.
- The cancel and complete urls are not required for
iframe
andpopup
mode.
- The cancel and complete urls are not required for
- Use an existing checkout url.
- The
mode
used when configuring the SDK checkout must match thecheckout_mode
when creating a session. - The parent window
origin
must be provided in the cancel and complete urls when thecheckout_mode
isiframe
orpopup
.
- The
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.