Passer au contenu principal
L’option Express Checkout est uniquement disponible pour l’intégration directe et WooCommerce marchands.

​
Installation

  1. Importer la bibliothèque
    • Copiez ce script dans le <head> de votre code de site 
      <script type="text/javascript" src="https://checkout-sdk.sezzle.com/express_checkout.min.js"></script>
  2. Configurer le SDK 
    const checkoutSdk = new Checkout({
    mode: "popup",
+   publicKey: `${yourSezzleAPIKey}`,
    apiMode: "live",
    apiVersion: "v2",
});
  3. Installer le bouton
    • Copiez cet élément d’emplacement à l’endroit où vous souhaitez que le bouton s’affiche sur la page
    • Voir ici pour les options de personnalisation 
      <div id="sezzle-smart-button-container" style="text-align: center"></div>
    • Charger le bouton en utilisant Javascript 
      await checkoutSdk.renderSezzleButton("sezzle-smart-button-container");
  4. Configurer les écouteurs d’événements 
    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) {
        console.log("onComplete");
        alert("Completed transaction");
    },
    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,
        };
    },
});

​
Exemple

<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",
                            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) {
                    console.log("onComplete");
                    alert("Completed transaction");
                },
                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>