Skip to main content
This is the fastest way to get started using the virtual card offering from Sezzle. A virtual card checkout implements the Card Session API to provide an easy to use, in-context solution for issuing and using a Sezzle virtual card as payment.
The Sezzle non-production environment does not provide a way to test the payment processing using your provider.
The origin domain needs to be allowlisted by Sezzle for Virtual Card SDK to function. Please contact your Account Manager and they can do this for you.

Checkouts

Virtual Card Checkout in an iframe or pop-up window.

Card Details

Enable plain card details through message event or tokenization.

Payments

Handle payment success, failure, or cancel with your virtual card orders.

Sezzle Button

Render the Sezzle checkout button on your store.

​
Include SDK code

Include the following script in the <head> section of the page. 
<script
    type="text/javascript"
    src="https://checkout-sdk.sezzle.com/checkout.min.js"
></script>

​
Checkout Configuration

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

​
Configuration Options

  • Template
  • Example
  • Options
const checkoutSdk = new Checkout({
  mode: string,
  publicKey: string,
  apiMode: string,
  isVirtualCard: boolean,
});

​
Sezzle Button

​
Sezzle Button Configuration

Create a placeholder element for the Sezzle Button to be rendered on the page(s).
  • Template
  • Example
  • Options
<div id="sezzle-smart-button-container" style="text-align: center"></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. 
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.
  • Template
  • Example
  • Options
checkoutSdk.init({
  onClick: function () {
    event.preventDefault();
    checkoutSdk.startCheckout({...});
  },
  onComplete: function (event) {
    console.log(event.data);
  },
  onCancel: function () {
    console.log("Checkout cancelled.");
  },
  onFailure: function () {
    console.log("Checkout failed.");
  },
});

​
Checkout Initialization

  • Template
  • Example
  • Options
checkoutSdk.startCheckout({
  checkout_payload: {
    amount_in_cents: integer,
    currency: string,
    merchant_reference_id: string,
    customer: {
        email: string,
        first_name: string,
        last_name: string,
        phone: string,
        billing_address_street1: string,
        billing_address_street2: string,
        billing_address_city: string,
        billing_address_state: string,
        billing_address_postal_code: string,
        billing_address_country_code: string,
    },
    items: [
        {
            name: string,
            sku: string,
            quantity: integer,
            price: {
                amount_in_cents: integer,
                currency: string,
            },
        },
    ],
  },
});

​
onComplete with card data

The event.data will contain a fully formed payload containing the customers payment method. This information is not the payment method used to pay Sezzle but one that can be used through your payment gateway (Cybersource, Stripe, Braintree, etc).

​
event.data response

  • Template
  • Example
  • Options
{
    "session_id": string,
    "card": {
        "firstName": string,
        "lastName": string,
        "pan": string,
        "cvv": string,
        "expiryMonth": string,
        "expiryYear": string
    },
    "holder": {
        "email": string,
        "phone": string,
        "firstName": string,
        "lastName": string,
        "address1": string,
        "address2": string,
        "city": string,
        "state": string,
        "country": string,
        "postalCode": string
    }
}

​
onComplete with tokenization

Tokenization is a feature developed for merchants who do not want the card information sent directly through the message event. Instead the payload to onComplete will contain a card token string.

​
Checkout initialization

checkout.init({
    onClick: function () {
        event.preventDefault();
        checkout.startCheckout({
            checkout_payload: {
                ...
+               "card_response_format":"token"
            }
        });
    },
    onComplete: function (event) {
        console.log(event.data)
    },
    onCancel: function() {
        console.log("checkout canceled");
    },
    onFailure: function() {
        console.log("checkout failed");
    }
})

​
event.data response

  • Template
  • Example
  • Options
{
    "card": {
        "token": string
    }
}

​
Get card data

The virtual card data can be obtained using the token above using the Virtual Card Data method.

​
Set Order Reference ID

In many cases, the merchant order ID will not be generated until after the checkout is completed and an order is created. Call setOrderReferenceID to set the Sezzle Order Reference ID with the merchant order ID after the virtual card transaction has been successfully completed.

​
Using SDK

  • Template
  • Example
  • Options
checkoutSdk.setOrderReferenceID({
    session_id: string,
    order_id: string,
});

​
Using API

The Update Card Session API endpoint exists where you are able to update the Order ID based.