@koomipay/react 1.0.17 → 1.0.19

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],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);
+"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 r=e.client,t=e.onValid,n=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];function v(e){var e=e||{},t=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 react.useEffect(function(){o&&(t(!1),l(!0),d({}),p(null),y([]),x({}),j({}),function(){__awaiter(this,void 0,void 0,function(){var t,n;return __generator(this,function(e){switch(e.label){case 0:return e.trys.push([0,2,,3]),t=r.getConfig(),t={locale:t.locale||"en_US",environment:t.environment,clientKey:t.clientKey,analytics:{enabled:!1},onChange:v},[4,AdyenCheckout(t)];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 n=e.sent(),"development"===process.env.NODE_ENV&&console.log("[ERROR] Handle create checkout error: ",n),[3,3];case 3:return[2]}})})}())},[o]),react.useEffect(function(){var e;u&&"function"==typeof t&&(e=!!(u.encryptedCardNumber&&u.encryptedExpiryMonth&&u.encryptedExpiryYear&&u.encryptedSecurityCode),t(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]),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:r}),jsxRuntime.jsx(CheckoutCardLogo,{active:m.includes("mc"),logoUrl:"logo/mastercard.svg",client:r}),jsxRuntime.jsx(CheckoutCardLogo,{active:m.includes("amex"),logoUrl:"logo/american-express.svg",client:r})]})),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);

package/dist/cjs/types/components/CardComponent.d.ts

@@ -16,7 +16,7 @@ export type KoomiCardPaymentMethod = KoomiPaymentMethod & {
 export type CardComponentProps = DefaultPaymentMethodComponentProps & {
     onChange: (args: CardPaymentMethodPayload) => void;
 };
-export default function CardComponent({ client, onValid, onChange, paymentMethod, amount, countryCode }: CardComponentProps): JSX.Element;
+export default function CardComponent({ client, onValid, onChange, paymentMethod, amount, countryCode, }: CardComponentProps): JSX.Element;
 export type CheckoutInputFieldProps = {
     field: string;
     focus: boolean;

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([]),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};
+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 n=e.client,t=e.onValid,r=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];function _(e){var e=e||{},t=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 useEffect(function(){a&&(t(!1),l(!0),d({}),p(null),f([]),m({}),v({}),function(){__awaiter(this,void 0,void 0,function(){var t,r;return __generator(this,function(e){switch(e.label){case 0:return e.trys.push([0,2,,3]),t=n.getConfig(),t={locale:t.locale||"en_US",environment:t.environment,clientKey:t.clientKey,analytics:{enabled:!1},onChange:_},[4,AdyenCheckout(t)];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 r=e.sent(),"development"===process.env.NODE_ENV&&console.log("[ERROR] Handle create checkout error: ",r),[3,3];case 3:return[2]}})})}())},[a]),useEffect(function(){var e;u&&"function"==typeof t&&(e=!!(u.encryptedCardNumber&&u.encryptedExpiryMonth&&u.encryptedExpiryYear&&u.encryptedSecurityCode),t(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]),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:n}),jsx(CheckoutCardLogo,{active:y.includes("mc"),logoUrl:"logo/mastercard.svg",client:n}),jsx(CheckoutCardLogo,{active:y.includes("amex"),logoUrl:"logo/american-express.svg",client:n})]})),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};

package/dist/es/types/components/CardComponent.d.ts

@@ -16,7 +16,7 @@ export type KoomiCardPaymentMethod = KoomiPaymentMethod & {
 export type CardComponentProps = DefaultPaymentMethodComponentProps & {
     onChange: (args: CardPaymentMethodPayload) => void;
 };
-export default function CardComponent({ client, onValid, onChange, paymentMethod, amount, countryCode }: CardComponentProps): JSX.Element;
+export default function CardComponent({ client, onValid, onChange, paymentMethod, amount, countryCode, }: CardComponentProps): JSX.Element;
 export type CheckoutInputFieldProps = {
     field: string;
     focus: boolean;

package/package.json

@@ -9,7 +9,7 @@
     "payments",
     "components"
   ],
-  "version": "1.0.17",
+  "version": "1.0.19",
   "description": "Koomipay react components",
   "main": "dist/cjs/index.js",
   "module": "dist/es/index.js",
@@ -23,7 +23,7 @@
   ],
   "scripts": {
     "start": "npm run dev",
-    "build": "npm run clean && npm run prod:build-ts && npm run prod:build-css",
+    "build": "DEV_API_URL=http://localhost:32022 TEST_API_URL=https://api-pay-demo.koomi.app LIVE_API_URL=https://api-pay-demo.koomi.app npm run clean && npm run prod:build-ts && npm run prod:build-css",
     "clean": "rm -rf ./dist/*",
     "dev": "concurrently \"npm run dev:build-ts\" \"npm run dev:build-css\"",
     "dev:build-css": "tailwind -i ./src/global.css -o ./dist/koomipay.css --postcss ./postcss.config.js --watch",