> ## 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.
# 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 checkouts and capture payments with Sezzle.
Checkout in an iframe, pop-up window, or redirect to Sezzle.
Handle payment success, failure, or cancel with your Sezzle orders.
Render the Sezzle checkout button on your store.
## Include SDK code
Include the following script in the `` section of the page.
```html theme={"system"}
```
## Checkout Configuration
The first requirement to get started with the direct JavaScript SDK is to configure a new Checkout object.
### Configuration Options
```javascript theme={"system"}
const checkoutSdk = new Checkout({
mode: string,
publicKey: string,
apiMode: string,
apiVersion: string,
});
```
```javascript theme={"system"}
const checkoutSdk = new Checkout({
mode: "popup",
publicKey: "sz_pub_...",
apiMode: "sandbox",
apiVersion: "v2",
});
```
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** mode will work out-of-the-box, and Sezzle recommends it for most browser-based SDK integrations.
If your checkout runs inside a webview or embedded browser where popups may be blocked, use **iframe** mode instead. **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*](http://www.mysite.com).
**redirect** mode is also supported, but it is generally a better fit for manual integrations because the SDK's main value is handling the in-context checkout experience and window messaging between your site and Sezzle.
Used when creating a checkout or capturing payment. Find your API keys at [https://dashboard.sezzle.com/merchant/settings/apikeys](https://dashboard.sezzle.com/merchant/settings/apikeys)
Environment in which the checkout is to be completed
Available options: `live`, `sandbox`
Sezzle Checkout SDK Version
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](https://sezzle.com/brand-assets/) for Approved Messaging and Sezzle logo acceptable use.
### Sezzle in Payment Methods Table
Below is an example of Sezzle as a payment method radio.
*This example snippet is for informational use only. Please follow the established HTML format of your existing payment methods.*
```html theme={"system"}
```
### 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.
Sezzle as a button alongside other APMs
Sezzle as a Submit button as alternative to default button
```html theme={"system"}
```
```html theme={"system"}
```
Text to appear inside the button. Use `%%logo%%` inside the text to display the Sezzle image
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`
Available options: `square`, `semi-rounded`
Custom classes to be applied
Negative space between top of content and edge of button
Negative space between bottom of content and edge of button
Negative space between left side of content and edge of button
Negative space between right side of content and edge of button
Width of the Sezzle logo within the button
Position of the Sezzle logo from top.
Position of the Sezzle logo from bottom.
Position of the Sezzle logo from left.
Position of the Sezzle logo from right.
Spacing between the templateText letter.
Width of the button
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.
```javascript theme={"system"}
checkoutSdk.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.
```javascript theme={"system"}
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.");
},
});
```
```javascript expandable theme={"system"}
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.");
},
});
```
Sezzle Button is clicked by the user.
See [Checkout Initialization](#checkout-initialization) section for payload options.
Sezzle payment is successfully completed. 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.
Sezzle payment is cancelled. If the user exits the Sezzle checkout for any reason, the `onCancel` handler will be executed.
Sezzle payment has failed. If there is an error loading the Sezzle checkout page, the `onFailure` handler will be executed.
### Checkout Initialization
```javascript theme={"system"}
checkoutSdk.startCheckout({
checkout_payload: {
order: {
intent: string,
reference_id: string,
description: string,
order_amount: {
amount_in_cents: integer,
currency: string,
},
},
},
});
```
```javascript theme={"system"}
checkoutSdk.startCheckout({
checkout_payload: {
order: {
intent: "AUTH",
reference_id: "543645yg5tg5675686",
description: "sezzle-store - #12749253509255",
order_amount: {
amount_in_cents: 10000,
currency: "USD",
},
},
},
});
```
The order for this session
If your checkout flow requires the user to confirm their checkout on your site after being approved by Sezzle, use “AUTH” as your intent. If you prefer the checkout be captured immediately, use “CAPTURE”.
Available options: `AUTH`, `CAPTURE`
Your reference ID for this order (must contain only alphanumeric characters, dashes (-), and underscores (\_))
Your description for this order
The total amount of the order
The amount of the item in cents
The 3 character currency code as defined by ISO 4217
Alternatively, start checkout by URL:
```javascript theme={"system"}
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` and `popup` mode.
**Use an existing checkout URL**
* The `mode` used when configuring the SDK checkout must match the `checkout_mode` when [creating a session](/docs/api/core/sessions/postv2session).
* 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](/docs/api/core/webhooks/postv2webhooks#valid-webhook-events) event.
### Checkout completed by Payload
```javascript theme={"system"}
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
```javascript theme={"system"}
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.
```javascript theme={"system"}
var payload = {
capture_amount: {
amount_in_cents: integer,
currency: string,
},
};
checkout.capturePayment(data.order_uuid, payload);
```
```javascript theme={"system"}
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](/docs/api/core/orders/postv2capturebyorder).
The amount to capture on this order
The amount in cents
The 3 character currency code as defined by ISO 4217
## Installment Plan
```javascript theme={"system"}
const checkout = new Checkout({});
checkout.getInstallmentPlan(1000);
```
```json theme={"system"}
{
"schedule": string,
"totalInCents": integer,
"installments": [
{
"installment": integer,
"amountInCents": integer,
"dueDate": string
}
]
}
```
```json theme={"system"}
{
"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"
}
]
}
```
Payment cadence for installment plan
Total order amount in cents
Breakdown of each payment due
Number of installment in series
Installment amount in cents
Due date of the installment
This function will provide the installment details based on an amount in cents. An existing [checkout](#checkout-initialization) can be used, or a `checkout` without any configuration can also be used to quickly get installment details.