Checkout SDK

Checkout SDK enables users to checkout on a third-party platform with a bank transfer and BNPL(buy now and pay later) option.

Checkout SDK enables users to checkout on a third-party platform with a pay with transfer and buy now and pay later option.

Checkout SDK is the client-facing project of Checkout SDK, written in Javascript It enables products to do more with payments in general.

Steps

For Pay with Transfer

The checkout experience for a user on Duplo’s checkout SDK involves the following stages:

Payment method option bank transfer (pay-with-transfer)
When a user clicks bank transfer a bank details page that shows the account number payment should be made to is displayed and an “I've made payment“ button that takes the user to a verification page.
The transaction is confirmed on the verification page.
A success or error page is displayed depending on the outcome of the verification.

For BNPL

The checkout experience for a user on Duplo’s checkout SDK involves the following stages:

Payment method option buy now pay later (bnpl)
When a user clicks Buy Now Pay Later the user will be redirected to the loan details page to confirm the loan details (the payment date, amount, interest rate, and amount payable)
If the user confirms the loan agreement, a success page is displayed, and the user is redirected to your website
If the user does not confirm the loan agreement, an error page is displayed.

Usage

Include Checkout JS and CSS files in your HTML like so:

For Pay With Transfer

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>Duplo Checkout</title>
    <link
      rel="stylesheet"
      href="https://public-files-duplo-prod.s3.eu-west-1.amazonaws.com/dp-checkout-assets/dist/checkout-dp.css"
    />
  </head>

  <body>
  <script src="https://public-files-duplo-prod.s3.eu-west-1.amazonaws.com/dp-checkout-assets/dist/duploCheckout.js"></script>
    <script>
     window.addEventListener("DOMContentLoaded", function () {
         var options = {
          stepToDisplay: "welcome",
          redirectOption: true,
          callback_url: "https://google.com",
          cancel_url: "https://facebook.com",
          checkout_info: {
            business_id: "98d34111-69dc-4683-9bbe-2e6921gd155c",
            customer_firstname: "Test",
            customer_lastname: "User",
            customer_email: "testuser@yopmail.com",
            customer_phone_number: "07211155866",
            amount: "10000",
            fee_bearer: "customer",
            preferred_payment_methods: ["pay-with-transfer"],
            line_items: [
              {
                name: "Stock fish",
                unit_price: 50,
                quantity: 1,
              },
            ],
            shipping_fee: 0,
            discount: {
              type: "percentage",
              value: 10,
            },
            tax: {
              type: "percentage",
              value: 20,
              description: "VAT",
            },
            for_checkout: true,
            checkout_type: "pay-with-transfer",
          },
        };


        new DuploCheckout(
          options,
          (onSuccess = function (response) {
            console.log(response);
          }),
          (onError = function (response) {
            console.log(response);
          }),
          (onClose = function (response) {
            console.log("close");
          })
        );
      });
    </script>
  </body>
</html>

For BNPL

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>Duplo Checkout</title>
    <link
      rel="stylesheet"
      href="https://public-files-duplo-prod.s3.eu-west-1.amazonaws.com/dp-checkout-assets/dist/checkout-dp.css"
    />
  </head>

  <body>
  <script src="https://public-files-duplo-prod.s3.eu-west-1.amazonaws.com/dp-checkout-assets/dist/duploCheckout.js"></script>
    <script>
     window.addEventListener("DOMContentLoaded", function () {
         var options = {
          stepToDisplay: "welcome",
          redirectOption: true,
          callback_url: "https://google.com",
          cancel_url: "https://facebook.com",
          checkout_info: {
            business_id: "98d34111-69dc-4683-9bbe-2e6921gd155c",
            customer_firstname: "Test",
            customer_lastname: "User",
            customer_email: "testuser@yopmail.com",
            customer_phone_number: "07211155866",
            amount: "10000",
            fee_bearer: "customer",
            preferred_payment_methods: ["bnpl"],
            line_items: [
              {
                name: "Stock fish",
                unit_price: 50,
                quantity: 1,
              },
            ],
            shipping_fee: 0,
            discount: {
              type: "percentage",
              value: 10,
            },
            tax: {
              type: "percentage",
              value: 20,
              description: "VAT",
            },
            for_checkout: true,
            checkout_type: "bnpl",
          },
        };


        new DuploCheckout(
          options,
          (onSuccess = function (response) {
            console.log(response);
          }),
          (onError = function (response) {
            console.log(response);
          }),
          (onClose = function (response) {
            console.log("close");
          })
        );
      });
    </script>
  </body>
