# Checkout SDK

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&#x20;

#### 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.&#x20;

## Usage

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

#### For Pay With Transfer

```html
<!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

```markup
<!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>
```

{% hint style="info" %} <mark style="color:blue;">The</mark> <mark style="color:blue;"></mark><mark style="color:blue;">`checkout_info`</mark> <mark style="color:blue;"></mark><mark style="color:blue;">includes the customer’s information and the items in the cart</mark>
{% endhint %}
