Developer Documentation

Welcome. This guide explains how to connect your application to the API Surge gateway. We simplify the complex world of payments into a single integration.

Free Integration Service: Our engineering team handles the entire setup for you. We provide free, lifetime assistance for all merchants.

1. Server-Side Integration

Securely pass customer and order data from your backend (PHP, Node, Python, etc.) directly to our gateway iframe.

Step 1: Place the Iframe

Add this HTML snippet to your checkout page. It remains hidden until triggered.

HTML

<!-- API Surge Container -->
<div id="apiSurgeIframeContainer" style="display: none; height: 85vh;">
    <iframe id="apiSurgePaymentIframe" title="Secure Payment" style="width: 100%; height: 100%; border: none;"></iframe>
</div>

Step 2: Configure the Script

Enter your email below to auto-generate your personalized integration script.

Your Merchant Email

JavaScript

<script>
// Function to launch API Surge Payment Gateway
function launchApiSurgePayment(paymentData) {
    // 1. CONFIGURATION
    const merchantEmail = "YOUR_MERCHANT_EMAIL@EXAMPLE.COM";

    // 2. DATA PREPARATION
    const dataForUrl = {
        email:          merchantEmail,
        first_name:     paymentData.firstName || '',
        last_name:      paymentData.lastName || '',
        customer_email: paymentData.customerEmail || '',
        country_code:   paymentData.countryCode || '',
        phone:          paymentData.phoneNumber || '',
        amount:         paymentData.amount || '0.00',
        transaction_id: 'txn_' + Date.now()
    };

    // 3. EXECUTION
    const params = new URLSearchParams(dataForUrl).toString();
    const iframe = document.getElementById("apiSurgePaymentIframe");
    const container = document.getElementById("apiSurgeIframeContainer");
    
    if (iframe && container) {
        iframe.src = "https://apisurge.com/pay?" + params;
        container.style.display = 'block';
    } else {
        console.error("API Surge Error: Iframe container not found.");
    }
}
</script>

Step 3: Trigger the Payment

Call the function from your "Pay Now" button using your server-side variables.

PHP Example

<button type="button" onclick="launchApiSurgePayment({
    firstName:      '<?php echo $firstName; ?>',
    lastName:       '<?php echo $lastName; ?>',
    customerEmail:  '<?php echo $email; ?>',
    amount:         '<?php echo $total; ?>'
})">
    Pay Now
</button>

2. Buy Now, Pay Later (BNPL)

Boost conversion rates by offering split payments.

Tabby Integration

Register for a merchant account at Tabby.
Obtain your Public and Secret API Keys (Sandbox).
Send these keys to our support team or input them in your Dashboard.
We will perform end-to-end testing.
Once verified, we switch your credentials to Production mode.

Tamara Integration

Register at the Tamara Merchant Portal.
Retrieve your API Token and Notification Token.
Configure these in the API Surge Dashboard.
Our team verifies the checkout flow before going live.

3. Payment Gateways

Stripe

Log in to your Stripe Dashboard.
Navigate to Developers > API Keys.
Copy your Publishable Key and Secret Key.
Add these to API Surge to start accepting cards immediately.

PayPal

Access the PayPal Developer Dashboard.
Create an App to generate a Client ID and Secret.
Input these credentials into API Surge.

Amazon Pay

Register for an Amazon Pay merchant account.
Access your integration settings to get your Merchant ID, Access Key, and Secret Key.
Add these keys to your API Surge Dashboard.
We will run test transactions to ensure the workflow is correct before switching to Production.