FuturaPay Payment Widget Integration Documentation

Here's a comprehensive guide for integrating the FuturaPay payment widget with encryption and iframe integration in PHP. This documentation outlines the steps to securely transmit transaction data using encryption and then load the payment widget in an iframe.

 

Step 1: Prerequisites

Before starting, ensure you have the following details:

  • Merchant Key
  • Site ID
  • API Key

Replace the placeholder values with your actual keys.

 

Step 2: Encryption Setup

Create a utility class for encrypting transaction data using AES-256-CBC. This will help securely transmit the data to the payment gateway.

 

2.1 Encryption Class

Create a new PHP file named Encryptions.php and define the encryption class:

<?php

class Encryptions
{
    public static function make(
        string $merchant_key,
        string $api_key,
        string $site_id,
        array $payload
    ) {
        $payload['merchant_key'] = $merchant_key;
        $payload['api_key'] = $api_key;
        $payload['site_id']= $site_id;
        $key = md5($merchant_key . $api_key . $site_id);

        // Encryption and decryption method
        $cipherMethod = 'AES-256-CBC';

        // Data to encrypt
        $data = json_encode($payload);

        // Generate an initialization vector (IV)
        $ivLength = openssl_cipher_iv_length($cipherMethod);
        $iv = openssl_random_pseudo_bytes($ivLength);

        // Encrypt the data
        $encryptedData = openssl_encrypt($data, $cipherMethod, $key, 0, $iv);

        // Encode data in base64
        $encryptedDataBase64 = base64_encode($encryptedData);
        $ivBase64 = base64_encode($iv);
        $payload =   array(
            "data" => $encryptedDataBase64,
            "iv" => $ivBase64,
            "key" => base64_encode($api_key)
        );
        return   http_build_query($payload);
    }
}

 

2.2 Usage

To encrypt the transaction data, use the index.php file and Integrate the payment widget by embedding the iframe in your HTML file. Use the encrypted data and FuturaPay's payment widget URL.

<?php
require('Encryptions.php');

$merchant_key = "TMXXXXXXXXXXXXXXXX";
$site_id = "831206409";
$api_key = "apiKey66a33e22470a2";


$transaction_data = array(
    "currency" => "USD", // Example: USD
    "amount" => 500, // Example: 500
    "customer_transaction_id" => rand(10000000, 99999999), // Unique transaction ID
    "country_code" => "US", // Example: US
    "customer_first_name" => "John", // Customer's first name
    "customer_last_name" => "Doe", // Customer's last name
    "customer_phone" => "+1234567890", // Customer's phone number
    "customer_email" => "john.doe@example.com" // Customer's email address
);

$encrypted_data = Encryptions::make($merchant_key, $api_key, $site_id, $transaction_data);

?>

After that add the iframe lunch code in index.php


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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Payment Widget</title>
    <style>
        /* Basic modal styling */
        .modal {
            display: none;
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-color: rgba(0, 0, 0, 0.5);
            justify-content: center;
            align-items: center;
        }

        .modal-content {
            background-color: #fff;
            padding: 20px;
            border-radius: 8px;
            width: 80%;
            max-width: 800px;
        }

        .close-btn {
            float: right;
            cursor: pointer;
            font-size: 20px;
            font-weight: bold;
        }
    </style>
</head>

<body>
    <!-- Modal structure -->
    <div id="paymentModal" class="modal">
        <div class="modal-content">
            <span class="close-btn" id="closeModal">&times;</span>
            <iframe
                id="futurapay-widget"
                src="https://stage-payment-widget.futurapay.com/widget/deposit"
                width="100%"
                height="600px"
                frameborder="0">
            </iframe>
        </div>
    </div>

    <script>
        // Reference to the modal and iframe
        const paymentModal = document.getElementById('paymentModal');
        const widget = document.getElementById('futurapay-widget');
        const closeModal = document.getElementById('closeModal');

        // Example data to send to the iframe (replace this with actual encrypted data from your server-side script)
        const encryptedData = <?php echo json_encode($encrypted_data); ?>;

        // Check if the encrypted data is available
        if (encryptedData) {
            // Display the modal
            paymentModal.style.display = 'flex';
            // Wait for the iframe to load
            let srcdata = widget.src;
            widget.src = srcdata + '?' + encryptedData;
           
        }

        // Close the modal when the close button is clicked
        closeModal.onclick = function() {
            paymentModal.style.display = 'none';
        };

        // Close the modal if the user clicks outside the modal content
        window.onclick = function(event) {
            if (event.target === paymentModal) {
                paymentModal.style.display = 'none';
            }
        };
    </script>
</body>

</html>

Replace https://stage-payment-widget.futurapay.com/ with https://payment-widget.futurapay.com/ for live integration.

 

 

Step 3: Testing

  1. Use the stage URL for testing: https://stage-payment-widget.futurapay.com/.
  2. Test various scenarios, such as successful payment, failed payment, and payment cancellation.
  3. Switch to live URL: https://payment-widget.futurapay.com/ once testing is complete.

 

Step 4: Going Live

  1. Replace stage URL with the live URL.
  2. Double-check the encryption setup and ensure all transaction data is correctly handled.