Integrate Payblok into Your Application

Follow these simple steps to integrate our payment processor into your platform. Payblok makes it easy to handle crypto transactions securely and efficiently.

Step 1: Include Payblok in Your Form

Create a payment form in your application to capture the following details:

Here’s an example:

<form id="paymentForm">
  <label for="company">Company Name:</label>
  <input type="text" id="company" name="company" required>

  <input type="text" id="merchantId" name="merchantId" required>

  <label for="merchantAddress">Merchant Address:</label>
  <input type="text" id="merchantAddress" name="merchantAddress" required>

  <label for="amount">Amount (USD):</label>
  <input type="number" id="amount" name="amount" required>

  <button type="button" onclick="submitPayment()">Pay Now!</button>
</form>

Step 2: Encrypt and Submit Payment Data

Use the following script to encrypt user input and send it securely to the Cryptopay API:

const apiKey = "YOUR_API_KEY";
async function submitPayment() {
  const data = {
    merchantCompanyName: document.getElementById("company").value,
    merchantAddress: document.getElementById("merchantAddress").value,
    amount: parseFloat(document.getElementById("amount").value),
  };
  const encryptedData = CryptoJS.AES.encrypt(JSON.stringify(data), apiKey).toString();
  const encodedData = encodeURIComponent(encryptedData);
  const response = await fetch(`https://payblok.app/api/pay?encryptedData=${encodedData}`, {
    headers: { 'API-Key': apiKey }
  });
  window.location.href = await response.text();
}

Step 3: Handle the Payment Response

Upon successful payment, the user will be redirected to your confirmation page with a transaction receipt. Use the following code to display the receipt:

// At the start of your script
const urlParams = new URLSearchParams(window.location.search);
const receiptData = urlParams.get("receipt");
const receipt = JSON.parse(decodeURIComponent(receiptData));
if (receipt) {
  document.body.innerHTML = `<h1>Payment Successful!</h1>` +
    `<div>Amount: ${receipt.amount}</div>` +
    `<div>Transaction Hash: ${receipt.transactionHash}</div>`;
}

Additional Notes

Putting It All Together

        <!DOCTYPE html>
        <html lang="en">
        <head>
            <meta charset="UTF-8">
            <meta name="viewport" content="width=device-width, initial-scale=1.0">
            <title>Donate Coffee to Devs</title>
            <style>
                /* Styles for the success popup */
                #successPopup {
                    position: fixed;
                    top: 0;
                    left: 0;
                    width: 100%;
                    height: 100%;
                    background: rgba(0, 0, 0, 0.8);
                    color: white;
                    display: none;
                    justify-content: center;
                    align-items: center;
                    z-index: 1000;
                    font-size: 1.5em;
                    text-align: center;
                    align-items: center;
                    flex-direction: column; /* Stack elements vertically */
                }
            </style>
        </head>
        <body>
            <div id="successPopup"></div> <!-- Success Popup Container -->
            <h1>Donate a Coffee to the Devs!</h1>
            <button id="donateButton" type="button" onclick="submitDonation()">Donate Coffee!</button>
            <script>
                // At the start of your script in the Donation page
                const urlParams = new URLSearchParams(window.location.search);
                const receiptData = urlParams.get("receipt");
                const receipt = JSON.parse(decodeURIComponent(receiptData));
                if (receipt) {
                    document.getElementById("donateButton").style.display = "none";
                    document.querySelector("h1").style.display = "none";
                    const successPopup = document.getElementById("successPopup");
                    successPopup.style.display = "flex";
                    successPopup.innerHTML = `
                        <h1>Transaction successful! Transaction Receipt:</h1>
                        <div>     
                            <strong>Amount:</strong> ${receipt.amount}<br>
                            <strong>Transaction Hash:</strong> ${receipt.transactionHash}<br>
                            <strong>Status:</strong> ${receipt.status}<br>
                            <strong>From:</strong> ${receipt.from}<br>
                            <strong>To:</strong> ${receipt.to}<br>
                            <strong>Block Hash:</strong> ${receipt.blockHash}<br>
                            <strong>Block Number:</strong> ${receipt.blockNumber}<br>
                        </div>
                    `;
                }
                async function submitDonation() {
                    try {
                        const apiKey = "Your_API_Key";//Get key from dashboard
                        const data = {
                            merchantCompanyName: "CoffeeShop", //Website or business name
                            merchantAddress: "0xeAA_Your_Wallet_Address_Here",//Crypto Wallet Address
                            amount: 10,//Amount in USD
                        };

                        //Encrypt Data Before Sending to API
                        const encryptedData = CryptoJS.AES.encrypt(JSON.stringify(data), apiKey).toString();
                        const encodedData = encodeURIComponent(encryptedData);
                        const response = await fetch(`https://payblok.app/api/pay?encryptedData=${encodedData}`, {
                            headers: {
                                'API-Key': apiKey
                            }
                        });
                        const url = await response.text();
                        window.location.href = url;
                    } catch (error) {
                        console.error("Error:", error);
                        alert("An error occurred. Please try again.");
                    }
                }
            </script>
        </body>
        </html>