@koomipay/react

React components for Koomipay B2B payment service

Requirements

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

Getting started

• Try live demo here

How to use

First, install @koomipay/react using the following command

npm install @koomipay/react --save

Create Koomipay Client

To create a new Koomipay client, use the createClient() method from the package, and pass in the Checkout API Key getting from Koomipay Portal

import { createClient } from "@koomipay/react"

const koomipay = createClient({
  apiKey: "your_checkout_api_key", // should put to env
})

Get available Payment Methods

Then get all the available payment methods for your Merchant Account by calling the getPaymentMethods() method

const paymentMethods = await koomipay.getPaymentMethods({
  amount: { currency: "SGD", price: 100 },
  countryCode: "SG",
})

Checkout

Depending on your scenario, you can use either checkout() method (normal checkout without capturing) or instantCheckout(), which will trigger a capturing immediately after checkout

const response = await koomipay.instantCheckout({
  orderID: "Order #01",
  paymentMethod: paymentData,
  amount: {
    currency: "SGD",
    price: 100,
  },
  items: [
    {
      productID: "product_01",
      productName: "Product 01",
      quantity: 1,
      price: 100,
    },
  ],
  returnUrl: document.location.origin + "/api/checkout/callback",
})

Remember to check the response for 3Ds redirect url

if (response?.data?.success) {
  const { data } = response.data
  if (data.resultCode === "Authorised") {
    window.location.href = "/checkout/success"
  } else if (data.resultCode === "RedirectShopper") {
    window.open(data.redirect3ds)
  }
}

Full example

import React, { useEffect, useCallback } from "react"
import ReactDOM from "react-dom"
import { createClient, CheckoutComponent } from "@koomipay/react"

const koomipay = createClient({
  apiKey: "your_test_key", // should put to process.env
})

function Checkout() {
  const [valid, setValid] = useState(false)
  const [paymentData, setPaymentData] = useState(false)
  const [currentPaymentMethod, setCurrentPaymentMethod] = useState(null)
  const [paymentMethods, setPaymentMethods] = useState([])

  const fetchPaymentMethods = useCallback(async () => {
    try {
      const paymentMethods = await koomipay.getPaymentMethods({
        amount: { currency: "SGD", price: 100 },
        countryCode: "SG",
      })
      setPaymentMethods(paymentMethods)
      setCurrentPaymentMethod(paymentMethods[0])
    } catch (error) {
      console.error("Failed to load payment methods")
    }
  }, [])

  useEffect(() => {
    fetchPaymentMethods()
  }, [fetchPaymentMethods])

  async function handleSubmit(event) {
    event.preventDefault()
    try {
      const response = await koomipay.instantCheckout({
        orderID: "Order #01",
        paymentMethod: paymentData,
        amount: {
          currency: "SGD",
          price: 100,
        },
        items: [
          {
            productID: "product_01",
            productName: "Product 01",
            quantity: 1,
            price: 100,
          },
        ],
        returnUrl: document.location.origin + "/api/checkout/callback",
      })

      if (response?.data?.success) {
        const { data } = response.data
        if (data.resultCode === "Authorised") {
          window.location.href = "/checkout/success"
        } else if (data.resultCode === "RedirectShopper") {
          window.open(data.redirect3ds)
        }
      }
    } catch (error) {
      console.log(error)
    }
  }

  return (
    <form onSubmit={handleSubmit}>
      {paymentMethods.map((method) => (
        <div key={method.name}>
          <input type="radio" name="method" onClick={() => setCurrentPaymentMethod(method)} />
          <span>{method.name}</span>
        </div>
      ))}
      <CheckoutContainer
        client={koomipay}
        amount={{
          currency: "SGD",
          price: 100,
        }}
        paymentMethod={currentPaymentMethod}
        onValid={setValid}
        onChange={setPaymentData}
      />
      <button type="submit" disabled={!valid}>
        Pay
      </button>
    </form>
  )
}

ReactDOM.render(<Checkout />, document.body)

TypeScript support

React Koomipay is packaged with TypeScript declarations. Some types are pulled from @koomipay/react — be sure to add @koomipay/react as a dependency to your project for full TypeScript support.