SecureConnect SDK

SecureConnect SDK provides a secure and simple way to integrate a payment iframe on your website and generate payment tokens. Built for modern JavaScript and TypeScript applications, it supports sandbox and production environments, with AES-256-GCM encryption for card data.

Features

• 🚀 Mount a secure payment iframe easily
• 🔐 AES-256-GCM encryption for sensitive card data
• 🪙 Generate payment tokens securely
• 🌐 Supports both sandbox and production environments
• 🧩 Works with plain JavaScript, React, or any frontend framework

Installation

npm install secure-connect-sdk

Quick Start

Add domain iframe url here

Change your iframe origin here in config.ts

    export const configs = {
      iframeOriginSandbox: "http://localhost:5173",
      iframeOriginProduction: "https://secureconnect-iframe.yourdomain.com",
}   ;

1. Add the container to your HTML

Add a container element where the payment form should appear, and a button to trigger the payment:

<div id="secureconnect-container"></div>
<button id="pay-btn">Pay Now</button>

2. Initialize the SDK

Import the SDK, initialize it with your credentials, and mount the iframe.

import { createSecureConnect } from "secure-connect-sdk";

// 1. Initialize the SDK
const sdk = createSecureConnect(
"YOUR_API_LOGIN_ID", // e.g. dfa0b1...
"YOUR_TRANSACTION_KEY", // e.g. 7063b19beef9...
{
environment: "sandbox", // 'sandbox' or 'production'
}
);

// 2. Mount the iframe
sdk.mount("secureconnect-container");

// 3. Handle Payment
document.getElementById("pay-btn").addEventListener("click", async () => {
try {
// Request a data from the iframe
const data = await sdk.createPayment();

    console.log("Payment successful! Data:", data);

    // Send this token to your backend to finalize the charge
    // await sendTokenToBackend(data.token);

} catch (err) {
console.error("Payment failed:", err);
alert("Payment failed. Please try again.");
}
});

API Reference

createSecureConnect(apiLoginId, transactionKey, options)

Creates a new instance of the SecureConnect SDK.

| Parameter | Type | Description | | ---------------- | ------ | -------------------------------------------------------- | | apiLoginId | string | Required. Your unique merchant login ID. | | transactionKey | string | Required. Your public API key provided by the dashboard. | | options | object | Configuration object. |

Options Object:

| Key | Type | Default | Description | | ------------- | ------ | ----------- | ------------------------------------------- | | environment | string | 'sandbox' | Set to 'production' for live transactions |

sdk.mount(elementId)

Mounts the payment iframe into the DOM.

• elementId (string): The ID of the HTML element where the iframe should be rendered.

sdk.createPayment()

Triggers the tokenization process.

• Returns: Promise<string>
• Resolves: A secure payment token string
• Rejects: An error object if validation fails or the network request fails

Framework Examples

React Example

import React, { useEffect, useRef } from "react";
import { createSecureConnect } from "secure-connect-sdk";

export const PaymentForm = () => {
  const sdkRef = useRef<any>(null);

  useEffect(() => {
    sdkRef.current = createSecureConnect(
      "API_LOGIN_ID",
      "YOUR_TRANSACTION_KEY",
      { environment: "sandbox" }
    );

    sdkRef.current.mount("payment-div");

    // Cleanup iframe on unmount if supported by SDK
    return () => {
      // sdkRef.current.unmount();
    };
  }, []);

  const handlePay = async () => {
    try {
      const data = await sdkRef.current.createPayment();
      console.log("Token:", data.token);
    } catch (err) {
      console.error(err);
    }
  };

  return (
    <div>
      <div id="payment-div" style={{ minHeight: "300px" }}></div>
      <button onClick={handlePay}>Pay Now</button>
    </div>
  );
};

Security Best Practices

• Never expose your Secret Key: The keys used in the frontend SDK (Initialize) should be your Public keys. Keep your Secret keys on your backend server.
• HTTPS: Ensure your payment page is served over HTTPS (required for production).

License

MIT © Your Company Name