payment-webhook

components/TestPayments/index.tsx

@@ -16,8 +16,8 @@ const TestPayments = () => {
 
             <ul className=' space-y-5 mb-6'>
                 <li> <code> 1 </code> Go to the Binance testnet faucet.  </li>
-                <li> <code> 2 </code> Input your BEP20 address..  </li>
-                <li> <code> 3 </code> Click on peggy Tokens and select USDT..  </li>
+                <li> <code> 2 </code> Navigate to the <strong> API Keys and Webhooks tab.</strong>.  </li>
+                <li> <code> 3 </code> Specify your webhook url and click on  <strong>Update.</strong> </li>
             </ul>
 
             <div className='grid md:grid-cols-2 md:space-y-0 space-y-12 sticky'>

components/Webhooks/index.tsx

@@ -0,0 +1,28 @@
+import Alert from 'components/UI/alert'
+import LazerpayDashboard from 'public/icons/Lazerpay-dashboard'
+import React from 'react'
+
+const Webhooks = () => {
+
+    return (
+        <>
+
+
+
+            <ul className=' space-y-5 mb-6'>
+                <li> <code> 1 </code> Login to your dashboard and click on Settings.  </li>
+                <li> <code> 2 </code> Input your BEP20 address..  </li>
+                <li> <code> 3 </code> Click on peggy Tokens and select USDT..  </li>
+            </ul>
+
+            <div className='grid md:grid-cols-2 md:space-y-0 space-y-12 sticky'>
+                <div className='col-span-1'>
+                    <LazerpayDashboard />
+                </div>
+
+            </div>
+        </>
+    )
+}
+
+export default Webhooks

components/index.ts

@@ -24,6 +24,7 @@ import LzInput from './UI/input'
 import TestPayments from './TestPayments'
 import Ecommerce from './UseCases'
 import LzTable from './UI/table'
+import Webhooks from './Webhooks'
 
 export {
   LzTable,
@@ -48,5 +49,6 @@ export {
   TestPayments,
   LinkedCard,
   PlainCard,
-  Ecommerce
+  Ecommerce,
+  Webhooks
 }

components/mdx-components.tsx

@@ -20,6 +20,7 @@ import BankPayouts from './BankPayouts'
 import TestPayments from './TestPayments'
 import Ecommerce from './UseCases'
 import LzTable from './UI/table'
+import Webhooks from './Webhooks'
 
 /** Create a map of the HTML elements */
 export const components: Record<string, FC<Record<string, any>>> = {
@@ -82,6 +83,10 @@ export const components: Record<string, FC<Record<string, any>>> = {
     return <Ecommerce />
   },
 
+  Webhooks() {
+    return <Webhooks />
+  },
+
   /** Below this line contains all reusable UI components */
   LzTable({ head, body }) {
     return <LzTable body={body} head={head} />

content/docs/payments/webhooks.mdx

@@ -0,0 +1,93 @@
+---
+title: Webhooks
+description: 
+---
+
+# Webhooks
+
+Listen to webhook events whenever certain actions occurs.
+
+<Divider className="max-w-100" />
+
+## What are Webhooks?
+
+Webhooks are a way for you to subscribe to events that occur when an event involving your business occurs. This guide will walk through what webhooks are and how you can use them in order to get started with integrating them into your application.
+
+A webhook URL is an endpoint on your server where you can receive notifications about such events. When an event occurs, we'll make a POST request to that endpoint, with a JSON body containing the details about the event, including the type of event and the data associated with it.
+
+ <Alert 
+    status="info" 
+
+    className="my-2" 
+    content=' Rather than continuously polling the server to check if the state has changed, webhooks provide information to you as it becomes available, which is a lot more efficient and beneficial for developers.'/>
+
+    Here are some sample webhook paylods for deposit transactions.
+
+     <CodeBlock req='' id='webHookPayload3' className='h-[492px]' />
+
+<Divider className="max-w-100" />
+
+## Enabling Webhooks
+
+You can specify your webhook URL on your dashboard where we would send <code> POST</code> requests
+whenever an event occurs.
+
+Here’s how to set up a webhook on your Lazerpay account:
+
+
+<Webhooks/>
+
+
+<Alert 
+    status="info" 
+    className="my-2" 
+    content=' When testing, you can get an instant webhook URL by visiting webhook.site. This will allow you to inspect the received payload without having to write any code or set up a server.'/>
+
+
+   <Divider className="max-w-100" />
+
+   ## Validating Webhook Signature
+
+   Every webhook event payload will contain a hashed authentication signature in the header which is computed by generating a hash from concatenating your API key and request body, using the HMAC SHA256 hash algorithm. 
+
+In order to verify this signature came from Lazerpay, you simply have to generate the HMAC SHA256 hash and compare it with the signature received. 
+
+<CodeBlock req='' id='webhookpayload4' className='h-[492px]' />
+
+ <Divider className="max-w-100" />
+
+ ## Responding to Wehbooks Request 
+
+ You must respond with a <code> 200 ok</code> status code. Any other response code outside of the <code> 2xx</code> 
+ range, we will consider it will considered as a failure, including <code>3xx</code> codes. <strong> We don’t 
+ care about the response body or headers </strong>
+
+
+<Alert 
+    status="info" 
+    className="my-2" 
+    content=' If we don’t get a 200 ok status  well try the webhook every one minutes for 24 hours.'/>
+
+ <Divider className="max-w-100" />
+
+ ## Supported Wehbooks Types
+
+ Here are the webhook type request we support. Well add more to this list as we keep adding 
+ webhook supports for different API operations in the future
+
+ <LzTable
+head={['Webhook Type', 'Description']}
+body={[
+[
+  `DEPOSIT_TRANSACTION`,
+  `A deposit transaction has occured. It could have a status of <code> incomplete</code> or <code> complete </code>`,
+],
+]}
+/>
+
+<Divider className="max-w-100" />
+
+<Pagination />
+
+
+

data/snippets.ts

@@ -1,11 +1,135 @@
 export const snippets = {
-    api: 
-    `export default function App({ Component, pageProps }) {
+    api:
+        `export default function App({ Component, pageProps }) {
         return (
             <>
                 <DefaultSeo {...siteConfig.seo} />
                 <Component {...pageProps} />
             </>
         )
-    }`
+    }`,
+    webHookPayload:
+        `{
+    "id": "183f0a97-9de8-4cdc-b130-e8dd5f06caf4",
+    "reference": "3H1WTK8k8PC78p6TWEbKptT",
+    "senderAddress": "0x8aFDD7Ee323E98adcB59445AE49118673950Ff19",
+    "recipientAddress": "0x0B4d358D349809037003F96A3593ff9015E89efA",
+    "actualAmount": 100,
+    "amountPaid": 100,
+    "amountReceived": 100,
+    "coin": "USDT",
+    "hash": "0xa3ef6266d29c096eb824112fcb32a90d42276bb1c94f88790f3d47a80992a9d8,
+    "blockNumber": 19767423,
+    "type": "withdrawal",
+    "status": "confirmed",
+    "network": "mainnet",
+    "blockchain": "Binance Smart Chain",
+    "status": "confirmed",
+    "network": "mainnet",
+    "blockchain": "Binance Smart Chain",
+    "metadata": {} ,
+    "createdAt": "2022-05-30T20:22:54.674Z",
+    "updatedAt": "2022-05-30T20:22:54.674Z",
+    "feeInCrypto": 0,
+    "webhookType": "CRYPTO_TRANSFER"
+}`,
+
+    webHookPayload2:
+
+        `var crypto = require('crypto');
+"var secret = process.env.SECRET_KEY;
+// Using Express
+app.post("/my/webhook/url", function(req, res) {
+
+    //validate event
+    var hash = crypto.createHmac('sha256', secret).update(JSON.stringify(req.body), 'utf8').digest('hex');
+
+    if (hash == req.headers['x-lazerpay-signature']) {
+    // Retrieve the request's body
+    var event = req.body;
+    var event = req.body;
+    }
+    res.send(200);
+    });
+`,
+
+    cryptoTransferSample3:
+
+        `const Lazerpay = require('lazerpay-node-sdk');
+
+const lazerpay = new Lazerpay(LAZER_PUBLIC_KEY, LAZER_SECRET_KEY);
+
+const crypto_payout_tx = async () => {
+    const transaction_payload = {
+        amount: 1,
+        recipient: '0x0B4d358D349809037003F96A3593ff9015E89efA', // address must be a bep20 address
+        coin: 'BUSD',
+        blockchain:’Binance Smart Chain’
+    };
+    try {
+        const response = await lazer.Payout.transferCrypto(transaction_payload);
+        console.log(response.error);
+    }   catch (e) {
+        } catch (e) {
+        console.log(e);
+        }
+    };
+`,
+
+    webHookPayload3:
+        `      {
+    "id": "378b53b2-28fd-4cbd-8fe1-6786d251b7d4",
+    "reference": "MBnOcItpOaP0wkBWzx",,
+    "senderAddress": "0x451dEFC27B45808078e875556AF06bCFdC697BA4",
+    "recipientAddress": "0x062FA9157C498C8Ca4E6AF204c132EDE2500e260",
+    "actualAmount": 0.51,
+    "amountPaid": 0.5,
+    "amountPaidFiat": 292.385,
+    "fiatAmount": 300,
+    "amountReceived": 0.52,
+    "amountReceivedFiat": 304.0804,
+    "coin": "BUSD",
+    "currency": "NGN",
+    "hash": "0xe929d55dde3717987191674616a0d3bbcf4b63080434b71fde41ec86aeab5fdd",
+    "blockNumber": 16509617,
+    "type": "received",
+    "acceptPartialPayment": true,
+    "status": "confirmed",
+    "network": "mainnet",
+    "blockchain": "Binance Smart Chain",
+    "paymentLink": {},
+    "paymentButton": {},
+    "customer": {
+        "id": "1c4d885e-4058-45f0-8d74-ff79fe439e75",
+        "customerName": "Abdulfatai Suleiman",
+        "customerEmail": "[email protected]",
+        "customerPhone”:null
+    },
+    "merchantAddress": "0xFdd5352384162C3342aD018AF61d77538Bdb1257",
+    "feeInCrypto": 0.01,
+    "webhookType": "DEPOSIT_TRANSACTION"
+}
+
+`,
+
+
+    webhookpayload4:
+        `var crypto = require('crypto');
+  "var secret = process.env.SECRET_KEY;
+  // Using Express
+app.post("/my/webhook/url", function(req, res) {
+
+    //validate event
+     var hash = crypto.createHmac('sha256', secret).update(JSON.stringify(req.body), 'utf8').digest('hex');  
+
+     if (hash == req.headers['x-lazerpay-signature']) {
+     // Retrieve the request's body
+    var event = req.body;
+     // Do something with event 
+            }
+            res.send(200);
+        });
+
+`,
+
 }