@koomipay/react 1.0.14 → 1.0.16

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (4) hide show
  1. package/README.md +185 -0
  2. package/dist/cjs/index.js +1 -1
  3. package/dist/es/index.js +1 -1
  4. package/package.json +3 -2
package/README.md ADDED
@@ -0,0 +1,185 @@
1
+ # @koomipay/react
2
+
3
+ React components for
4
+ [Koomipay B2B payment service][koomipay-portal]
5
+
6
+ ## Requirements
7
+
8
+ The minimum supported version of React is v18.2.0. If you use an older version,
9
+ upgrade React to use this library.
10
+
11
+ ## Getting started
12
+
13
+ - [Try live demo here][live-demo]
14
+
15
+ ## How to use
16
+
17
+ First, install [@koomipay/react][koomipay-npm] using the following command
18
+
19
+ ```sh
20
+ npm install @koomipay/react --save
21
+ ```
22
+
23
+ ### Create Koomipay Client
24
+
25
+ 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]
26
+
27
+ ```jsx
28
+ import { createClient } from "@koomipay/react"
29
+
30
+ const koomipay = createClient({
31
+ apiKey: "your_checkout_api_key", // should put to env
32
+ })
33
+ ```
34
+
35
+ ### Get available Payment Methods
36
+
37
+ Then get all the available payment methods for your Merchant Account by calling the `getPaymentMethods()` method
38
+
39
+ ```jsx
40
+ const paymentMethods = await koomipay.getPaymentMethods({
41
+ amount: { currency: "SGD", price: 100 },
42
+ countryCode: "SG",
43
+ })
44
+ ```
45
+
46
+ ### Checkout
47
+
48
+ Depending on your scenario, you can use either `checkout()` method (normal checkout without **capturing**) or `instantCheckout()`, which will trigger a capturing immediately after checkout
49
+
50
+ ```jsx
51
+ const response = await koomipay.instantCheckout({
52
+ orderID: "Order #01",
53
+ paymentMethod: paymentData,
54
+ amount: {
55
+ currency: "SGD",
56
+ price: 100,
57
+ },
58
+ items: [
59
+ {
60
+ productID: "product_01",
61
+ productName: "Product 01",
62
+ quantity: 1,
63
+ price: 100,
64
+ },
65
+ ],
66
+ returnUrl: document.location.origin + "/api/checkout/callback",
67
+ })
68
+ ```
69
+
70
+ Remember to check the response for 3Ds redirect url
71
+
72
+ ```jsx
73
+ if (response?.data?.success) {
74
+ const { data } = response.data
75
+ if (data.resultCode === "Authorised") {
76
+ window.location.href = "/checkout/success"
77
+ } else if (data.resultCode === "RedirectShopper") {
78
+ window.open(data.redirect3ds)
79
+ }
80
+ }
81
+ ```
82
+
83
+ ### Full example
84
+
85
+ ```jsx
86
+ import React, { useEffect, useCallback } from "react"
87
+ import ReactDOM from "react-dom"
88
+ import { createClient, CheckoutComponent } from "@koomipay/react"
89
+
90
+ const koomipay = createClient({
91
+ apiKey: "your_test_key", // should put to process.env
92
+ })
93
+
94
+ function Checkout() {
95
+ const [valid, setValid] = useState(false)
96
+ const [paymentData, setPaymentData] = useState(false)
97
+ const [currentPaymentMethod, setCurrentPaymentMethod] = useState(null)
98
+ const [paymentMethods, setPaymentMethods] = useState([])
99
+
100
+ const fetchPaymentMethods = useCallback(async () => {
101
+ try {
102
+ const paymentMethods = await koomipay.getPaymentMethods({
103
+ amount: { currency: "SGD", price: 100 },
104
+ countryCode: "SG",
105
+ })
106
+ setPaymentMethods(paymentMethods)
107
+ setCurrentPaymentMethod(paymentMethods[0])
108
+ } catch (error) {
109
+ console.error("Failed to load payment methods")
110
+ }
111
+ }, [])
112
+
113
+ useEffect(() => {
114
+ fetchPaymentMethods()
115
+ }, [fetchPaymentMethods])
116
+
117
+ async function handleSubmit(event) {
118
+ event.preventDefault()
119
+ try {
120
+ const response = await koomipay.instantCheckout({
121
+ orderID: "Order #01",
122
+ paymentMethod: paymentData,
123
+ amount: {
124
+ currency: "SGD",
125
+ price: 100,
126
+ },
127
+ items: [
128
+ {
129
+ productID: "product_01",
130
+ productName: "Product 01",
131
+ quantity: 1,
132
+ price: 100,
133
+ },
134
+ ],
135
+ returnUrl: document.location.origin + "/api/checkout/callback",
136
+ })
137
+
138
+ if (response?.data?.success) {
139
+ const { data } = response.data
140
+ if (data.resultCode === "Authorised") {
141
+ window.location.href = "/checkout/success"
142
+ } else if (data.resultCode === "RedirectShopper") {
143
+ window.open(data.redirect3ds)
144
+ }
145
+ }
146
+ } catch (error) {
147
+ console.log(error)
148
+ }
149
+ }
150
+
151
+ return (
152
+ <form onSubmit={handleSubmit}>
153
+ {paymentMethods.map((method) => (
154
+ <div key={method.name}>
155
+ <input type="radio" name="method" onClick={() => setCurrentPaymentMethod(method)} />
156
+ <span>{method.name}</span>
157
+ </div>
158
+ ))}
159
+ <CheckoutContainer
160
+ client={koomipay}
161
+ amount={{
162
+ currency: "SGD",
163
+ price: 100,
164
+ }}
165
+ paymentMethod={currentPaymentMethod}
166
+ onValid={setValid}
167
+ onChange={setPaymentData}
168
+ />
169
+ <button type="submit" disabled={!valid}>
170
+ Pay
171
+ </button>
172
+ </form>
173
+ )
174
+ }
175
+
176
+ ReactDOM.render(<Checkout />, document.body)
177
+ ```
178
+
179
+ ## TypeScript support
180
+
181
+ 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.
182
+
183
+ [koomipay-portal]: https://pay-demo.koomi.app
184
+ [live-demo]: https://store-demo.koomi.app
185
+ [koomipay-npm]: https://www.npmjs.com/package/@koomipay/react
package/dist/cjs/index.js CHANGED
@@ -1 +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);
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],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 CHANGED
@@ -1 +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};
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([]),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 CHANGED
@@ -9,7 +9,7 @@
9
9
  "payments",
10
10
  "components"
11
11
  ],
12
- "version": "1.0.14",
12
+ "version": "1.0.16",
13
13
  "description": "Koomipay react components",
14
14
  "main": "dist/cjs/index.js",
15
15
  "module": "dist/es/index.js",
@@ -33,7 +33,8 @@
33
33
  "minify": "concurrently \"npm run minify:cjs\" \"npm run minify:es\"",
34
34
  "minify:cjs": "uglifyjs --compress --mangle -o dist/cjs/index.js -- dist/cjs/index.js",
35
35
  "minify:es": "uglifyjs --compress --mangle -o dist/es/index.js -- dist/es/index.js",
36
- "prepublishOnly": "npm run build",
36
+ "prepublishOnly": "npm run build && cp ../../README.md ./",
37
+ "postpack": "rm -rf ./README.md",
37
38
  "test": "echo \"Error: no test specified\" && exit 1"
38
39
  },
39
40
  "author": "Novitee Team",