How to Integrate Pay with Crypto Payment Checkout with Lazerpay
Tags: web3, javascript, blockchain, beginners
Published: 2022-10-29 15:09:06

Lazerpay is a blockchain payment system that enables you to seamlessly integrate crypto payments in your apps — or websites. And with the recent surge in web3 adoption, this feels like the right time to offer crypto payment options to your users. Lazerpay makes it ridiculously easy using their API and tools — for example, the Lazerpay checkout script, to integrate a "Pay with Crypto" checkout in your website or apps without writing a single line of blockchain code.

[Demo](https://lazerpay-checkout-demo.kohasummons.repl.co/)

In this article, I will show you how to integrate a pay with crypto checkout in your app and receive crypto payments from your users. You should read on if you have a personal website with a 'sponsor/donate' page or an e-commerce website.

At the end of this tutorial, you will be able to build your own Lazerpay integrated page and accept various Stablecoins (less volatile form of cryptocurrency).  such as:

- USDT
- DAI
- BUSD
- USDC

So without further stalling, let's begin! :)

## Step 1: Creating a Lazerpay Account

Before we go any further, you need to create a Lazerpay account and grab your unique credentials so you can authenticate your request to the API.

So, navigate to [Lazerpay.finance](https://lazerpay.finance) and create your business account.

<!-- Insert: lazer create account-->
![Create your Lazerpay Account](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/xhzs066r3vv5izrk3cw0.png)

## Step 2: Grabbing your Lazerpay Credentials

Once you've successfully created your account, you can now grab your unique keys and use that to authenticate your request to the lazerpay's API.

So login to your account and on the left navigation panel, click on `Settings`. Click `API keys and Webhook` tab. This is where you will find your unique keys.

<!-- Insert: lazer settings/API-keys dashboard-->
![An Image showing the lazerpay dashboard settings page](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ih0jfmxbpdhz87fpctmy.png)

You will notice two categories of API configurations. The Mainnet API configuration and Testnet API configuration. During development, use the Testnet keys to [test lazerpay integration](https://docs.lazerpay.finance/home/payments/test-payments). When you are ready to go to production, that's when you should use the Mainnet keys.

Copy your test `public keys` to your clipboard as you would be needing it later.

<!-- Insert: test keys hightlight -->
![An Image showing the lazerpay dashboard  with the Test Public Keys Highlighted](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/u0agjl5asm1om8jdyxxl.png)

Now that you have your Testnet public keys, toggle the switch at the header of your dashboard to switch to the Testnet (sandbox-ish).

In the live environment, you deal with real crypto assets while the test environment uses Test Tokens which you can [get for free from faucets](https://testnet.binance.org/faucet-smart) to test your integration. 

<!-- Insert: lazer Environment toggle-switch-->
![An image showing the lazerpay dashboard highlighting the environment toggle switch](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/0hlreibkskbnrohwvh5i.png)

## Step 3: Integrating Lazerpay Checkout

Woohoo! you made it here. Here comes the juicy part of the integration, adding the pay with crypto buttons to process payments on your website.

To demonstrate this, I scaffolded a basic [cookie cart app](https://lazerpay-cookie-app.vercel.app) that sells the most delicious cookie you would ever taste. And the coolest part is that you can buy any of the cookies using crypto. Give it a shot, amigo! Okay Okay, We would not build the app in this tutorial but we would look at the core process to build same.

That said if you would love to play around with the cookie cart app code, you can clone the [starter template branch](https://github.com/kohasummons/lazerpay-cookie-app) and try to implement the functionality yourself.

Let's begin the integration.

First, create a `button` element that would trigger the payment

```html
<!-- index.html -->
<button class="btn">Pay with Crypto</button>
```

Then, import the Lazerpay Checkout Script in the head of your `index.html`

```html
<!-- index.html -->
<!-- Include the Lazerpay Checkout CDN Script-->
<script src="https://cdn.jsdelivr.net/gh/LazerPay-Finance/checkout-build@main/checkout%401.0.1/dist/index.min.js" type="text/javascript"></script>
```

Now in your `app.js` file, we can write the code that triggers the lazerpay checkout. We would need a reference to your `button` element like so:

```javascript
 // app.js
const payBtn = document.querySelector(".btn");
```

Then, attach an event listener to the `button` element that calls the `LazerCheckout` function on a `click` event.

```javascript
//app.js 
// Listen for click events on payBtn
payBtn.addEventListener("click", (e) => {
    e.preventDefault();

    // The CDN injects a `LazerCheckout` method
    // then, Invoke the lazerCheckout method
    LazerCheckout({
        name: "",
        email: "",
        amount: "2.00",
        key: "YOUR_PUBLIC_TEST_KEY",
        currency: "USD",
        onClose: (data) => {
          console.log("onClose:", data);
        },
        onSuccess: (data) => {
          console.log("onSuccess:", data);
        },
        onError: (data) => {
          console.log("onError:", data);
        }
      })
})
```

The `LazerCheckout` method accepts an object containing details about the transaction and a number of callback methods. Let's discuss them:

1. `name` - Customer name
2. `email` - Customer email
3. `amount` - Amount to charge the customer
4. `key` - Your lazerpay public key which you copied in earlier sections
5. `currency` - The currency `amount` is denominated in. Can be USD, GBP, EUR, AED or NGN.
6. `onClose` - The function called when the payment modal closes
7. `onSuccess` - The function called when a customer completes a transactions
8. `onError` - The function called when a transaction fails

You can explore more options and other ways to configure the transaction on the [Lazerpay official docs page](https://docs.lazerpay.finance).

Now if we run our website or web app and click the button, we can see the lazerpay checkout was triggered successfully.

<!-- Insert: simple demo -->
![An image that demos the pay with crypto integration](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/la3i7p7havnd242ptrah.gif)

## Step 4: Testing transactions

The next step after successfully integrating the checkout is to test the integration with dummy transactions.

To [test transactions](https://docs.lazerpay.finance/home/payments/test-payments), you would need a non-custodial wallet (like MetaMask) to make test payments. There are various tutorials on the internet to learn [how to setup MetaMask](https://docs.polygon.technology/docs/develop/metamask/hello).

Then you also need a few test tokens. Currently, you can only test using the Tether token(USDT). So [grab some USDT from the faucets](https://testnet.binance.org/faucet-smart). 

Here's a clip of how I got some USDT from the [binance faucet](https://testnet.binance.org/faucet-smart).

<!-- Insert: Clip showing faucet use -->
![An image showing how to get USDT tokens from the bsc faucet](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/pzy5vrpeerv61vlyhcde.gif)

Now that you have some test tokens in your wallet, you can use that to initiate a payment transaction. 

Here's a clip of how I tested my integration.

<!-- Insert: Clip showing payment test -->
![An Image showing a test payment with Lazerpay Checkout](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/utbdsz4wfeap6zrqqn0f.gif)



As seen above, the transaction has been completed successfully. You can verify that the amount has been received by logging into your [Lazerpay Dashboard](https://dashboard.lazerpay.finance/login).

> Note: When a payment is successful, Lazerpay sends a DEPOSIT_TRANSACTION webhook event to the webhook URL that you provide. It is highly recommended that you use webhooks to confirm the payment status before delivering value to your customers.

Click on `Overview` on the left navigation panel, you should see the transaction.

<!-- Insert: Clip showing transactions -->
![An Image showing my transactions on lazerpay dashboard](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/bt7blliqmnqq7l706ean.gif)

## Step 5: Go Live

Once we are satisfied with the testing, we can go live.

To go live, go to your [dashboard](https://dashboard.lazerpay.finance/login). Toggle the switch to the main environment.

<!-- Insert: Toggle to live -->
![An image showing the Lazerpay dashboard highlighting the environment toggle switch](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/7q05p781lh5m0e0pqyfr.png)

Now, Under **Settings**, select the API and Webhooks tab. Copy your public main net keys.

<!-- Insert: Settings -> API -->

![An image showing lazerpay mainnet keys on the dashboard](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/kix302s9rxgs8jxhbeuy.png)

Finally, copy the live/mainnet keys and replace the `key` option in the object passed to the `LazerCheckout` function.

```javascript
payBtn.addEventListener("click", (e) => {
    LazerCheckout({
        ...
        key: "YOUR_PUBLIC_LIVE_KEY",
        ...     
})
```

And there you go! You are now ready to process real crypto transactions on your website!

> Never ever expose your secret keys. Do not commit your secret keys to Git, or use them in client-side code. 

### How to verify if you went live successfully?

A quick way to tell is to click the pay button and check the pop up.

**Testnet**
![An image showing lazerpay modal when testing](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/n6yi38sjs68c5ganxtdk.png)

**Mainnet/Live**
![An image showing Lazerpay modal when live](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/06xa1cscadlx9vaxye1n.png)

You also get more Stablecoins options when you go live.

[Cookie Cart Demo](https://lazerpay-cookie-app.vercel.app/)

[Code](https://github.com/kohasummons/lazerpay-cookie-app)

## Conclusion

Offering an option to receive payment in crypto unlocks a new set of superpowers for users of your website or web app. And daily as more people get onboarded to web3, getting paid in crypto would open up your app to tons of new demographics globally. In this article, we explored how to integrate a pay with crypto functionality using the Lazerpay Checkout tool in your website.

I hope you have found this article helpful in powering up your websites for a payment system that accepts crypto. Thanks for reading! Please share if it is helpful in any way! Cheers!

I'd love to connect with you via [Twitter](https://twitter.com/kohawithstuff) | [GitHub](https://github.com/kohasummons)