@koomipay/react 1.0.14 → 1.0.15

package/README.md

@@ -0,0 +1,185 @@
+# @koomipay/react
+
+React components for
+[Koomipay B2B payment service][koomipay-portal]
+
+## 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][live-demo]
+
+## How to use
+
+First, install [@koomipay/react][koomipay-npm] using the following command
+
+```sh
+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][koomipay-portal]
+
+```jsx
+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
+
+```jsx
+const paymentMethods = await koomipay.getPaymentMethods({
+  amount: { currency: "SGD", price: 100 },
+  countryCode: "SG",
+})
+```
+
+### Checkout
+
+Depends on the your scenario, you can use either `checkout()` method (normal checkout without **capturing**) or `instantCheckout()`, which will trigger a capturing immediately after checkout
+
+```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",
+})
+```
+
+Remember to check the response for 3Ds redirect url
+
+```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)
+  }
+}
+```
+
+### Full 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
+})
+
+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`][koomipay-npm] — be sure to add `@koomipay/react` as a dependency to your project for full TypeScript support.
+
+[koomipay-portal]: https://pay-demo.koomi.app
+[live-demo]: https://store-demo.koomi.app
+[koomipay-npm]: https://www.npmjs.com/package/@koomipay/react

package/dist/cjs/index.js

@@ -1 +1 @@
-"use strict";var jsxRuntime=require("react/jsx-runtime"),react=require("react"),AdyenCheckout=require("@adyen/adyen-web"),axios=require("axios"),__assign=function(){return(__assign=Object.assign||function(e){for(var t,n=1,r=arguments.length;n<r;n++)for(var s in t=arguments[n])Object.prototype.hasOwnProperty.call(t,s)&&(e[s]=t[s]);return e}).apply(this,arguments)};function __awaiter(e,o,a,c){return new(a=a||Promise)(function(n,t){function r(e){try{i(c.next(e))}catch(e){t(e)}}function s(e){try{i(c.throw(e))}catch(e){t(e)}}function i(e){var t;e.done?n(e.value):((t=e.value)instanceof a?t:new a(function(e){e(t)})).then(r,s)}i((c=c.apply(e,o||[])).next())})}function __generator(r,s){var i,o,a,c={label:0,sent:function(){if(1&a[0])throw a[1];return a[1]},trys:[],ops:[]},l={next:e(0),throw:e(1),return:e(2)};return"function"==typeof Symbol&&(l[Symbol.iterator]=function(){return this}),l;function e(n){return function(e){var t=[n,e];if(i)throw new TypeError("Generator is already executing.");for(;c=l&&t[l=0]?0:c;)try{if(i=1,o&&(a=2&t[0]?o.return:t[0]?o.throw||((a=o.return)&&a.call(o),0):o.next)&&!(a=a.call(o,t[1])).done)return a;switch(o=0,(t=a?[2&t[0],a.value]:t)[0]){case 0:case 1:a=t;break;case 4:return c.label++,{value:t[1],done:!1};case 5:c.label++,o=t[1],t=[0];continue;case 7:t=c.ops.pop(),c.trys.pop();continue;default:if(!(a=0<(a=c.trys).length&&a[a.length-1])&&(6===t[0]||2===t[0])){c=0;continue}if(3===t[0]&&(!a||t[1]>a[0]&&t[1]<a[3]))c.label=t[1];else if(6===t[0]&&c.label<a[1])c.label=a[1],a=t;else{if(!(a&&c.label<a[2])){a[2]&&c.ops.pop(),c.trys.pop();continue}c.label=a[2],c.ops.push(t)}}t=s.call(r,c)}catch(e){t=[6,e],o=0}finally{i=a=0}if(5&t[0])throw t[1];return{value:t[0]?t[1]:void 0,done:!0}}}}function classNames(e){return Object.entries(e).map(function(e,t){return e[1]?e[0]:null}).filter(function(e){return e}).join(" ")}function classNameObject(e){return e?e.split(" ").reduce(function(e,t){return __assign(__assign({},e),((e={})[t]=!0,e))},{}):{}}function Label(e){var t=e.className,n=e.error,r=e.htmlFor,s=e.info,i=e.mandatory,e=e.children;return jsxRuntime.jsxs("div",__assign({className:"flex items-center justify-between"},{children:[jsxRuntime.jsxs("label",__assign({htmlFor:r,className:classNames(__assign(__assign({},classNameObject(t)),{"block text-base font-medium mb-1.5":!0,"text-gray-900 dark:text-white":!n,"text-red-600 dark:text-red-500":!!n}))},{children:[e,i&&jsxRuntime.jsx("span",__assign({className:"ml-1 text-red-500"},{children:"*"}))]})),s&&jsxRuntime.jsx("span",__assign({className:"text-sm leading-5 text-gray-500 dark:text-gray-500 ".concat(n&&"text-red-600")},{children:s}))]}))}function CardComponent(e){var t=e.client,n=e.onValid,r=e.onChange,s=e.paymentMethod,i=(e.amount,e.countryCode,react.useRef(null)),e=s||{},o=e.type,a=e.brands,e=react.useState(!0),c=e[0],l=e[1],e=react.useState({}),u=e[0],d=e[1],e=react.useState(null),h=e[0],p=e[1],e=react.useState([]),m=e[0],y=e[1],e=react.useState({}),f=e[0],x=e[1],e=react.useState({}),g=e[0],j=e[1];react.useEffect(function(){o&&(n(!1),l(!0),d({}),p(null),y([]),x({}),j({}),function(){__awaiter(this,void 0,void 0,function(){var t;return __generator(this,function(e){switch(e.label){case 0:return e.trys.push([0,2,,3]),[4,AdyenCheckout(v)];case 1:return t=e.sent(),i.current&&t.create("securedfields",{type:o,brands:a,styles:{error:{color:"red"},validated:{color:"green"},placeholder:{color:"#d8d8d8"}},onLoad:function(){l(!0)},onConfigSuccess:function(){l(!1)},onFocus:function(e){var e=e||{},t=e.focus,e=e.fieldType;p(t?e:null)},onBinLookup:function(e){e=(e||{}).detectedBrands;y(e||[])}}).mount(i.current),[3,3];case 2:return t=e.sent(),"development"===process.env.NODE_ENV&&console.log("[ERROR] Handle create checkout error: ",t),[3,3];case 3:return[2]}})})}())},[o]),react.useEffect(function(){var e;u&&"function"==typeof n&&(e=!!(u.encryptedCardNumber&&u.encryptedExpiryMonth&&u.encryptedExpiryYear&&u.encryptedSecurityCode),n(e),r({type:u.type,brand:u.brand,encryptedCardNumber:u.encryptedCardNumber,encryptedExpiryMonth:u.encryptedExpiryMonth,encryptedExpiryYear:u.encryptedExpiryYear,encryptedSecurityCode:u.encryptedSecurityCode,cardholder:u.cardholder,browserInfo:u.browserInfo}))},[u]);var e=t.getConfig(),v={locale:e.locale||"en_US",environment:e.environment,clientKey:e.clientKey,analytics:{enabled:!1},onChange:function(e){var t=(e=e||{}).data,n=e.valid,e=e.errors;d(Object.assign(!!t&&t.paymentMethod||{},{browserInfo:!!t&&t.browserInfo||{}})),j(Object.assign(__assign(__assign({},n||{}),{encryptedExpiryDate:n.encryptedExpiryMonth&&n.encryptedExpiryYear}))),x(e||{})}};return s?jsxRuntime.jsxs("div",__assign({className:classNames({"relative transition-all":!0,"h-96 max-h-96":!!c,"h-auto max-h-120":!c})},{children:[jsxRuntime.jsxs("div",__assign({className:"flex my-3 space-x-3"},{children:[jsxRuntime.jsx(CheckoutCardLogo,{active:m.includes("visa"),logoUrl:"logo/visa.svg",client:t}),jsxRuntime.jsx(CheckoutCardLogo,{active:m.includes("mc"),logoUrl:"logo/mastercard.svg",client:t}),jsxRuntime.jsx(CheckoutCardLogo,{active:m.includes("amex"),logoUrl:"logo/american-express.svg",client:t})]})),jsxRuntime.jsxs("div",__assign({ref:i,className:classNames({"opacity-0":!!c})},{children:[jsxRuntime.jsxs("div",{children:[jsxRuntime.jsx(Label,__assign({htmlFor:"cardNumber"},{children:"Card number"})),jsxRuntime.jsx(CheckoutInputField,{field:"encryptedCardNumber",focus:"encryptedCardNumber"===h,valids:g,errors:f})]}),jsxRuntime.jsxs("div",__assign({className:"grid grid-cols-2 gap-6"},{children:[jsxRuntime.jsxs("div",{children:[jsxRuntime.jsx(Label,__assign({htmlFor:"expiryDate"},{children:"Expiry date"})),jsxRuntime.jsx(CheckoutInputField,{field:"encryptedExpiryDate",focus:"encryptedExpiryDate"===h,valids:g,errors:f})]}),jsxRuntime.jsxs("div",{children:[jsxRuntime.jsx(Label,__assign({htmlFor:"securityCode"},{children:"Security Code (CVV/CVC)"})),jsxRuntime.jsx(CheckoutInputField,{field:"encryptedSecurityCode",focus:"encryptedSecurityCode"===h,valids:g,errors:f})]})]}))]})),jsxRuntime.jsxs("div",__assign({className:classNames({"absolute inset-0 flex flex-col gap-3 items-center justify-center":!0,"opacity-0 pointer-events-none":!c})},{children:[jsxRuntime.jsx("div",__assign({className:"w-16 h-16"},{children:jsxRuntime.jsxs("svg",__assign({className:"w-full h-full animate-spin",xmlns:"http://www.w3.org/2000/svg",fill:"none",viewBox:"0 0 24 24"},{children:[jsxRuntime.jsx("circle",{className:"opacity-25",cx:"12",cy:"12",r:"10",stroke:"currentColor",strokeWidth:"4"}),jsxRuntime.jsx("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"})]}))})),jsxRuntime.jsx("p",{children:"Loading"})]}))]})):null}function resolveLogoUrl(e,t){return"".concat(t.assetHost,"/").concat(e)}function CheckoutCardLogo(e){var t=e.active,n=e.logoUrl,e=e.client.getConfig();return jsxRuntime.jsx("div",__assign({className:classNames({"h-10":!0,"grayscale opacity-30":!t})},{children:jsxRuntime.jsx("img",{className:"object-contain w-full h-full",src:resolveLogoUrl(n,e)})}))}function CheckoutInputField(e){var t=e.field,n=e.focus,r=e.valids,e=e.errors,e=!!e&&e[t],r=!!r&&r[t],s=null!=e,e=!!s&&e.errorMessage;return jsxRuntime.jsxs("div",__assign({className:"relative mb-4"},{children:[jsxRuntime.jsx("div",{className:classNames({"h-12 border px-3 py-1.5 rounded-md overflow-hidden":!0,"border-gray-200":!n&&!s,"bg-green-50 border-green-700":!!r,"bg-red-50 border-red-500":!n&&!!s&&!r,"bg-blue-50 border-blue-500 ring-2 ring-blue-200":!!n}),"data-cse":t}),!!r&&jsxRuntime.jsx("div",__assign({className:"absolute top-0 bottom-0 flex items-center text-green-700 right-3"},{children:jsxRuntime.jsxs("svg",__assign({className:"w-6 h-6",xmlns:"http://www.w3.org/2000/svg",viewBox:"0 0 24 24",fill:"currentColor"},{children:[jsxRuntime.jsx("path",{d:"M0 0h24v24H0z",fill:"none"}),jsxRuntime.jsx("path",{d:"M9 16.2L4.8 12l-1.4 1.4L9 19 21 7l-1.4-1.4L9 16.2z"})]}))})),!!e&&jsxRuntime.jsx("p",__assign({className:"mt-1.5 text-red-500 text-sm leading-tight"},{children:e}))]}))}function CheckoutContainer(e){var t=e.client,n=e.paymentMethod,r=e.amount,s=e.onValid,i=e.onChange,e=e.countryCode;return jsxRuntime.jsx("div",{children:jsxRuntime.jsx("div",__assign({className:classNames({"border-t border-gray-200 mt-6 py-3":!0})},{children:n?jsxRuntime.jsx(jsxRuntime.Fragment,{children:"scheme"===n.type&&jsxRuntime.jsx(CardComponent,{client:t,paymentMethod:n,onValid:s,onChange:i,amount:r,countryCode:e})}):null}))})}function createClient(e){e=e.apiKey;return new KoomiPayClient({apiKey:e})}Label.defaultProps={error:!1},CheckoutContainer.defaultProps={onValid:function(){},onChange:function(){}};var API_URLs={dev:"http://localhost:32022",test:"https://api-pay-demo.koomi.app",live:"https://api-pay-demo.koomi.app"},KoomiPayClient=function(){function e(e){if(!e.apiKey)throw new Error("API Key not found");var t=e.apiKey.split(".")[0];if(!API_URLs[t])throw new Error("Invalid API Key");this.apiKey=e.apiKey,this.apiUrl=API_URLs[t],this.config=null}return e.prototype.getConfig=function(){if(this.config)return this.config;throw new Error("Please init config first")},e.prototype.getApiKey=function(){return this.apiKey},e.prototype.initConfig=function(){return __awaiter(this,void 0,void 0,function(){var t,n,r;return __generator(this,function(e){switch(e.label){case 0:return e.trys.push([0,2,,3]),[4,axios.get("".concat(this.apiUrl,"/koomipay/payment-config"),{headers:{"X-API-KEY":this.apiKey}})];case 1:if(n=e.sent(),n=n.data,r=n.success,t=n.error,n=n.data,r)return this.config=n,[3,3];throw new Error(t);case 2:throw r=e.sent(),console.log("[DEBUG] Initial config error",r),new Error("Error when init config, please check your API Key");case 3:return[2]}})})},e.prototype.getPaymentMethods=function(r){return __awaiter(this,void 0,void 0,function(){var t,n;return __generator(this,function(e){switch(e.label){case 0:return this.config?[3,2]:[4,this.initConfig()];case 1:e.sent(),e.label=2;case 2:t={},"amount"in r&&void 0!==r.amount&&null!==r.amount&&(t.amount=r.amount),"countryCode"in r&&void 0!==r.countryCode&&null!==r.countryCode&&(t.countryCode=r.countryCode),e.label=3;case 3:return e.trys.push([3,5,,6]),[4,axios.post("".concat(this.config.baseApiUri,"/koomipay/payment-methods"),t,{headers:{"X-API-KEY":this.apiKey}})];case 4:return[2,e.sent().data];case 5:throw n=e.sent(),console.log("[DEBUG] Generate payment method error",n),new Error("Error when get payment methods, please check your payload");case 6:return[2]}})})},e.prototype.checkout=function(n){return __awaiter(this,void 0,void 0,function(){var t;return __generator(this,function(e){switch(e.label){case 0:return this.config?[3,2]:[4,this.initConfig()];case 1:e.sent(),e.label=2;case 2:return e.trys.push([2,4,,5]),[4,axios.post("".concat(this.config.baseApiUri,"/koomipay/checkout"),n,{headers:{"X-API-KEY":this.apiKey}})];case 3:return[2,e.sent()];case 4:throw t=e.sent(),console.log("[DEBUG] Checkout error",t),new Error("Error when checkout, please check your payload");case 5:return[2]}})})},e.prototype.instantCheckout=function(n){return __awaiter(this,void 0,void 0,function(){var t;return __generator(this,function(e){switch(e.label){case 0:return this.config?[3,2]:[4,this.initConfig()];case 1:e.sent(),e.label=2;case 2:return e.trys.push([2,4,,5]),[4,axios.post("".concat(this.config.baseApiUri,"/koomipay/instant-checkout"),n,{headers:{"X-API-KEY":this.apiKey}})];case 3:return[2,e.sent()];case 4:throw t=e.sent(),console.log("[DEBUG] Instant Checkout error",t),new Error("Error when checkout, please check your payload");case 5:return[2]}})})},e}();exports.CheckoutContainer=CheckoutContainer,exports.createClient=createClient,module.exports=Object.assign(exports.default||{},exports);
+"use strict";var jsxRuntime=require("react/jsx-runtime"),react=require("react"),AdyenCheckout=require("@adyen/adyen-web"),axios=require("axios"),__assign=function(){return(__assign=Object.assign||function(e){for(var t,n=1,r=arguments.length;n<r;n++)for(var s in t=arguments[n])Object.prototype.hasOwnProperty.call(t,s)&&(e[s]=t[s]);return e}).apply(this,arguments)};function __awaiter(e,o,a,c){return new(a=a||Promise)(function(n,t){function r(e){try{i(c.next(e))}catch(e){t(e)}}function s(e){try{i(c.throw(e))}catch(e){t(e)}}function i(e){var t;e.done?n(e.value):((t=e.value)instanceof a?t:new a(function(e){e(t)})).then(r,s)}i((c=c.apply(e,o||[])).next())})}function __generator(r,s){var i,o,a,c={label:0,sent:function(){if(1&a[0])throw a[1];return a[1]},trys:[],ops:[]},l={next:e(0),throw:e(1),return:e(2)};return"function"==typeof Symbol&&(l[Symbol.iterator]=function(){return this}),l;function e(n){return function(e){var t=[n,e];if(i)throw new TypeError("Generator is already executing.");for(;c=l&&t[l=0]?0:c;)try{if(i=1,o&&(a=2&t[0]?o.return:t[0]?o.throw||((a=o.return)&&a.call(o),0):o.next)&&!(a=a.call(o,t[1])).done)return a;switch(o=0,(t=a?[2&t[0],a.value]:t)[0]){case 0:case 1:a=t;break;case 4:return c.label++,{value:t[1],done:!1};case 5:c.label++,o=t[1],t=[0];continue;case 7:t=c.ops.pop(),c.trys.pop();continue;default:if(!(a=0<(a=c.trys).length&&a[a.length-1])&&(6===t[0]||2===t[0])){c=0;continue}if(3===t[0]&&(!a||t[1]>a[0]&&t[1]<a[3]))c.label=t[1];else if(6===t[0]&&c.label<a[1])c.label=a[1],a=t;else{if(!(a&&c.label<a[2])){a[2]&&c.ops.pop(),c.trys.pop();continue}c.label=a[2],c.ops.push(t)}}t=s.call(r,c)}catch(e){t=[6,e],o=0}finally{i=a=0}if(5&t[0])throw t[1];return{value:t[0]?t[1]:void 0,done:!0}}}}function classNames(e){return Object.entries(e).map(function(e,t){return e[1]?e[0]:null}).filter(function(e){return e}).join(" ")}function classNameObject(e){return e?e.split(" ").reduce(function(e,t){return __assign(__assign({},e),((e={})[t]=!0,e))},{}):{}}function Label(e){var t=e.className,n=e.error,r=e.htmlFor,s=e.info,i=e.mandatory,e=e.children;return jsxRuntime.jsxs("div",__assign({className:"flex items-center justify-between"},{children:[jsxRuntime.jsxs("label",__assign({htmlFor:r,className:classNames(__assign(__assign({},classNameObject(t)),{"block text-base font-medium mb-1.5":!0,"text-gray-900 dark:text-white":!n,"text-red-600 dark:text-red-500":!!n}))},{children:[e,i&&jsxRuntime.jsx("span",__assign({className:"ml-1 text-red-500"},{children:"*"}))]})),s&&jsxRuntime.jsx("span",__assign({className:"text-sm leading-5 text-gray-500 dark:text-gray-500 ".concat(n&&"text-red-600")},{children:s}))]}))}function CardComponent(e){var t=e.client,n=e.onValid,r=e.onChange,s=e.paymentMethod,i=(e.amount,e.countryCode,react.useRef(null)),e=s||{},o=e.type,a=e.brands,e=react.useState(!0),c=e[0],l=e[1],e=react.useState({}),u=e[0],d=e[1],e=react.useState(null),h=e[0],p=e[1],e=react.useState([]),m=e[0],y=e[1],e=react.useState({}),f=e[0],x=e[1],e=react.useState({}),g=e[0],v=e[1];react.useEffect(function(){o&&(n(!1),l(!0),d({}),p(null),y([]),x({}),v({}),function(){__awaiter(this,void 0,void 0,function(){var t;return __generator(this,function(e){switch(e.label){case 0:return e.trys.push([0,2,,3]),[4,AdyenCheckout(j)];case 1:return t=e.sent(),i.current&&t.create("securedfields",{type:o,brands:a,styles:{error:{color:"red"},validated:{color:"green"},placeholder:{color:"#d8d8d8"}},onLoad:function(){l(!0)},onConfigSuccess:function(){l(!1)},onFocus:function(e){var e=e||{},t=e.focus,e=e.fieldType;p(t?e:null)},onBinLookup:function(e){e=(e||{}).detectedBrands;y(e||[])}}).mount(i.current),[3,3];case 2:return t=e.sent(),"development"===process.env.NODE_ENV&&console.log("[ERROR] Handle create checkout error: ",t),[3,3];case 3:return[2]}})})}())},[o]),react.useEffect(function(){var e;u&&"function"==typeof n&&(e=!!(u.encryptedCardNumber&&u.encryptedExpiryMonth&&u.encryptedExpiryYear&&u.encryptedSecurityCode),n(e),r({type:u.type,brand:u.brand,encryptedCardNumber:u.encryptedCardNumber,encryptedExpiryMonth:u.encryptedExpiryMonth,encryptedExpiryYear:u.encryptedExpiryYear,encryptedSecurityCode:u.encryptedSecurityCode,cardholder:u.cardholder,browserInfo:u.browserInfo}))},[u]);var e=t.getConfig(),j={locale:e.locale||"en_US",environment:e.environment,clientKey:e.clientKey,analytics:{enabled:!1},onChange:function(e){var t=(e=e||{}).data,n=e.valid,e=e.errors;d(Object.assign(!!t&&t.paymentMethod||{},{browserInfo:!!t&&t.browserInfo||{}})),v(Object.assign(__assign(__assign({},n||{}),{encryptedExpiryDate:n.encryptedExpiryMonth&&n.encryptedExpiryYear}))),x(e||{})}};return s?jsxRuntime.jsxs("div",__assign({className:classNames({"relative transition-all":!0,"h-96 max-h-96":!!c,"h-auto max-h-120":!c})},{children:[jsxRuntime.jsxs("div",__assign({className:"flex my-3 space-x-3"},{children:[jsxRuntime.jsx(CheckoutCardLogo,{active:m.includes("visa"),logoUrl:"logo/visa.svg",client:t}),jsxRuntime.jsx(CheckoutCardLogo,{active:m.includes("mc"),logoUrl:"logo/mastercard.svg",client:t}),jsxRuntime.jsx(CheckoutCardLogo,{active:m.includes("amex"),logoUrl:"logo/american-express.svg",client:t})]})),jsxRuntime.jsxs("div",__assign({ref:i,className:classNames({"opacity-0":!!c})},{children:[jsxRuntime.jsxs("div",{children:[jsxRuntime.jsx(Label,__assign({htmlFor:"cardNumber"},{children:"Card number"})),jsxRuntime.jsx(CheckoutInputField,{field:"encryptedCardNumber",focus:"encryptedCardNumber"===h,valids:g,errors:f})]}),jsxRuntime.jsxs("div",__assign({className:"grid grid-cols-2 gap-6"},{children:[jsxRuntime.jsxs("div",{children:[jsxRuntime.jsx(Label,__assign({htmlFor:"expiryDate"},{children:"Expiry date"})),jsxRuntime.jsx(CheckoutInputField,{field:"encryptedExpiryDate",focus:"encryptedExpiryDate"===h,valids:g,errors:f})]}),jsxRuntime.jsxs("div",{children:[jsxRuntime.jsx(Label,__assign({htmlFor:"securityCode"},{children:"Security Code (CVV/CVC)"})),jsxRuntime.jsx(CheckoutInputField,{field:"encryptedSecurityCode",focus:"encryptedSecurityCode"===h,valids:g,errors:f})]})]}))]})),jsxRuntime.jsxs("div",__assign({className:classNames({"absolute inset-0 flex flex-col gap-3 items-center justify-center":!0,"opacity-0 pointer-events-none":!c})},{children:[jsxRuntime.jsx("div",__assign({className:"w-16 h-16"},{children:jsxRuntime.jsxs("svg",__assign({className:"w-full h-full animate-spin",xmlns:"http://www.w3.org/2000/svg",fill:"none",viewBox:"0 0 24 24"},{children:[jsxRuntime.jsx("circle",{className:"opacity-25",cx:"12",cy:"12",r:"10",stroke:"currentColor",strokeWidth:"4"}),jsxRuntime.jsx("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"})]}))})),jsxRuntime.jsx("p",{children:"Loading"})]}))]})):null}function resolveLogoUrl(e,t){return"".concat(t.assetHost,"/").concat(e)}function CheckoutCardLogo(e){var t=e.active,n=e.logoUrl,e=e.client.getConfig();return jsxRuntime.jsx("div",__assign({className:classNames({"h-10":!0,"grayscale opacity-30":!t})},{children:jsxRuntime.jsx("img",{className:"object-contain w-full h-full",src:resolveLogoUrl(n,e)})}))}function CheckoutInputField(e){var t=e.field,n=e.focus,r=e.valids,e=e.errors,e=!!e&&e[t],r=!!r&&r[t],s=null!=e,e=!!s&&e.errorMessage;return jsxRuntime.jsxs("div",__assign({className:"relative mb-4"},{children:[jsxRuntime.jsx("div",{className:classNames({"h-12 border px-3 py-1.5 rounded-md overflow-hidden":!0,"border-gray-200":!n&&!s,"bg-green-50 border-green-700":!!r,"bg-red-50 border-red-500":!n&&!!s&&!r,"bg-blue-50 border-blue-500 ring-2 ring-blue-200":!!n}),"data-cse":t}),!!r&&jsxRuntime.jsx("div",__assign({className:"absolute top-0 bottom-0 flex items-center text-green-700 right-3"},{children:jsxRuntime.jsxs("svg",__assign({className:"w-6 h-6",xmlns:"http://www.w3.org/2000/svg",viewBox:"0 0 24 24",fill:"currentColor"},{children:[jsxRuntime.jsx("path",{d:"M0 0h24v24H0z",fill:"none"}),jsxRuntime.jsx("path",{d:"M9 16.2L4.8 12l-1.4 1.4L9 19 21 7l-1.4-1.4L9 16.2z"})]}))})),!!e&&jsxRuntime.jsx("p",__assign({className:"mt-1.5 text-red-500 text-sm leading-tight"},{children:e}))]}))}function CheckoutContainer(e){var t=e.client,n=e.paymentMethod,r=e.amount,s=e.onValid,i=e.onChange,e=e.countryCode;return jsxRuntime.jsx("div",{children:jsxRuntime.jsx("div",__assign({className:classNames({"border-t border-gray-200 mt-6 py-3":!0})},{children:n?jsxRuntime.jsx(jsxRuntime.Fragment,{children:"scheme"===n.type&&jsxRuntime.jsx(CardComponent,{client:t,paymentMethod:n,onValid:s,onChange:i,amount:r,countryCode:e})}):null}))})}function createClient(e){e=e.apiKey;return new KoomiPayClient({apiKey:e})}Label.defaultProps={error:!1},CheckoutContainer.defaultProps={onValid:function(){},onChange:function(){}};var API_URLs={dev:void 0,test:void 0,live:void 0},KoomiPayClient=function(){function e(e){if(!e.apiKey)throw new Error("API Key not found");var t=e.apiKey.split(".")[0];if(!API_URLs[t])throw new Error("Invalid API Key");this.apiKey=e.apiKey,this.apiUrl=API_URLs[t],this.config=null}return e.prototype.getConfig=function(){if(this.config)return this.config;throw new Error("Please init config first")},e.prototype.getApiKey=function(){return this.apiKey},e.prototype.initConfig=function(){return __awaiter(this,void 0,void 0,function(){var t,n,r;return __generator(this,function(e){switch(e.label){case 0:return e.trys.push([0,2,,3]),[4,axios.get("".concat(this.apiUrl,"/koomipay/payment-config"),{headers:{"X-API-KEY":this.apiKey}})];case 1:if(n=e.sent(),n=n.data,r=n.success,t=n.error,n=n.data,r)return this.config=n,[3,3];throw new Error(t);case 2:throw r=e.sent(),console.log("[DEBUG] Initial config error",r),new Error("Error when init config, please check your API Key");case 3:return[2]}})})},e.prototype.getPaymentMethods=function(r){return __awaiter(this,void 0,void 0,function(){var t,n;return __generator(this,function(e){switch(e.label){case 0:return this.config?[3,2]:[4,this.initConfig()];case 1:e.sent(),e.label=2;case 2:t={},"amount"in r&&void 0!==r.amount&&null!==r.amount&&(t.amount=r.amount),"countryCode"in r&&void 0!==r.countryCode&&null!==r.countryCode&&(t.countryCode=r.countryCode),e.label=3;case 3:return e.trys.push([3,5,,6]),[4,axios.post("".concat(this.config.baseApiUri,"/koomipay/payment-methods"),t,{headers:{"X-API-KEY":this.apiKey}})];case 4:return[2,e.sent().data];case 5:throw n=e.sent(),console.log("[DEBUG] Generate payment method error",n),new Error("Error when get payment methods, please check your payload");case 6:return[2]}})})},e.prototype.checkout=function(n){return __awaiter(this,void 0,void 0,function(){var t;return __generator(this,function(e){switch(e.label){case 0:return this.config?[3,2]:[4,this.initConfig()];case 1:e.sent(),e.label=2;case 2:return e.trys.push([2,4,,5]),[4,axios.post("".concat(this.config.baseApiUri,"/koomipay/checkout"),n,{headers:{"X-API-KEY":this.apiKey}})];case 3:return[2,e.sent()];case 4:throw t=e.sent(),console.log("[DEBUG] Checkout error",t),new Error("Error when checkout, please check your payload");case 5:return[2]}})})},e.prototype.instantCheckout=function(n){return __awaiter(this,void 0,void 0,function(){var t;return __generator(this,function(e){switch(e.label){case 0:return this.config?[3,2]:[4,this.initConfig()];case 1:e.sent(),e.label=2;case 2:return e.trys.push([2,4,,5]),[4,axios.post("".concat(this.config.baseApiUri,"/koomipay/instant-checkout"),n,{headers:{"X-API-KEY":this.apiKey}})];case 3:return[2,e.sent()];case 4:throw t=e.sent(),console.log("[DEBUG] Instant Checkout error",t),new Error("Error when checkout, please check your payload");case 5:return[2]}})})},e}();exports.CheckoutContainer=CheckoutContainer,exports.createClient=createClient,module.exports=Object.assign(exports.default||{},exports);

package/dist/es/index.js

@@ -1 +1 @@
-import{jsxs,jsx,Fragment}from"react/jsx-runtime";import{useRef,useState,useEffect}from"react";import AdyenCheckout from"@adyen/adyen-web";import axios from"axios";var __assign=function(){return(__assign=Object.assign||function(e){for(var t,r=1,n=arguments.length;r<n;r++)for(var o in t=arguments[r])Object.prototype.hasOwnProperty.call(t,o)&&(e[o]=t[o]);return e}).apply(this,arguments)};function __awaiter(e,a,i,c){return new(i=i||Promise)(function(r,t){function n(e){try{s(c.next(e))}catch(e){t(e)}}function o(e){try{s(c.throw(e))}catch(e){t(e)}}function s(e){var t;e.done?r(e.value):((t=e.value)instanceof i?t:new i(function(e){e(t)})).then(n,o)}s((c=c.apply(e,a||[])).next())})}function __generator(n,o){var s,a,i,c={label:0,sent:function(){if(1&i[0])throw i[1];return i[1]},trys:[],ops:[]},l={next:e(0),throw:e(1),return:e(2)};return"function"==typeof Symbol&&(l[Symbol.iterator]=function(){return this}),l;function e(r){return function(e){var t=[r,e];if(s)throw new TypeError("Generator is already executing.");for(;c=l&&t[l=0]?0:c;)try{if(s=1,a&&(i=2&t[0]?a.return:t[0]?a.throw||((i=a.return)&&i.call(a),0):a.next)&&!(i=i.call(a,t[1])).done)return i;switch(a=0,(t=i?[2&t[0],i.value]:t)[0]){case 0:case 1:i=t;break;case 4:return c.label++,{value:t[1],done:!1};case 5:c.label++,a=t[1],t=[0];continue;case 7:t=c.ops.pop(),c.trys.pop();continue;default:if(!(i=0<(i=c.trys).length&&i[i.length-1])&&(6===t[0]||2===t[0])){c=0;continue}if(3===t[0]&&(!i||t[1]>i[0]&&t[1]<i[3]))c.label=t[1];else if(6===t[0]&&c.label<i[1])c.label=i[1],i=t;else{if(!(i&&c.label<i[2])){i[2]&&c.ops.pop(),c.trys.pop();continue}c.label=i[2],c.ops.push(t)}}t=o.call(n,c)}catch(e){t=[6,e],a=0}finally{s=i=0}if(5&t[0])throw t[1];return{value:t[0]?t[1]:void 0,done:!0}}}}function classNames(e){return Object.entries(e).map(function(e,t){return e[1]?e[0]:null}).filter(function(e){return e}).join(" ")}function classNameObject(e){return e?e.split(" ").reduce(function(e,t){return __assign(__assign({},e),((e={})[t]=!0,e))},{}):{}}function Label(e){var t=e.className,r=e.error,n=e.htmlFor,o=e.info,s=e.mandatory,e=e.children;return jsxs("div",__assign({className:"flex items-center justify-between"},{children:[jsxs("label",__assign({htmlFor:n,className:classNames(__assign(__assign({},classNameObject(t)),{"block text-base font-medium mb-1.5":!0,"text-gray-900 dark:text-white":!r,"text-red-600 dark:text-red-500":!!r}))},{children:[e,s&&jsx("span",__assign({className:"ml-1 text-red-500"},{children:"*"}))]})),o&&jsx("span",__assign({className:"text-sm leading-5 text-gray-500 dark:text-gray-500 ".concat(r&&"text-red-600")},{children:o}))]}))}function CardComponent(e){var t=e.client,r=e.onValid,n=e.onChange,o=e.paymentMethod,s=(e.amount,e.countryCode,useRef(null)),e=o||{},a=e.type,i=e.brands,e=useState(!0),c=e[0],l=e[1],e=useState({}),u=e[0],d=e[1],e=useState(null),h=e[0],p=e[1],e=useState([]),y=e[0],f=e[1],e=useState({}),g=e[0],m=e[1],e=useState({}),x=e[0],v=e[1];useEffect(function(){a&&(r(!1),l(!0),d({}),p(null),f([]),m({}),v({}),function(){__awaiter(this,void 0,void 0,function(){var t;return __generator(this,function(e){switch(e.label){case 0:return e.trys.push([0,2,,3]),[4,AdyenCheckout(_)];case 1:return t=e.sent(),s.current&&t.create("securedfields",{type:a,brands:i,styles:{error:{color:"red"},validated:{color:"green"},placeholder:{color:"#d8d8d8"}},onLoad:function(){l(!0)},onConfigSuccess:function(){l(!1)},onFocus:function(e){var e=e||{},t=e.focus,e=e.fieldType;p(t?e:null)},onBinLookup:function(e){e=(e||{}).detectedBrands;f(e||[])}}).mount(s.current),[3,3];case 2:return t=e.sent(),"development"===process.env.NODE_ENV&&console.log("[ERROR] Handle create checkout error: ",t),[3,3];case 3:return[2]}})})}())},[a]),useEffect(function(){var e;u&&"function"==typeof r&&(e=!!(u.encryptedCardNumber&&u.encryptedExpiryMonth&&u.encryptedExpiryYear&&u.encryptedSecurityCode),r(e),n({type:u.type,brand:u.brand,encryptedCardNumber:u.encryptedCardNumber,encryptedExpiryMonth:u.encryptedExpiryMonth,encryptedExpiryYear:u.encryptedExpiryYear,encryptedSecurityCode:u.encryptedSecurityCode,cardholder:u.cardholder,browserInfo:u.browserInfo}))},[u]);var e=t.getConfig(),_={locale:e.locale||"en_US",environment:e.environment,clientKey:e.clientKey,analytics:{enabled:!1},onChange:function(e){var t=(e=e||{}).data,r=e.valid,e=e.errors;d(Object.assign(!!t&&t.paymentMethod||{},{browserInfo:!!t&&t.browserInfo||{}})),v(Object.assign(__assign(__assign({},r||{}),{encryptedExpiryDate:r.encryptedExpiryMonth&&r.encryptedExpiryYear}))),m(e||{})}};return o?jsxs("div",__assign({className:classNames({"relative transition-all":!0,"h-96 max-h-96":!!c,"h-auto max-h-120":!c})},{children:[jsxs("div",__assign({className:"flex my-3 space-x-3"},{children:[jsx(CheckoutCardLogo,{active:y.includes("visa"),logoUrl:"logo/visa.svg",client:t}),jsx(CheckoutCardLogo,{active:y.includes("mc"),logoUrl:"logo/mastercard.svg",client:t}),jsx(CheckoutCardLogo,{active:y.includes("amex"),logoUrl:"logo/american-express.svg",client:t})]})),jsxs("div",__assign({ref:s,className:classNames({"opacity-0":!!c})},{children:[jsxs("div",{children:[jsx(Label,__assign({htmlFor:"cardNumber"},{children:"Card number"})),jsx(CheckoutInputField,{field:"encryptedCardNumber",focus:"encryptedCardNumber"===h,valids:x,errors:g})]}),jsxs("div",__assign({className:"grid grid-cols-2 gap-6"},{children:[jsxs("div",{children:[jsx(Label,__assign({htmlFor:"expiryDate"},{children:"Expiry date"})),jsx(CheckoutInputField,{field:"encryptedExpiryDate",focus:"encryptedExpiryDate"===h,valids:x,errors:g})]}),jsxs("div",{children:[jsx(Label,__assign({htmlFor:"securityCode"},{children:"Security Code (CVV/CVC)"})),jsx(CheckoutInputField,{field:"encryptedSecurityCode",focus:"encryptedSecurityCode"===h,valids:x,errors:g})]})]}))]})),jsxs("div",__assign({className:classNames({"absolute inset-0 flex flex-col gap-3 items-center justify-center":!0,"opacity-0 pointer-events-none":!c})},{children:[jsx("div",__assign({className:"w-16 h-16"},{children:jsxs("svg",__assign({className:"w-full h-full animate-spin",xmlns:"http://www.w3.org/2000/svg",fill:"none",viewBox:"0 0 24 24"},{children:[jsx("circle",{className:"opacity-25",cx:"12",cy:"12",r:"10",stroke:"currentColor",strokeWidth:"4"}),jsx("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"})]}))})),jsx("p",{children:"Loading"})]}))]})):null}function resolveLogoUrl(e,t){return"".concat(t.assetHost,"/").concat(e)}function CheckoutCardLogo(e){var t=e.active,r=e.logoUrl,e=e.client.getConfig();return jsx("div",__assign({className:classNames({"h-10":!0,"grayscale opacity-30":!t})},{children:jsx("img",{className:"object-contain w-full h-full",src:resolveLogoUrl(r,e)})}))}function CheckoutInputField(e){var t=e.field,r=e.focus,n=e.valids,e=e.errors,e=!!e&&e[t],n=!!n&&n[t],o=null!=e,e=!!o&&e.errorMessage;return jsxs("div",__assign({className:"relative mb-4"},{children:[jsx("div",{className:classNames({"h-12 border px-3 py-1.5 rounded-md overflow-hidden":!0,"border-gray-200":!r&&!o,"bg-green-50 border-green-700":!!n,"bg-red-50 border-red-500":!r&&!!o&&!n,"bg-blue-50 border-blue-500 ring-2 ring-blue-200":!!r}),"data-cse":t}),!!n&&jsx("div",__assign({className:"absolute top-0 bottom-0 flex items-center text-green-700 right-3"},{children:jsxs("svg",__assign({className:"w-6 h-6",xmlns:"http://www.w3.org/2000/svg",viewBox:"0 0 24 24",fill:"currentColor"},{children:[jsx("path",{d:"M0 0h24v24H0z",fill:"none"}),jsx("path",{d:"M9 16.2L4.8 12l-1.4 1.4L9 19 21 7l-1.4-1.4L9 16.2z"})]}))})),!!e&&jsx("p",__assign({className:"mt-1.5 text-red-500 text-sm leading-tight"},{children:e}))]}))}function CheckoutContainer(e){var t=e.client,r=e.paymentMethod,n=e.amount,o=e.onValid,s=e.onChange,e=e.countryCode;return jsx("div",{children:jsx("div",__assign({className:classNames({"border-t border-gray-200 mt-6 py-3":!0})},{children:r?jsx(Fragment,{children:"scheme"===r.type&&jsx(CardComponent,{client:t,paymentMethod:r,onValid:o,onChange:s,amount:n,countryCode:e})}):null}))})}function createClient(e){e=e.apiKey;return new KoomiPayClient({apiKey:e})}Label.defaultProps={error:!1},CheckoutContainer.defaultProps={onValid:function(){},onChange:function(){}};var API_URLs={dev:"http://localhost:32022",test:"https://api-pay-demo.koomi.app",live:"https://api-pay-demo.koomi.app"},KoomiPayClient=function(){function e(e){if(!e.apiKey)throw new Error("API Key not found");var t=e.apiKey.split(".")[0];if(!API_URLs[t])throw new Error("Invalid API Key");this.apiKey=e.apiKey,this.apiUrl=API_URLs[t],this.config=null}return e.prototype.getConfig=function(){if(this.config)return this.config;throw new Error("Please init config first")},e.prototype.getApiKey=function(){return this.apiKey},e.prototype.initConfig=function(){return __awaiter(this,void 0,void 0,function(){var t,r,n;return __generator(this,function(e){switch(e.label){case 0:return e.trys.push([0,2,,3]),[4,axios.get("".concat(this.apiUrl,"/koomipay/payment-config"),{headers:{"X-API-KEY":this.apiKey}})];case 1:if(r=e.sent(),r=r.data,n=r.success,t=r.error,r=r.data,n)return this.config=r,[3,3];throw new Error(t);case 2:throw n=e.sent(),console.log("[DEBUG] Initial config error",n),new Error("Error when init config, please check your API Key");case 3:return[2]}})})},e.prototype.getPaymentMethods=function(n){return __awaiter(this,void 0,void 0,function(){var t,r;return __generator(this,function(e){switch(e.label){case 0:return this.config?[3,2]:[4,this.initConfig()];case 1:e.sent(),e.label=2;case 2:t={},"amount"in n&&void 0!==n.amount&&null!==n.amount&&(t.amount=n.amount),"countryCode"in n&&void 0!==n.countryCode&&null!==n.countryCode&&(t.countryCode=n.countryCode),e.label=3;case 3:return e.trys.push([3,5,,6]),[4,axios.post("".concat(this.config.baseApiUri,"/koomipay/payment-methods"),t,{headers:{"X-API-KEY":this.apiKey}})];case 4:return[2,e.sent().data];case 5:throw r=e.sent(),console.log("[DEBUG] Generate payment method error",r),new Error("Error when get payment methods, please check your payload");case 6:return[2]}})})},e.prototype.checkout=function(r){return __awaiter(this,void 0,void 0,function(){var t;return __generator(this,function(e){switch(e.label){case 0:return this.config?[3,2]:[4,this.initConfig()];case 1:e.sent(),e.label=2;case 2:return e.trys.push([2,4,,5]),[4,axios.post("".concat(this.config.baseApiUri,"/koomipay/checkout"),r,{headers:{"X-API-KEY":this.apiKey}})];case 3:return[2,e.sent()];case 4:throw t=e.sent(),console.log("[DEBUG] Checkout error",t),new Error("Error when checkout, please check your payload");case 5:return[2]}})})},e.prototype.instantCheckout=function(r){return __awaiter(this,void 0,void 0,function(){var t;return __generator(this,function(e){switch(e.label){case 0:return this.config?[3,2]:[4,this.initConfig()];case 1:e.sent(),e.label=2;case 2:return e.trys.push([2,4,,5]),[4,axios.post("".concat(this.config.baseApiUri,"/koomipay/instant-checkout"),r,{headers:{"X-API-KEY":this.apiKey}})];case 3:return[2,e.sent()];case 4:throw t=e.sent(),console.log("[DEBUG] Instant Checkout error",t),new Error("Error when checkout, please check your payload");case 5:return[2]}})})},e}();export{CheckoutContainer,createClient};
+import{jsxs,jsx,Fragment}from"react/jsx-runtime";import{useRef,useState,useEffect}from"react";import AdyenCheckout from"@adyen/adyen-web";import axios from"axios";var __assign=function(){return(__assign=Object.assign||function(e){for(var t,r=1,n=arguments.length;r<n;r++)for(var o in t=arguments[r])Object.prototype.hasOwnProperty.call(t,o)&&(e[o]=t[o]);return e}).apply(this,arguments)};function __awaiter(e,a,i,c){return new(i=i||Promise)(function(r,t){function n(e){try{s(c.next(e))}catch(e){t(e)}}function o(e){try{s(c.throw(e))}catch(e){t(e)}}function s(e){var t;e.done?r(e.value):((t=e.value)instanceof i?t:new i(function(e){e(t)})).then(n,o)}s((c=c.apply(e,a||[])).next())})}function __generator(n,o){var s,a,i,c={label:0,sent:function(){if(1&i[0])throw i[1];return i[1]},trys:[],ops:[]},l={next:e(0),throw:e(1),return:e(2)};return"function"==typeof Symbol&&(l[Symbol.iterator]=function(){return this}),l;function e(r){return function(e){var t=[r,e];if(s)throw new TypeError("Generator is already executing.");for(;c=l&&t[l=0]?0:c;)try{if(s=1,a&&(i=2&t[0]?a.return:t[0]?a.throw||((i=a.return)&&i.call(a),0):a.next)&&!(i=i.call(a,t[1])).done)return i;switch(a=0,(t=i?[2&t[0],i.value]:t)[0]){case 0:case 1:i=t;break;case 4:return c.label++,{value:t[1],done:!1};case 5:c.label++,a=t[1],t=[0];continue;case 7:t=c.ops.pop(),c.trys.pop();continue;default:if(!(i=0<(i=c.trys).length&&i[i.length-1])&&(6===t[0]||2===t[0])){c=0;continue}if(3===t[0]&&(!i||t[1]>i[0]&&t[1]<i[3]))c.label=t[1];else if(6===t[0]&&c.label<i[1])c.label=i[1],i=t;else{if(!(i&&c.label<i[2])){i[2]&&c.ops.pop(),c.trys.pop();continue}c.label=i[2],c.ops.push(t)}}t=o.call(n,c)}catch(e){t=[6,e],a=0}finally{s=i=0}if(5&t[0])throw t[1];return{value:t[0]?t[1]:void 0,done:!0}}}}function classNames(e){return Object.entries(e).map(function(e,t){return e[1]?e[0]:null}).filter(function(e){return e}).join(" ")}function classNameObject(e){return e?e.split(" ").reduce(function(e,t){return __assign(__assign({},e),((e={})[t]=!0,e))},{}):{}}function Label(e){var t=e.className,r=e.error,n=e.htmlFor,o=e.info,s=e.mandatory,e=e.children;return jsxs("div",__assign({className:"flex items-center justify-between"},{children:[jsxs("label",__assign({htmlFor:n,className:classNames(__assign(__assign({},classNameObject(t)),{"block text-base font-medium mb-1.5":!0,"text-gray-900 dark:text-white":!r,"text-red-600 dark:text-red-500":!!r}))},{children:[e,s&&jsx("span",__assign({className:"ml-1 text-red-500"},{children:"*"}))]})),o&&jsx("span",__assign({className:"text-sm leading-5 text-gray-500 dark:text-gray-500 ".concat(r&&"text-red-600")},{children:o}))]}))}function CardComponent(e){var t=e.client,r=e.onValid,n=e.onChange,o=e.paymentMethod,s=(e.amount,e.countryCode,useRef(null)),e=o||{},a=e.type,i=e.brands,e=useState(!0),c=e[0],l=e[1],e=useState({}),u=e[0],d=e[1],e=useState(null),h=e[0],p=e[1],e=useState([]),f=e[0],y=e[1],e=useState({}),g=e[0],m=e[1],e=useState({}),x=e[0],v=e[1];useEffect(function(){a&&(r(!1),l(!0),d({}),p(null),y([]),m({}),v({}),function(){__awaiter(this,void 0,void 0,function(){var t;return __generator(this,function(e){switch(e.label){case 0:return e.trys.push([0,2,,3]),[4,AdyenCheckout(_)];case 1:return t=e.sent(),s.current&&t.create("securedfields",{type:a,brands:i,styles:{error:{color:"red"},validated:{color:"green"},placeholder:{color:"#d8d8d8"}},onLoad:function(){l(!0)},onConfigSuccess:function(){l(!1)},onFocus:function(e){var e=e||{},t=e.focus,e=e.fieldType;p(t?e:null)},onBinLookup:function(e){e=(e||{}).detectedBrands;y(e||[])}}).mount(s.current),[3,3];case 2:return t=e.sent(),"development"===process.env.NODE_ENV&&console.log("[ERROR] Handle create checkout error: ",t),[3,3];case 3:return[2]}})})}())},[a]),useEffect(function(){var e;u&&"function"==typeof r&&(e=!!(u.encryptedCardNumber&&u.encryptedExpiryMonth&&u.encryptedExpiryYear&&u.encryptedSecurityCode),r(e),n({type:u.type,brand:u.brand,encryptedCardNumber:u.encryptedCardNumber,encryptedExpiryMonth:u.encryptedExpiryMonth,encryptedExpiryYear:u.encryptedExpiryYear,encryptedSecurityCode:u.encryptedSecurityCode,cardholder:u.cardholder,browserInfo:u.browserInfo}))},[u]);var e=t.getConfig(),_={locale:e.locale||"en_US",environment:e.environment,clientKey:e.clientKey,analytics:{enabled:!1},onChange:function(e){var t=(e=e||{}).data,r=e.valid,e=e.errors;d(Object.assign(!!t&&t.paymentMethod||{},{browserInfo:!!t&&t.browserInfo||{}})),v(Object.assign(__assign(__assign({},r||{}),{encryptedExpiryDate:r.encryptedExpiryMonth&&r.encryptedExpiryYear}))),m(e||{})}};return o?jsxs("div",__assign({className:classNames({"relative transition-all":!0,"h-96 max-h-96":!!c,"h-auto max-h-120":!c})},{children:[jsxs("div",__assign({className:"flex my-3 space-x-3"},{children:[jsx(CheckoutCardLogo,{active:f.includes("visa"),logoUrl:"logo/visa.svg",client:t}),jsx(CheckoutCardLogo,{active:f.includes("mc"),logoUrl:"logo/mastercard.svg",client:t}),jsx(CheckoutCardLogo,{active:f.includes("amex"),logoUrl:"logo/american-express.svg",client:t})]})),jsxs("div",__assign({ref:s,className:classNames({"opacity-0":!!c})},{children:[jsxs("div",{children:[jsx(Label,__assign({htmlFor:"cardNumber"},{children:"Card number"})),jsx(CheckoutInputField,{field:"encryptedCardNumber",focus:"encryptedCardNumber"===h,valids:x,errors:g})]}),jsxs("div",__assign({className:"grid grid-cols-2 gap-6"},{children:[jsxs("div",{children:[jsx(Label,__assign({htmlFor:"expiryDate"},{children:"Expiry date"})),jsx(CheckoutInputField,{field:"encryptedExpiryDate",focus:"encryptedExpiryDate"===h,valids:x,errors:g})]}),jsxs("div",{children:[jsx(Label,__assign({htmlFor:"securityCode"},{children:"Security Code (CVV/CVC)"})),jsx(CheckoutInputField,{field:"encryptedSecurityCode",focus:"encryptedSecurityCode"===h,valids:x,errors:g})]})]}))]})),jsxs("div",__assign({className:classNames({"absolute inset-0 flex flex-col gap-3 items-center justify-center":!0,"opacity-0 pointer-events-none":!c})},{children:[jsx("div",__assign({className:"w-16 h-16"},{children:jsxs("svg",__assign({className:"w-full h-full animate-spin",xmlns:"http://www.w3.org/2000/svg",fill:"none",viewBox:"0 0 24 24"},{children:[jsx("circle",{className:"opacity-25",cx:"12",cy:"12",r:"10",stroke:"currentColor",strokeWidth:"4"}),jsx("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"})]}))})),jsx("p",{children:"Loading"})]}))]})):null}function resolveLogoUrl(e,t){return"".concat(t.assetHost,"/").concat(e)}function CheckoutCardLogo(e){var t=e.active,r=e.logoUrl,e=e.client.getConfig();return jsx("div",__assign({className:classNames({"h-10":!0,"grayscale opacity-30":!t})},{children:jsx("img",{className:"object-contain w-full h-full",src:resolveLogoUrl(r,e)})}))}function CheckoutInputField(e){var t=e.field,r=e.focus,n=e.valids,e=e.errors,e=!!e&&e[t],n=!!n&&n[t],o=null!=e,e=!!o&&e.errorMessage;return jsxs("div",__assign({className:"relative mb-4"},{children:[jsx("div",{className:classNames({"h-12 border px-3 py-1.5 rounded-md overflow-hidden":!0,"border-gray-200":!r&&!o,"bg-green-50 border-green-700":!!n,"bg-red-50 border-red-500":!r&&!!o&&!n,"bg-blue-50 border-blue-500 ring-2 ring-blue-200":!!r}),"data-cse":t}),!!n&&jsx("div",__assign({className:"absolute top-0 bottom-0 flex items-center text-green-700 right-3"},{children:jsxs("svg",__assign({className:"w-6 h-6",xmlns:"http://www.w3.org/2000/svg",viewBox:"0 0 24 24",fill:"currentColor"},{children:[jsx("path",{d:"M0 0h24v24H0z",fill:"none"}),jsx("path",{d:"M9 16.2L4.8 12l-1.4 1.4L9 19 21 7l-1.4-1.4L9 16.2z"})]}))})),!!e&&jsx("p",__assign({className:"mt-1.5 text-red-500 text-sm leading-tight"},{children:e}))]}))}function CheckoutContainer(e){var t=e.client,r=e.paymentMethod,n=e.amount,o=e.onValid,s=e.onChange,e=e.countryCode;return jsx("div",{children:jsx("div",__assign({className:classNames({"border-t border-gray-200 mt-6 py-3":!0})},{children:r?jsx(Fragment,{children:"scheme"===r.type&&jsx(CardComponent,{client:t,paymentMethod:r,onValid:o,onChange:s,amount:n,countryCode:e})}):null}))})}function createClient(e){e=e.apiKey;return new KoomiPayClient({apiKey:e})}Label.defaultProps={error:!1},CheckoutContainer.defaultProps={onValid:function(){},onChange:function(){}};var API_URLs={dev:void 0,test:void 0,live:void 0},KoomiPayClient=function(){function e(e){if(!e.apiKey)throw new Error("API Key not found");var t=e.apiKey.split(".")[0];if(!API_URLs[t])throw new Error("Invalid API Key");this.apiKey=e.apiKey,this.apiUrl=API_URLs[t],this.config=null}return e.prototype.getConfig=function(){if(this.config)return this.config;throw new Error("Please init config first")},e.prototype.getApiKey=function(){return this.apiKey},e.prototype.initConfig=function(){return __awaiter(this,void 0,void 0,function(){var t,r,n;return __generator(this,function(e){switch(e.label){case 0:return e.trys.push([0,2,,3]),[4,axios.get("".concat(this.apiUrl,"/koomipay/payment-config"),{headers:{"X-API-KEY":this.apiKey}})];case 1:if(r=e.sent(),r=r.data,n=r.success,t=r.error,r=r.data,n)return this.config=r,[3,3];throw new Error(t);case 2:throw n=e.sent(),console.log("[DEBUG] Initial config error",n),new Error("Error when init config, please check your API Key");case 3:return[2]}})})},e.prototype.getPaymentMethods=function(n){return __awaiter(this,void 0,void 0,function(){var t,r;return __generator(this,function(e){switch(e.label){case 0:return this.config?[3,2]:[4,this.initConfig()];case 1:e.sent(),e.label=2;case 2:t={},"amount"in n&&void 0!==n.amount&&null!==n.amount&&(t.amount=n.amount),"countryCode"in n&&void 0!==n.countryCode&&null!==n.countryCode&&(t.countryCode=n.countryCode),e.label=3;case 3:return e.trys.push([3,5,,6]),[4,axios.post("".concat(this.config.baseApiUri,"/koomipay/payment-methods"),t,{headers:{"X-API-KEY":this.apiKey}})];case 4:return[2,e.sent().data];case 5:throw r=e.sent(),console.log("[DEBUG] Generate payment method error",r),new Error("Error when get payment methods, please check your payload");case 6:return[2]}})})},e.prototype.checkout=function(r){return __awaiter(this,void 0,void 0,function(){var t;return __generator(this,function(e){switch(e.label){case 0:return this.config?[3,2]:[4,this.initConfig()];case 1:e.sent(),e.label=2;case 2:return e.trys.push([2,4,,5]),[4,axios.post("".concat(this.config.baseApiUri,"/koomipay/checkout"),r,{headers:{"X-API-KEY":this.apiKey}})];case 3:return[2,e.sent()];case 4:throw t=e.sent(),console.log("[DEBUG] Checkout error",t),new Error("Error when checkout, please check your payload");case 5:return[2]}})})},e.prototype.instantCheckout=function(r){return __awaiter(this,void 0,void 0,function(){var t;return __generator(this,function(e){switch(e.label){case 0:return this.config?[3,2]:[4,this.initConfig()];case 1:e.sent(),e.label=2;case 2:return e.trys.push([2,4,,5]),[4,axios.post("".concat(this.config.baseApiUri,"/koomipay/instant-checkout"),r,{headers:{"X-API-KEY":this.apiKey}})];case 3:return[2,e.sent()];case 4:throw t=e.sent(),console.log("[DEBUG] Instant Checkout error",t),new Error("Error when checkout, please check your payload");case 5:return[2]}})})},e}();export{CheckoutContainer,createClient};

package/package.json

@@ -9,7 +9,7 @@
     "payments",
     "components"
   ],
-  "version": "1.0.14",
+  "version": "1.0.15",
   "description": "Koomipay react components",
   "main": "dist/cjs/index.js",
   "module": "dist/es/index.js",
@@ -33,7 +33,8 @@
     "minify": "concurrently \"npm run minify:cjs\" \"npm run minify:es\"",
     "minify:cjs": "uglifyjs --compress --mangle -o dist/cjs/index.js -- dist/cjs/index.js",
     "minify:es": "uglifyjs --compress --mangle -o dist/es/index.js -- dist/es/index.js",
-    "prepublishOnly": "npm run build",
+    "prepublishOnly": "npm run build && cp ../../README.md ./",
+    "postpack": "rm -rf ./README.md",
     "test": "echo \"Error: no test specified\" && exit 1"
   },
   "author": "Novitee Team",