reactjs-payment-gateway

ReactJS Payment Gateway

A React component for integrating with Omniware payment gateway.

TypeScript Support

The package includes TypeScript definitions for all payment parameters matching the Swift SDK structure.

Installation

npm install reactjs-payment-gateway

Complete Integration Guide

Basic Setup

• Install the package:

npm install reactjs-payment-gateway

• Import the payment function in your component:

import PaymentGateway, { PaymentGatewayParams } from 'reactjs-payment-gateway';

Payment Initialization

Prepare the payment data object with all required parameters:

const paymentData: PaymentGatewayParams = {
  api_key: '<API_KEY>',
  return_url: '<RETURN_URL>',
  mode: '<LIVE || TEST>',
  name: '<NAME>',
  phone: '<PHONE>',
  city: '<CITY>',
  country: '<COUNTRY>',
  state: '<STATE>',
  email: '<EMAIL>',
  zip_code: '<ZIP_CODE>',
  description: '<DESCRIPTION>',
  currency: '<CURRENCY>',
  amount: '<AMOUNT>',
  address_line_1: '<ADDRESS_LINE_1>',
  address_line_2: '<ADDRESS_LINE_2>',
  order_id: '<ORDER_ID>'
};

Hash Generation

Please contact support for assistance with this particular query.

Payment Initialization

const handlePayment = async () => {
  // Use the SALT only for hash generation
  paymentData.hash = await generatehash(paymentData);
  
  // Remove the SALT from the paymentData object after generating the hash
  delete paymentData.salt;
  
  try {
    const result = await PaymentGateway.initiatePayment(<PAYMENT_URL: String>, <PAYMENT_PARAMS: PaymentGatewayParams>);
    console.log(result.success ? 'Payment successful!' : 'Payment failed');
  } catch (error) {
    console.error('Payment error:', error.message);
  }
};

Initiating Payment

Call the payment function with your payment data and gateway URL:

try {
  
  await PaymentGateway.initiatePayment(<PAYMENT_URL: String>, <PAYMENT_PARAMS: PaymentGatewayParams>);

} catch (error) {
  // Handle errors
  console.error('Payment error:', error);
}

Required Fields

• api_key: Your merchant API key (from environment variables)
• return_url: URL to redirect after payment
• mode: 'LIVE' or 'TEST'
• amount: Payment amount as string
• currency: Currency code (e.g. 'INR')
• order_id: Unique order ID
• description: Payment description
• address_line_1: Billing address line 1
• address_line_2: Billing address line 2
• city: Billing city
• state: Billing state
• country: Billing country code
• zip_code: Billing zip code
• name: Customer name
• email: Customer email
• phone: Customer phone number
• hash: SHA-512 hash of sorted payment parameters

Return URL Endpoint Setup

To handle payment responses, you need to create an endpoint that can process POST requests and pass that url as return_url in the paymentData. Follow these general steps:

• Create a server-side endpoint that accepts POST requests
• Configure the endpoint to receive and parse form data
• Validate the payment status from the received data
• Store transaction details securely
• Implement appropriate response handling

Make sure your endpoint is accessible over HTTPS and can handle the expected request format from the payment gateway.

Security Measures

Protecting Sensitive Information

Always store sensitive data like API keys, salts, and payment URLs in environment variables. Never hardcode them in your source code. Follow these best practices:

• Create a .env file in your project root:

API_KEY=your_api_key
PAYMENT_URL=your_payment_url
SALT=your_salt_value

• Add .env to your .gitignore file to prevent accidental commits

• Access environment variables in your code:

const paymentData = {
  api_key: process.env.API_KEY,
  // ... other parameters
};

• Use secure environment variable management in production

• Regularly rotate your API keys and salts

• Implement proper access controls for sensitive data

License

MIT