FuturaPay Payment Gateway Integration with Iframe

This guide walks you through the integration of the FuturaPay payment gateway using an iframe on your website. This setup allows for a secure and seamless payment experience.

Prerequisites

FuturaPay merchant account with credentials (merchant key, site ID, and API key).
Node.js environment to set up the backend.

Backend Setup with Node.js

Install the FuturaPay SDK

Use npm to add FuturaPay to your project:

npm install futurapay --save

Initialize FuturaPay and Prepare Transaction Data

Create a JavaScript file (e.g., futurapay.js) and use it to initialize FuturaPay with your credentials.

const Futurapay = require('futurapay/futurapay');
const merchantKey = "YOUR_MERCHANT_KEY";
const siteId = "YOUR_SITE_ID";
const apiKey = "YOUR_API_KEY";
const paymentGateway = new Futurapay(merchantKey, apiKey, siteId);
paymentGateway.setEnv("live"); // Set to "sandbox" for testing
paymentGateway.setType("withdraw"); // Or "deposit" based on your needs

Generate a Payment URL

Prepare the customer transaction details and use initiatePayment to get a secured URL for the payment iframe.

const transactionData = {
    currency: "XAF",
    amount: 50000,
    customer_transaction_id: Math.floor(Math.random() * 90000000), // Unique ID
    country_code: "CM",
    customer_first_name: "John",
    customer_last_name: "Doe",
    customer_phone: "7250634942",
    customer_email: "john.doe@example.com"
};
const securedUrl = paymentGateway.initiatePayment(transactionData);
console.log(securedUrl); // This secured URL is used in the iframe

Frontend Integration with HTML & JavaScript

Use the secured URL generated in Node.js to embed the payment widget using an iframe in HTML and JavaScript.

HTML Setup for Iframe

Add an iframe element to your HTML, which will load the secured payment URL.

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>FuturaPay Payment</title>
    <style>
        /* Centering the payment container */
      

        /* Styling the payment iframe container */
        #payment-container {
            text-align: center;
            width: 100%;
            max-width: 480px;
            margin: auto;
            background-color: white;
            box-shadow: 0px 6px 18px rgba(0, 0, 0, 0.1);
            border-radius: 12px;
            overflow: hidden;
            padding: 20px 20px 0;
            text-align: center;
        }

        /* Header Styling */
        #payment-header {
            font-size: 1.2rem;
            font-weight: bold;
            margin-bottom: 10px;
            color: #333;
        }

        /* Centered loading animation */
        .loader {
            border: 4px solid #f3f3f3;
            border-radius: 50%;
            border-top: 4px solid #3498db;
            width: 40px;
            height: 40px;
            animation: spin 1s linear infinite;
            margin: 20px auto;
        }

        /* Animation for loader */
        @keyframes spin {
            0% { transform: rotate(0deg); }
            100% { transform: rotate(360deg); }
        }

        /* Styling the iframe */
        iframe {
            border: 0;
            border-radius: 8px;
            width: 100%;
        }
    </style>
</head>

<body>
    <div id="payment-container">
        <!-- Header for title or branding -->
      
        
        <!-- Loader to show before iframe loads -->
        <div class="loader" id="loader"></div>
    </div>

</body>
</html>

JavaScript to Load Iframe

        document.addEventListener("DOMContentLoaded", async function () {
            try {
                const response = await fetch('http://localhost:3000/generate-payment-url');
                const data = await response.json();

                // Hide loader once data is loaded
                document.getElementById("loader").style.display = "none";

                // Creating the iframe element
                const iframe = document.createElement("iframe");
                iframe.src = data.url;
                iframe.height = "600";
                
                document.getElementById("payment-container").appendChild(iframe);
            } catch (error) {
                console.error("Error loading payment iframe:", error);
                document.getElementById("loader").innerText = "Failed to load payment widget.";
            }
        });

Note: Replace "https://youdomain.com/initiatePayment" with the actual URL generated in Node.js.

Full Example Code

Node.js Code (`futurapay.js`)

const Futurapay = require('futurapay/futurapay');
const merchantKey = "YOUR_MERCHANT_KEY";
const siteId = "YOUR_SITE_ID";
const apiKey = "YOUR_API_KEY";
const paymentGateway = new Futurapay(merchantKey, apiKey, siteId);
paymentGateway.setEnv("live");
paymentGateway.setType("withdraw");
const transactionData = {
    currency: "XAF",
    amount: 50000,
    customer_transaction_id: Math.floor(Math.random() * 90000000),
    country_code: "CM",
    customer_first_name: "John",
    customer_last_name: "Doe",
    customer_phone: "7250634942",
    customer_email: "john.doe@example.com"
};
const securedUrl = paymentGateway.initiatePayment(transactionData);
console.log("Secured URL:", securedUrl); // Pass this URL to the frontend

HTML and JavaScript Code

