# 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 %}


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://developers.tryduplo.com/duplo-api-documentation/payment-apis/duplo-checkout/checkout-sdk.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.
