@koomipay/react 2.0.4 → 2.1.1

package/README.md

@@ -20,7 +20,9 @@ First, install [@koomipay/react][koomipay-npm] using the following command
 npm install @koomipay/react --save
 ```
 
-### Create Koomipay Client
+### Guide for version 2.1.1:
+
+#### 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][koomipay-portal]
 
@@ -29,147 +31,330 @@ import { createClient } from "@koomipay/react"
 
 const koomipay = createClient({
   apiKey: "your_checkout_api_key", // should put to env
+  countryCode: "SG", // current country code
 })
 ```
 
-### Get available Payment Methods
+### Waiting for client to be ready
 
-Then get all the available payment methods for your Merchant Account by calling the `getPaymentMethods()` method
+Call function  `isAvailable()` and waiting it's done
 
 ```jsx
-const paymentMethods = await koomipay.getPaymentMethods({
-  amount: { currency: "SGD", price: 100 },
-  countryCode: "SG",
-})
+koomipay.isAvailable().then(() => {
+  setPaymentMethods(koomipay.getPaymentMethods())
+}).catch(err => console.error(err))
 ```
 
-### Checkout
+### Get payment methods
 
-Depending on your scenario, you can use either `checkout()` method (normal checkout without **capturing**) or `instantCheckout()`, which will trigger a capturing immediately after checkout
+When koomipay client is ready (after calling `isAvailable()`), call function  `getPaymentMethods()` to get available payment methods
 
 ```jsx
-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",
-})
+koomipay.getPaymentMethods()
 ```
 
-Remember to check the response for 3Ds redirect url
+### Checkout
 
-```jsx
-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)
-  }
-}
-```
+Function `instantCheckout()` is removed, now we need to handle payment callback.
 