HTML (index.html):

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>FuturaPay Payment</title>
    <style>
        /* Centering the payment container */
      

        /* Styling the payment iframe container */
        #payment-container {
            text-align: center;
            width: 100%;
            max-width: 480px;
            margin: auto;
            background-color: white;
            box-shadow: 0px 6px 18px rgba(0, 0, 0, 0.1);
            border-radius: 12px;
            overflow: hidden;
            padding: 20px 20px 0;
            text-align: center;
        }

        /* Header Styling */
        #payment-header {
            font-size: 1.2rem;
            font-weight: bold;
            margin-bottom: 10px;
            color: #333;
        }

        /* Centered loading animation */
        .loader {
            border: 4px solid #f3f3f3;
            border-radius: 50%;
            border-top: 4px solid #3498db;
            width: 40px;
            height: 40px;
            animation: spin 1s linear infinite;
            margin: 20px auto;
        }

        /* Animation for loader */
        @keyframes spin {
            0% { transform: rotate(0deg); }
            100% { transform: rotate(360deg); }
        }

        /* Styling the iframe */
        iframe {
            border: 0;
            border-radius: 8px;
            width: 100%;
        }
    </style>
</head>

<body>
    <div id="payment-container">
        <!-- Header for title or branding -->
      
        
        <!-- Loader to show before iframe loads -->
        <div class="loader" id="loader"></div>
    </div>

    <script>
        document.addEventListener("DOMContentLoaded", async function () {
            try {
                const response = await fetch('http://localhost:3000/generate-payment-url');
                const data = await response.json();

                // Hide loader once data is loaded
                document.getElementById("loader").style.display = "none";

                // Creating the iframe element
                const iframe = document.createElement("iframe");
                iframe.src = data.url;
                iframe.height = "600";
                
                document.getElementById("payment-container").appendChild(iframe);
            } catch (error) {
                console.error("Error loading payment iframe:", error);
                document.getElementById("loader").innerText = "Failed to load payment widget.";
            }
        });
    </script>
</body>

</html>

Conclusion

Following this documentation, you can securely integrate the FuturaPay payment gateway into your website using an iframe. If you need further assistance, please refer to the FuturaPay support documentation or contact their support team.

FuturaPay Payment Gateway Integration with Iframe in Express.js

This documentation covers the integration of FuturaPay with an iframe on your website using Express.js. The integration provides a secure and streamlined payment experience.

Prerequisites

FuturaPay merchant account with credentials (merchant key, site ID, and API key).
Node.js environment with Express.js installed.

Backend Setup in Express.js

Install the Required Packages

Install Express and FuturaPay SDK:

npm install express futurapay

Set Up Express Server

Create an Express server (app.js) that initializes FuturaPay and generates a secured URL for payment.

const express = require('express');
const Futurapay = require('futurapay/futurapay');

const app = express();
const port = 3000;

const merchantKey = "YOUR_MERCHANT_KEY";
const siteId = "YOUR_SITE_ID";
const apiKey = "YOUR_API_KEY";

const paymentGateway = new Futurapay(merchantKey, apiKey, siteId);
paymentGateway.setEnv("live"); // Set to "sandbox" for testing
paymentGateway.setType("withdraw");

// Route to get a secured payment URL
app.get('/generate-payment-url', (req, res) => {
    const transactionData = {
        currency: "XAF",
        amount: 50000,
        customer_transaction_id: Math.floor(Math.random() * 90000000),
        country_code: "CM",
        customer_first_name: "John",
        customer_last_name: "Doe",
        customer_phone: "7250634942",
        customer_email: "john.doe@example.com"
    };

    const securedUrl = paymentGateway.initiatePayment(transactionData);
    res.json({ url: securedUrl });
});

app.listen(port, () => {
    console.log(`Server is running on http://localhost:${port}`);
});

Explanation:

The /generate-payment-url endpoint initializes a FuturaPay transaction and returns a secured URL to the client.
This URL will be embedded in the frontend iframe.

Frontend Integration with HTML & JavaScript

HTML Setup for Iframe

Create an HTML file (index.html) that will request the secured URL from the backend and display it in an iframe.

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>FuturaPay Payment</title>
    <style>
        /* Centering the payment container */
      

        /* Styling the payment iframe container */
        #payment-container {
            text-align: center;
            width: 100%;
            max-width: 480px;
            margin: auto;
            background-color: white;
            box-shadow: 0px 6px 18px rgba(0, 0, 0, 0.1);
            border-radius: 12px;
            overflow: hidden;
            padding: 20px 20px 0;
            text-align: center;
        }

        /* Header Styling */
        #payment-header {
            font-size: 1.2rem;
            font-weight: bold;
            margin-bottom: 10px;
            color: #333;
        }

        /* Centered loading animation */
        .loader {
            border: 4px solid #f3f3f3;
            border-radius: 50%;
            border-top: 4px solid #3498db;
            width: 40px;
            height: 40px;
            animation: spin 1s linear infinite;
            margin: 20px auto;
        }

        /* Animation for loader */
        @keyframes spin {
            0% { transform: rotate(0deg); }
            100% { transform: rotate(360deg); }
        }

        /* Styling the iframe */
        iframe {
            border: 0;
            border-radius: 8px;
            width: 100%;
        }
    </style>
