React-korba-payment NPM

react-korba-payment

This is a react library for implementing korba payment gateway

Full Documentation 👉👉 Korba Documentation

Get Started

The minimum supported version of React is v16.8. If you use an older version, upgrade React to use this library.

Install

npm i react-korba-payment

or with yarn

yarn add react-korba-payment

Usage

Using the hooks

React.JS

import React from 'react';
import { useXCheckout } from 'react-korba-payment';

function App() {
  const {pay} = useXCheckout({
    // replace with your Korba XCheckout script URL
    scriptSrc: 'https://testxchange.korba365.com/api/v1.0/website_checkout/', 
  });

  return (
      <button
        onClick={() => {
          pay({
            merchantID: '<your_merchant_id>',
            orderID: '<unique_order_id>',
            description: 'Ordered goods',
            amount: 1.2, // in GH₵
            redirectURL: 'https://www.yourawesomeapp.com',
          });
        }}
        className="button"
      >
        Pay Now!
      </button>
  );

export default App;

Next.JS 13

Next.js 13 introduces a new app/ directory folder structure. By default it uses React Server Components. To use react-korba-payment in those components, you need to convert them into client-side component by adding a 'use client'; at the top of your file. react-korba-payment only works in client-side components.

'use client';
import React from 'react';
import { useXCheckout } from 'react-korba-payment';

export default function CheckoutButton() {
  const {pay} = useXCheckout({
    // replace with your Korba XCheckout script URL
    scriptSrc: 'https://testxchange.korba365.com/api/v1.0/website_checkout/', 
  });

  return (
    <button
      onClick={() => {
        pay({
          merchantID: '<your_merchant_id>',
          orderID: '<unique_order_id>',
          description: 'Ordered goods',
          amount: 1.2, // in GH₵
          redirectURL: 'https://www.yourawesomeapp.com',
        });
      }}
      className={styles.button}
    >
      Pay Now!
    </button>
  );
}

Please checkout Korba Documentation for more.