Pricing
Login
Get started

Integrating Thepeer’s Checkout in Vanilla JavaScript

Learn how to integrate Thepeer's Checkout in your vanilla JavaScript web application.

    Azeez Azeez's imageIdorenyin Udoh's image
Azeez Azeez, Idorenyin Udoh
Feb 13, 2023
Cover image for Integrating Thepeer’s Checkout in Vanilla JavaScript article

Thepeer provides technological infrastructure via SDKs and libraries for businesses to easily integrate and support fast, direct, & efficient transactions.

Thepeer also enables developers to integrate into applications running on libraries that have no SDKs e.g, applications running on vanilla JavaScript.

In this article, you will learn how to integrate Thepeer checkout into your vanilla JavaScript web application.

Prerequisites

The following are required to follow this article:

Building our shopping cart

Create an index.html file:

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Thepeer's shopping cart</title>

    <!-- Styles -->
    <!-- CSS only -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.2/dist/css/bootstrap.min.css" rel="stylesheet"
          integrity="sha384-Zenh87qX5JnK2Jl0vWa8Ck2rdkQ2Bzep5IDxbcnCeuOxjzrPF/et3URy9Bv1WTRi" crossorigin="anonymous">    
</head>

<body>
<div class="container container-fluid">
    <!-- cart -->
    <h1>Shopping Cart</h1>
    <hr/>
    <div class="card" style="width: 25rem;">
            <img src="https://shopping-cart-nine-green.vercel.app/images/iphone.jpeg" alt="item-image"
                 class="card-img-top"/>
            <div class="card-body">
                <h5 class="card-title">iPhone 13 Pro screen guard</h5>
                <p class="card-text">The best screen guard for your iPhone 13 pro.</p>
            </div>
    </div>
</div>

Next, open the HTML file in a browser:

Shopping cart

In the cart above, there’s no checkout button. Let’s integrate a checkout button powered by Thepeer.

Building the checkout button

Start by referencing Thepeer’s CDN in the <head> element of your HTML file.

<head>
...
	<script type="application/javascript" src="<https://cdn.thepeer.co/v1/chain.js>"></script>
...
</head>

Thepeer’s checkout class lives in the script referenced above. The first step to building the checkout button is to create an instance of the Checkout class from the SDK.

The Checkout class takes four parameters:

  • publicKey: This key is retrieved from your dashboard and serves as an identifier for your business.
  • email: Your customer’s email
  • amount: The amount to be paid by the customer from their account on any business available on Thepeer.
  • meta: This is an optional parameter containing additional/optional attributes you would like to have on your transaction response.

The Checkout class also takes three event listener methods:

  • onSuccess: In this method, we define actions to a successful checkout operation.
  • onError: In this method, we define actions to a failed checkout operation.
  • onClose: In this method, we define actions when the checkout portal is closed.

Now that we have an idea of what the Checkout class is, let’s build the checkout button on our shopping cart page.

Add the following code for the checkout menu in the card div:

<div class="card-footer">
                ₦<span id="item-price">5000</span><hr />
                    <input type="email" name="email" id="email" placeholder="happycustomer@thepeer.co"
                           class="form-control">
                    <hr/>
                    <button class="btn btn-primary" onclick="checkout()">Checkout with Thepeer</button>
            </div>

With everything in place, our shopping cart should look like this:

Shopping cart with Thepeer checkout button present

Add the following code below the <style> import in the <head>:

<script type="text/javascript">
function checkout() {
  let itemPrice = parseInt(document.getElementById("item-price").innerText) * 100;
  let email = document.getElementById("email").value

  let checkout = new ThePeer.checkout({
      publicKey: {{YOUR_PUBLIC_KEY}},
      amount: itemPrice,
      email: email,
      currency: "NGN",
      onSuccess: function (response) {
          window.location = "https://thepeer.co";
      },
      onClose: function () {
          console.log("user closed the widget.");
      },
      onError: function (error) {
          console.log(error);
      }
  });

  checkout.setup();
  checkout.open();
}
</script>

In the snippet above, we initialized the Checkout SDK with the amount and email retrieved from the page.

The amount is multiplied by 100 because money is handled in the smallest unit possible at Thepeer. For example, 5000Naira multiplied by 100 would be 500000 Kobo.

We have also instructed the checkout instance to redirect to Thepeer’s homepage after a successful payment.

Clicking on the Checkout with Thepeer button brings up the checkout modal:

Shopping cart with Thepeer Checkout modal present

Let’s pay for the item using the Cash App option. Find the payment credentials on Thepeer’s SDK page.

A successful payment has been made and the modal shows up the success section:

Thepeer modal showing successful transaction

The page redirects as defined:

Thepeer homepage

Conclusion

In this article, we were introduced to Thepeer’s Checkout SDK and learned how to integrate it in a vanilla JavaScript application through practical steps.

You can also play with the demo in the Pen below:

Pen showing demo
;