</head>

<body>
    <div id="payment-container">
        <!-- Header for title or branding -->
      
        
        <!-- Loader to show before iframe loads -->
        <div class="loader" id="loader"></div>
    </div>

</body>
</html>

JavaScript to Load Iframe

	document.addEventListener("DOMContentLoaded", async function () {
            try {
                const response = await fetch('http://localhost:3000/generate-payment-url');
                const data = await response.json();

                // Hide loader once data is loaded
                document.getElementById("loader").style.display = "none";

                // Creating the iframe element
                const iframe = document.createElement("iframe");
                iframe.src = data.url;
                iframe.height = "600";
                
                document.getElementById("payment-container").appendChild(iframe);
            } catch (error) {
                console.error("Error loading payment iframe:", error);
                document.getElementById("loader").innerText = "Failed to load payment widget.";
            }
        });

Full Example Code

Express.js Backend (`app.js`)

const express = require('express');
const Futurapay = require('futurapay/futurapay');

const app = express();
const port = 3000;

const merchantKey = "YOUR_MERCHANT_KEY";
const siteId = "YOUR_SITE_ID";
const apiKey = "YOUR_API_KEY";

const paymentGateway = new Futurapay(merchantKey, apiKey, siteId);
paymentGateway.setEnv("live"); // Use "sandbox" for testing
paymentGateway.setType("withdraw");

app.get('/generate-payment-url', (req, res) => {
    const transactionData = {
        currency: "XAF",
        amount: 50000,
        customer_transaction_id: Math.floor(Math.random() * 90000000),
        country_code: "CM",
        customer_first_name: "John",
        customer_last_name: "Doe",
        customer_phone: "7250634942",
        customer_email: "john.doe@example.com"
    };

    const securedUrl = paymentGateway.initiatePayment(transactionData);
    res.json({ url: securedUrl });
});

app.listen(port, () => {
    console.log(`Server is running on http://localhost:${port}`);
});

HTML and JavaScript Code

HTML (index.html):

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>FuturaPay Payment</title>
    <style>
        /* Centering the payment container */
      

        /* Styling the payment iframe container */
        #payment-container {
            text-align: center;
            width: 100%;
            max-width: 480px;
            margin: auto;
            background-color: white;
            box-shadow: 0px 6px 18px rgba(0, 0, 0, 0.1);
            border-radius: 12px;
            overflow: hidden;
            padding: 20px 20px 0;
            text-align: center;
        }

        /* Header Styling */
        #payment-header {
            font-size: 1.2rem;
            font-weight: bold;
            margin-bottom: 10px;
            color: #333;
        }

        /* Centered loading animation */
        .loader {
            border: 4px solid #f3f3f3;
            border-radius: 50%;
            border-top: 4px solid #3498db;
            width: 40px;
            height: 40px;
            animation: spin 1s linear infinite;
            margin: 20px auto;
        }

        /* Animation for loader */
        @keyframes spin {
            0% { transform: rotate(0deg); }
            100% { transform: rotate(360deg); }
        }

        /* Styling the iframe */
        iframe {
            border: 0;
            border-radius: 8px;
            width: 100%;
        }
    </style>
</head>

<body>
    <div id="payment-container">
        <!-- Header for title or branding -->
      
        
        <!-- Loader to show before iframe loads -->
        <div class="loader" id="loader"></div>
    </div>

    <script>
        document.addEventListener("DOMContentLoaded", async function () {
            try {
                const response = await fetch('http://localhost:3000/generate-payment-url');
                const data = await response.json();

                // Hide loader once data is loaded
                document.getElementById("loader").style.display = "none";

                // Creating the iframe element
                const iframe = document.createElement("iframe");
                iframe.src = data.url;
                iframe.height = "600";
                
                document.getElementById("payment-container").appendChild(iframe);
            } catch (error) {
                console.error("Error loading payment iframe:", error);
                document.getElementById("loader").innerText = "Failed to load payment widget.";
            }
        });
    </script>
</body>

</html>

Conclusion

This documentation should help you integrate the FuturaPay payment gateway into your website using Express.js and an iframe widget. For further details, refer to the FuturaPay documentation or contact support.

FuturaPay Payment Gateway Integration with Iframe

Prerequisites

Backend Setup with Node.js

Frontend Integration with HTML & JavaScript

Full Example Code

Node.js Code (futurapay.js)

HTML and JavaScript Code

Conclusion

FuturaPay Payment Gateway Integration with Iframe in Express.js

Prerequisites

Backend Setup in Express.js

Frontend Integration with HTML & JavaScript

Full Example Code

Express.js Backend (app.js)

HTML and JavaScript Code

Conclusion

Node.js Code (`futurapay.js`)

Express.js Backend (`app.js`)