</html>

The checkout_info includes the customer’s information and the items in the cart

PreviousGenerate a checkout URL NextVerify checkout transaction

Last updated 1 year ago

Was this helpful?

Steps

For Pay with Transfer

The checkout experience for a user on Duplo’s checkout SDK involves the following stages:

Payment method option bank transfer (pay-with-transfer)

When a user clicks bank transfer a bank details page that shows the account number payment should be made to is displayed and an “I've made payment“ button that takes the user to a verification page.

The transaction is confirmed on the verification page.

A success or error page is displayed depending on the outcome of the verification.

For BNPL

The checkout experience for a user on Duplo’s checkout SDK involves the following stages:

Payment method option buy now pay later (bnpl)

When a user clicks Buy Now Pay Later the user will be redirected to the loan details page to confirm the loan details (the payment date, amount, interest rate, and amount payable)

If the user confirms the loan agreement, a success page is displayed, and the user is redirected to your website

If the user does not confirm the loan agreement, an error page is displayed.

Usage

Include Checkout JS and CSS files in your HTML like so:

For Pay With Transfer

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>Duplo Checkout</title>
    <link
      rel="stylesheet"
      href="https://public-files-duplo-prod.s3.eu-west-1.amazonaws.com/dp-checkout-assets/dist/checkout-dp.css"
    />
  </head>

  <body>
  <script src="https://public-files-duplo-prod.s3.eu-west-1.amazonaws.com/dp-checkout-assets/dist/duploCheckout.js"></script>
    <script>
     window.addEventListener("DOMContentLoaded", function () {
         var options = {
          stepToDisplay: "welcome",
          redirectOption: true,
          callback_url: "https://google.com",
          cancel_url: "https://facebook.com",
          checkout_info: {
            business_id: "98d34111-69dc-4683-9bbe-2e6921gd155c",
            customer_firstname: "Test",
            customer_lastname: "User",
            customer_email: "testuser@yopmail.com",
            customer_phone_number: "07211155866",
            amount: "10000",
            fee_bearer: "customer",
            preferred_payment_methods: ["pay-with-transfer"],
            line_items: [
              {
                name: "Stock fish",
                unit_price: 50,
                quantity: 1,
              },
            ],
            shipping_fee: 0,
            discount: {
              type: "percentage",
              value: 10,
            },
            tax: {
              type: "percentage",
              value: 20,
              description: "VAT",
            },
            for_checkout: true,
            checkout_type: "pay-with-transfer",
          },
        };


        new DuploCheckout(
          options,
          (onSuccess = function (response) {
            console.log(response);
          }),
          (onError = function (response) {
            console.log(response);
          }),
          (onClose = function (response) {
            console.log("close");
          })
        );
      });
    </script>
  </body>
</html>

For BNPL

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>Duplo Checkout</title>
    <link
      rel="stylesheet"
      href="https://public-files-duplo-prod.s3.eu-west-1.amazonaws.com/dp-checkout-assets/dist/checkout-dp.css"
    />
  </head>

  <body>
  <script src="https://public-files-duplo-prod.s3.eu-west-1.amazonaws.com/dp-checkout-assets/dist/duploCheckout.js"></script>
    <script>
     window.addEventListener("DOMContentLoaded", function () {
         var options = {
          stepToDisplay: "welcome",
          redirectOption: true,
          callback_url: "https://google.com",
          cancel_url: "https://facebook.com",
          checkout_info: {
            business_id: "98d34111-69dc-4683-9bbe-2e6921gd155c",
            customer_firstname: "Test",
            customer_lastname: "User",
            customer_email: "testuser@yopmail.com",
            customer_phone_number: "07211155866",
            amount: "10000",
            fee_bearer: "customer",
            preferred_payment_methods: ["bnpl"],
            line_items: [
              {
                name: "Stock fish",
                unit_price: 50,
                quantity: 1,
              },
            ],
            shipping_fee: 0,
            discount: {
              type: "percentage",
              value: 10,
            },
            tax: {
              type: "percentage",
              value: 20,
              description: "VAT",
            },
            for_checkout: true,
            checkout_type: "bnpl",
          },
        };


        new DuploCheckout(
          options,
          (onSuccess = function (response) {
            console.log(response);
          }),
          (onError = function (response) {
            console.log(response);
          }),
          (onClose = function (response) {
            console.log("close");
          })
        );
      });
    </script>
  </body>
</html>

The checkout_info includes the customer’s information and the items in the cart