Using Virtual Card SDK

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.

caution

The Sezzle non-production environment does not provide a way to test the payment processing using your provider

Features

Virtual Card Checkout in an iframe or pop-up window
Handle Virtual Card Approval Success
Handle Virtual Card Approval Cancel
Handle Virtual Card Approval Failure
Render Sezzle Button
Enable plain card details through message event or tokenization

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 VC SDK is to configure a new Checkout object.

Configuration options

Attribute	Required	Options
publicKey	Yes	`xxxx` (used only when creating a checkout)
mode	No	`popup` or `iframe`
apiMode	No	`live` or `sandbox`
isVirtualCard	No	`true`

info

popup mode will work out-of-the-box (provided Sezzle has set up your merchant account as virtual card). 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",
    'isVirtualCard': true
});

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

Now the button has rendered to the screen we need to set the click handling to connect your ecommerce application to Sezzle. Initializing the checkout will do that and provide all the handlers needed to make your site successful.

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 Virtual Card is successfully approved
onCancel	Yes	Sezzle Virtual Card approval process is cancelled
onFailure	Yes	Sezzle Virtual Card is not approved

Event handler details

A successfully completed Sezzle checkout will trigger an event to the onComplete handler. The event should include a data object with the session_id and objects with card and holder details.
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.

Example

checkout.init({
    onClick: function () {
        event.preventDefault();
        checkout.startCheckout({
            checkout_payload: {
                amount_in_cents: 100,
                currency: "USD",
                merchant_reference_id: "merchant-checkout-id-max-255",
                customer: {
                    email: "test@test.com",
                    first_name: "John",
                    last_name: "Doe",
                    phone: "0987654321",
                    billing_address_street1: "3432 Terry Lane",
                    billing_address_street2: "12",
                    billing_address_city: "Katy",
                    billing_address_state: "TX",
                    billing_address_postal_code: "77449",
                    billing_address_country_code: "US"
                  },
                items: [
                  {
                    name: "Blue tee",
                    sku: "sku123456",
                    quantity: 1,
                    price: {
                      amount_in_cents: 1000,
                      currency: "USD"
                    }
                  }
                ]
            }
        });
    },
    onComplete: function (event) {
        console.log(event.data)
    },
    onCancel: function() {
        console.log("checkout canceled");
    },
    onFailure: function() {
        console.log("checkout failed");
    }
})

info

checkout_payload is optional but providing as much information as possible will improve customer experience. If used the request body should be a session object.

caution

merchant_reference_id in the payload above is used only for troubleshooting. The Reference ID that shows in the Merchant Dashboard can be set using Set Order Reference ID

`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

{
    "session_id": "example-sezzle-id",
    "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

{
    "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

checkout.setOrderReferenceID({
    session_id: "example-session-id",
    order_id: "merchant-order-id"
});

Using API

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

Features​

Include SDK code​

Checkout Configuration​

Configuration options​

Example configuration​

Sezzle Button Configuration​

Example Setup​

Render the Sezzle Button​

Initialize the checkout​

Event handlers​

Event handler details​

Example​

onComplete with card data​

event.data response​

onComplete with tokenization​

Checkout initialization​

event.data response​

Get card data​

Set Order Reference ID​

Using SDK​

Using API​

Features

Include SDK code

Checkout Configuration

Configuration options

Example configuration

Sezzle Button Configuration

Example Setup

Render the Sezzle Button

Initialize the checkout

Event handlers

Event handler details

Example

`onComplete` with card data

`event.data` response

`onComplete` with tokenization

Checkout initialization

`event.data` response

Get card data

Set Order Reference ID

Using SDK

Using API