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.
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.
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.
Include Checkout JS and CSS files in your HTML like so:
<!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-stag.s3.eu-west-1.amazonaws.com/dp-checkout-assets/dist/checkout-dp.css"
/>
</head>
<body>
<script src="https://public-files-duplo-stag.s3.eu-west-1.amazonaws.com/dp-checkout-assets/dist/duploCheckout.js"></script>
<script>
window.addEventListener("DOMContentLoaded", function () {
const queryString = window.location.search;
const urlParams = new URLSearchParams(queryString);
const ref = urlParams.get("reference");
var options = {
stepToDisplay: "welcome",
redirectOption: true,
// checkout_reference: "509ccc4fa7ac64bd4904ba518cfd2b99:rn054c2e2327112a3755fd3dede8c4f1ff2986c692e36b0801bb6f079bd238c04ea39b417326834064bf770bf2c82d143e7de633f6dc78e73d6dcd44f132664b6a949b333f2f88d47e0e9c1e73faeffe620e0e1f17b5ed8679c9c4f9a26ac74f7932312f2aacd1bd6432e01853f9f7740d52ca6af5509baaeaed10acab5bcdad6050c5ae223b13512169bc6bcbd7561dfdd349a6d40f1e012a1a1f32128713ea6ff2cb510748b821ca749ed7c919584b0945b2b22238d96c5cabbef082ade7171ce9eafcbb95b12b2c29d0c41acf958d9f041b632ff540bd33fc1bfbc4b76f08d8",
checkout_info: {
business_id: "a3f402fe-c6cb-475a-bc46-281b0c405850",
customer_firstname: "Test",
customer_lastname: "user",
customer_email: "[email protected]",
customer_phone_number: "07083520029",
amount: "10000",
fee_bearer: "customer",
preferred_payment_methods: ["bnpl"], //for bnpl only option use ['bnpl'], for pay with transfer option use ['pay-with-transfer']
line_items: [
{
name: "Bottle water",
unit_price: 10,
quantity: 2
}
],
shipping_fee: 10,
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 cartLast modified 12d ago