Express Checkout option is only available for direct integration and WooCommerce merchants.
Installation
-
Import Library
-
Copy this script to the
<head>of your site code<script type="text/javascript" src="https://checkout-sdk.sezzle.com/express_checkout.min.js"></script>
-
Copy this script to the
-
Configure SDK
- Configure Express Checkout
const checkoutSdk = new Checkout({ mode: "popup", + publicKey: `${yourSezzleAPIKey}`, apiMode: "live", apiVersion: "v2", }); -
Install Button
- Copy this placeholder element to where you wish the button to render on the page
-
See here for customization options
<div id="sezzle-smart-button-container" style="text-align: center"></div> -
Load the button using Javascript
await checkoutSdk.renderSezzleButton("sezzle-smart-button-container");
-
Configure the event listeners
checkoutSdk.init({ onClick: function () { console.log("onClick"); event.preventDefault(); checkoutSdk.startCheckout({ checkout_payload: { express_checkout_type: "multi-step", order: { intent: "AUTH", reference_id: "543645yg5tg5675686", description: "sezzle-store - #12749253509255", requires_shipping_info: true, items: [ { name: "widget", sku: "sku123456", quantity: 1, price: { amount_in_cents: 1000, currency: "USD", }, }, ], discounts: [ { name: "20% off", amount: { amount_in_cents: 1000, currency: "USD", }, }, ], metadata: { location_id: "123", store_name: "Downtown Minneapolis", store_manager: "Jane Doe", }, 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("onCancel"); alert("Transaction cancelled."); }, onFailure: function () { console.log("onFailure"); alert("Transaction failed."); }, onCalculateAddressRelatedCosts: async function ( shippingAddress, order_uuid ) { // All this must be done inside your backend endpoint and this should be replaced with your endpoint communication logic // Call authentication endpoint const response = await fetch( `https://sandbox.gateway.sezzle.com/v2/authentication`, { method: "POST", headers: { "Content-Type": "application/json", }, body: JSON.stringify({ private_key: "sz_pr_...", public_key: "sz_pub_..." }), } ); const data = await response.json(); const token = data.token; // Calculate your shipping options based on the provided shippingAddress const shipping_options = [ { name: "Standard Shipping", description: "3-5 business days", shipping_amount_in_cents: 1000, tax_amount_in_cents: 500, final_order_amount_in_cents: 11500 }, { name: "Express Shipping", description: "1-2 business days", shipping_amount_in_cents: 2000, tax_amount_in_cents: 1000, final_order_amount_in_cents: 13000 } ] // Update your checkout with the calculated shipping options const updateResponse = await fetch( `https://sandbox.gateway.sezzle.com/v2/order/{order_uuid}/checkout`, { method: "PATCH", headers: { "Content-Type": "application/json", Authorization: `Bearer ${token}`, }, body: JSON.stringify({ currency_code: "USD", address_uuid: shippingAddress.uuid, shipping_options, }), } ); const updateStatus = updateResponse.ok; return { ok: updateStatus, }; }, });
Example
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Sezzle Express Checkout Test</title>
<script type="text/javascript" src="https://checkout-sdk.sezzle.com/express_checkout.min.js"></script>
</head>
<body>
<h1>Sezzle Test</h1>
<div id="sezzle-smart-button-container" style="text-align: center" templateText="Pay with %%logo%%"
borderType="semi-rounded" customClass="action,primary,checkout"></div>
<script>
console.log("Initializing Sezzle...");
const setupSezzle = async () => {
const checkoutSdk = new Checkout({
publicKey: "sz_pub_...",
apiMode: "sandbox",
apiVersion: "v2",
mode: "popup",
});
console.log("Calling renderSezzleButton()...");
await checkoutSdk.renderSezzleButton("sezzle-smart-button-container");
console.log("Calling checkoutSdk.init()...");
checkoutSdk.init({
onClick: function () {
console.log("onClick");
event.preventDefault();
checkoutSdk.startCheckout({
checkout_payload: {
express_checkout_type: "multi-step",
order: {
intent: "AUTH",
reference_id: "543645yg5tg5675686",
description: "sezzle-store - #12749253509255",
requires_shipping_info: true,
items: [
{
name: "widget",
sku: "sku123456",
quantity: 1,
price: {
amount_in_cents: 1000,
currency: "USD",
},
},
],
discounts: [
{
name: "20% off",
amount: {
amount_in_cents: 1000,
currency: "USD",
},
},
],
metadata: {
location_id: "123",
store_name: "Downtown Minneapolis",
store_manager: "Jane Doe",
},
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("onCancel");
alert("Transaction cancelled.");
},
onFailure: function () {
console.log("onFailure");
alert("Transaction failed.");
},
onCalculateAddressRelatedCosts: async function (
shippingAddress,
order_uuid
) {
// All this must be done inside your backend endpoint and this should be replaced with your endpoint communication logic
// Call authentication endpoint
const response = await fetch(
`https://sandbox.gateway.sezzle.com/v2/authentication`,
{
method: "POST",
headers: {
"Content-Type": "application/json",
},
body: JSON.stringify({
private_key: "sz_pr_...",
public_key: "sz_pub_..."
}),
}
);
const data = await response.json();
const token = data.token;
// Calculate your shipping options based on the provided shippingAddress
const shipping_options = [
{
name: "Standard Shipping",
description: "3-5 business days",
shipping_amount_in_cents: 1000,
tax_amount_in_cents: 500,
final_order_amount_in_cents: 11500
},
{
name: "Express Shipping",
description: "1-2 business days",
shipping_amount_in_cents: 2000,
tax_amount_in_cents: 1000,
final_order_amount_in_cents: 13000
}
]
// Update your checkout with the calculated shipping options
const updateResponse = await fetch(
`https://sandbox.gateway.sezzle.com/v2/order/{order_uuid}/checkout`,
{
method: "PATCH",
headers: {
"Content-Type": "application/json",
Authorization: `Bearer ${token}`,
},
body: JSON.stringify({
currency_code: "USD",
address_uuid: shippingAddress.uuid,
shipping_options,
}),
}
);
const updateStatus = updateResponse.ok;
return {
ok: updateStatus,
};
},
});
};
setupSezzle();
</script>
</body>
</html>