React components for Koomipay B2B payment service
The minimum supported version of React is v18.2.0. If you use an older version, upgrade React to use this library.
First, install @koomipay/react using the following command
npm install @koomipay/react --save
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
})
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",
})
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)
}
}
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)
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.