-### Full example
+### Example
 
 ```jsx
-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
-})
+import React, { useContext, useState, Fragment, useEffect, useRef, useCallback } from "react"
+import Head from "next/head"
+import { useCartContext } from "contexts/CartContext"
+import Image from "next/image"
+import Layout from "components/Layout"
+import { createClient, GooglePayComponent, ApplePayComponent, CardComponent, QrPayComponent, RedirectPayComponent } from "@koomipay/react"
+import type { CardComponentRef, QrPayComponentRef, KoomiPayClient } from "@koomipay/react"
+import _ from "lodash"
+import rs from "randomstring"
+import { round } from "lodash"
 
 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")
-    }
-  }, [])
+  const [loading, setLoading] = useState(false)
+  const koomipay = useRef<KoomiPayClient | undefined>(undefined)
+  const [paymentMethod, setPaymentMethod] = useState<any>(null)
+  const [paymentMethods, setPaymentMethods] = useState<any>([])
+  const [orderID, setOrderID] = useState("")
+  const { cart, setCart } = useCartContext()
+  const [errorMessage, setErrorMessage] = useState<any>("")
+  const [checkoutType, setCheckoutType] = useState<"instant" | "normal" | string>("normal")
+  const total = round(
+    cart.reduce((total, c) => total + c.product.price * c.quantity, 0),
+    2
+  )
+
+  const handleCompleteCheckout = useCallback(() => {
+    setCart([])
+    window.location.href = `/checkout/complete?orderID=${orderID}&resultCode=Authorised`
+  }, [orderID, setCart])
 
   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 (total > 0) {
+      const apiKey = localStorage.getItem("api-key")
+      setCheckoutType(localStorage.getItem("checkout-type") || "normal")
+      if (koomipay.current) return
 
-      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)
+      koomipay.current = createClient({
+        apiKey: apiKey || process.env.NEXT_PUBLIC_PAYMENT_API_KEY || "",
+        countryCode: "SG",
+      })
+      setLoading(true)
+      setErrorMessage("")
+      koomipay.current
+        .isAvailable()
+        .then(() => {
+          const pms = koomipay.current?.getPaymentMethods()
+          setPaymentMethods(pms)
+          setPaymentMethod(pms?.[0])
+        }).catch((err: any) => {
+          console.error(err)
+          setErrorMessage(err.message)
+        }).finally(() => {
+          setLoading(false)
+        })
     }
+  }, [total])
+
+
+  function handleSubmitPayment(confirm: (payload: any) => Promise<void>) {
+    setErrorMessage("")
+    const items = cart?.map((item) => ({
+      productID: item.product.id,
+      productName: item.product.name,
+      quantity: item.quantity,
+      price: item.product.price,
+    }))
+    const orderID = rs.generate(10)
+    setOrderID(orderID)
+    confirm({
+      orderID: orderID,
+      items,
+      autoCapture: checkoutType !== "normal",
+      amount: {
+        currency: "SGD",
+        price: total,
+      },
+      metadata: {
+        receiptText: "Receipt Test",
+      },
+    })
   }
 
   return (
-    <form onSubmit={handleSubmit}>
-      {paymentMethods.map((method) => (
-        <div key={method.name}>
-          <input type="radio" name="method" onClick={() => setCurrentPaymentMethod(method)} />
-          <span>{method.name}</span>
+    <Layout>
+      <main>
+        <Head>
+          <title>Checkout</title>
+        </Head>
+        <h1 className="mb-4 text-2xl font-bold text-center">Checkout</h1>
+        <div className="grid grid-cols-1 gap-8 md:grid-cols-2">
+          <div>
+            <h3 className="mb-2 text-sm font-semibold text-gray-500">Order Summary</h3>
+            <div className="pt-4 mb-4 border-t border-b border-solid border-slate-200">
+              {cart.length ? (
+                cart.map((c, index) => (
+                  <div key={c.product.id} className="flex items-center mb-4">
+                    <div className="flex items-center flex-grow">
+                      <figure className="relative w-10 h-10 mr-4">
+                        <Image src={c.product.image} fill alt={`Product ${c.product.name} image`} />
+                      </figure>
+                      {c.product.name}
+                    </div>
+                    <div className="w-1/12 ">${c.product.price}</div>
+                    <div className="w-1/12 text-center">{c.quantity}</div>
+                    <div className="w-1/12 text-right">${round(c.quantity * c.product.price, 2)}</div>
+                  </div>
+                ))
+              ) : (
+                <p>No item in cart</p>
+              )}
+            </div>
+            <div className="flex items-center justify-end mb-4">
+              <span className="mr-8 text-xl">Total</span>
+              <strong className="text-xl">${total}</strong>
+            </div>
+          </div>
+          <div>
+            {
+              errorMessage && (
+                <div className="text-lg font-semibold text-red-500">{errorMessage}</div>
+              )
+            }
+            <h3 className="mb-2 text-sm font-semibold text-gray-500">Select Your Payment Method</h3>
+            {/* Payment Methods */}
+            {loading && (
+              <div
+                className={`mx-auto w-64 h-64 inset-0 flex flex-col gap-3 items-center justify-center ${loading ? "" : "opacity-0 pointer-events-none"
+                  }`}
+              >
+                <div className="w-16 h-16">
+                  <svg
+                    className="w-full h-full animate-spin"
+                    xmlns="http://www.w3.org/2000/svg"
+                    fill="none"
+                    viewBox="0 0 24 24"
+                  >
+                    <circle
+                      className="opacity-25"
+                      cx="12"
+                      cy="12"
+                      r="10"
+                      stroke="currentColor"
+                      strokeWidth="4"
+                    ></circle>
+                    <path
+                      className="opacity-75"
+                      fill="currentColor"
+                      d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"
+                    ></path>
+                  </svg>
+                </div>
+                <p className="sr-only">Loading</p>
+              </div>
+            )}
+            {
+              (paymentMethods || [])
+                .map((pm: any, index: number) => {
+                  const active = paymentMethod?.type === pm.type
+                  const id = `payment-method-${index + 1}`
+                  return (
+                    <div className="flex items-center mb-4" key={id}>
+                      <input
+                        id={id}
+                        type="radio"
+                        name="payment-methods"
+                        value={pm.type}
+                        className="w-5 h-5 text-transparent appearance-none bg-none checked:text-orange-500 accent-orange-500 checked:ring-1 checked:ring-orange-500"
+                        checked={active}
+                        onChange={(event) => {
+                          if (event.target.checked) {
+                            setPaymentMethod(pm)
+                          }
+                        }}
+                      />
+                      <label htmlFor={id} className="block ml-2 text-sm font-medium text-gray-900 cursor-pointer">
+                        {pm.name}
+                      </label>
+                    </div>
+                  )
+                })
+            }
+
+            {/* Card component */}
+            {paymentMethod?.type && ["card", "scheme"].includes(paymentMethod?.type) && (
+              <>
+                <CardComponent
+                  paymentMethod={paymentMethod}
+                  client={koomipay.current}
+                  countryCode={"SG"}
+                  onPaymentComplete={handleCompleteCheckout}
+                  onPaymentError={err => {
+                    setErrorMessage(err)
+                  }}
+                  onSubmit={handleSubmitPayment}
+                  amount={{
+                    currency: "SGD",
+                    price: total,
+                  }}
+                  showPayButton={true}
+                />
+              </>
+            )}
+            {/* End Card component */}
+
+            {/* GooglePay component */}
+            {paymentMethod?.type && ["googlepay"].includes(paymentMethod?.type) && (
+              <GooglePayComponent
+                paymentMethod={paymentMethod}
+                client={koomipay.current}
+                countryCode={"SG"}
+                onPaymentComplete={handleCompleteCheckout}
+                onPaymentError={err => {
+                  setErrorMessage(err)
+                }}
+                onSubmit={handleSubmitPayment}
+                amount={{
+                  currency: "SGD",
+                  price: total,
+                }}
+              />
+            )}
+            {/* End GooglePay component */}
+
+            {/* ApplePay component */}
+            {paymentMethod?.type && ["applepay"].includes(paymentMethod?.type) && (
+              <ApplePayComponent
+                paymentMethod={paymentMethod}
+                client={koomipay.current}
+                countryCode={"SG"}
+                onPaymentComplete={handleCompleteCheckout}
+                onPaymentError={err => {
+                  setErrorMessage(err)
+                }}
+                onSubmit={handleSubmitPayment}
+                amount={{
+                  currency: "SGD",
+                  price: total,
+                }}
+              />
+            )}
+            {/* End ApplePay component */}
+
+            {/* QrPay component */}
+            {paymentMethod?.type && ["paynow", "wechatpay", "wechatpayQR"].includes(paymentMethod?.type) && (
+              <>
+                <QrPayComponent
+                  paymentMethod={{
+                    ...paymentMethod,
+                    options: {
+                      qrCodeSize: "large",
+                      countDownTime: 3
+                    }
+                  }}
+                  client={koomipay.current}
+                  countryCode={"SG"}
+                  onPaymentComplete={handleCompleteCheckout}
+                  onPaymentError={err => {
+                    setErrorMessage(err)
+                  }}
+                  onSubmit={handleSubmitPayment}
+                  amount={{
+                    currency: "SGD",
+                    price: total,
+                  }}
+                />
+              </>
+            )}
+            {/* End QrPay component */}
+
+            {/* Alipay component */}
+            {paymentMethod?.type && ["alipay"].includes(paymentMethod?.type) && (
+              <>
+                <RedirectPayComponent
+                  paymentMethod={paymentMethod}
+                  client={koomipay.current}
+                  countryCode={"SG"}
+                  onPaymentComplete={handleCompleteCheckout}
+                  onPaymentError={err => {
+                    setErrorMessage(err)
+                  }}
+                  onSubmit={handleSubmitPayment}
+                  amount={{
+                    currency: "SGD",
+                    price: total,
+                  }}
+                  showPayButton={true}
+                />
+              </>
+            )}
+            {/* End alipay component */}
+
+          </div>
         </div>
-      ))}
-      <CheckoutContainer
-        client={koomipay}
-        amount={{
-          currency: "SGD",
-          price: 100,
-        }}
-        paymentMethod={currentPaymentMethod}
-        onValid={setValid}
-        onChange={setPaymentData}
-      />
-      <button type="submit" disabled={!valid}>
-        Pay
-      </button>
-    </form>
+      </main>
+    </Layout>
   )
 }