> ## Documentation Index
> Fetch the complete documentation index at: https://docs.sezzle.com/llms.txt
> Use this file to discover all available pages before exploring further.
# Quick Guide
Express Checkout option is only available for direct integration and [WooCommerce](/docs/plugins/woocommerce) merchants.
## Installation
1. Import Library
* Copy this script to the `` of your site code
```html theme={"system"}
```
2. Configure SDK
* Configure [Express Checkout](./express-checkout#configuration-options)
```diff theme={"system"}
const checkoutSdk = new Checkout({
mode: "popup",
+ publicKey: `${yourSezzleAPIKey}`,
apiMode: "live",
apiVersion: "v2",
});
```
3. Install Button
* Copy this placeholder element to where you wish the button to render on the page
* [See here for customization options](./express-checkout#sezzle-button-configuration)
```html theme={"system"}
```
* Load the button using Javascript
```javascript theme={"system"}
await checkoutSdk.renderSezzleButton("sezzle-smart-button-container");
```
4. Configure the [event listeners](./express-checkout#configuration-options)
```diff expandable theme={"system"}
checkoutSdk.init({
onClick: function () {
console.log("onClick");
event.preventDefault();
checkoutSdk.startCheckout({
checkout_payload: {
express_checkout_type: "multi-step",
is_express_checkout: true,
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 theme={"system"}
Sezzle Express Checkout Test
Sezzle Test
```