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 URLNextVerify checkout transaction

Last updated