@koomipay/react 1.0.3 → 1.0.4
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.
- package/dist/cjs/index.js +1 -1
- package/dist/es/index.js +1 -1
- package/package.json +1 -1
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,a,o,c){return new(o=o||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 o?t:new o(function(e){e(t)})).then(r,s)}i((c=c.apply(e,a||[])).next())})}function __generator(r,s){var i,a,o,c={label:0,sent:function(){if(1&o[0])throw o[1];return o[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,a&&(o=2&t[0]?a.return:t[0]?a.throw||((o=a.return)&&o.call(a),0):a.next)&&!(o=o.call(a,t[1])).done)return o;switch(a=0,(t=o?[2&t[0],o.value]:t)[0]){case 0:case 1:o=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(!(o=0<(o=c.trys).length&&o[o.length-1])&&(6===t[0]||2===t[0])){c=0;continue}if(3===t[0]&&(!o||t[1]>o[0]&&t[1]<o[3]))c.label=t[1];else if(6===t[0]&&c.label<o[1])c.label=o[1],o=t;else{if(!(o&&c.label<o[2])){o[2]&&c.ops.pop(),c.trys.pop();continue}c.label=o[2],c.ops.push(t)}}t=s.call(r,c)}catch(e){t=[6,e],a=0}finally{i=o=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 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 GrabPayComponent(e){var t=e.active,n=e.paymentMethod,r=e.onValid,s=e.onChange;return react.useEffect(function(){t&&("function"==typeof s&&s({type:n.type}),"function"==typeof r)&&r(!0)},[t]),t?jsxRuntime.jsx("div",{children:"After checkout, You will be redirected to payment page to complete this payment."}):null}function CardComponent(e){var t=e.client,n=e.active,r=e.type,s=e.brands,i=e.onValid,a=e.onChange,o=react.useRef(null),e=react.useState(!0),c=e[0],l=e[1],e=react.useState({}),u=e[0],d=e[1],e=react.useState(null),p=e[0],h=e[1],e=react.useState([]),m=e[0],y=e[1],e=react.useState({}),x=e[0],f=e[1],e=react.useState({}),g=e[0],v=e[1];react.useEffect(function(){n&&(i(!1),l(!0),d({}),h(null),y([]),f({}),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(),o.current&&t.create("securedfields",{type:r,brands:s,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;h(t?e:null)},onBinLookup:function(e){e=(e||{}).detectedBrands;y(e||[])}}).mount(o.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]}})})}())},[n,r]),react.useEffect(function(){var e;u&&"function"==typeof i&&(e=!!(u.encryptedCardNumber&&u.encryptedExpiryMonth&&u.encryptedExpiryYear&&u.encryptedSecurityCode),i(e),a({type:u.type,brand:u.brand,encryptedCardNumber:u.encryptedCardNumber,encryptedExpiryMonth:u.encryptedExpiryMonth,encryptedExpiryYear:u.encryptedExpiryYear,encryptedSecurityCode:u.encryptedSecurityCode,cardholder:u.cardholder}))},[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(!!t&&t.paymentMethod||{}),v(Object.assign(__assign(__assign({},n||{}),{encryptedExpiryDate:n.encryptedExpiryMonth&&n.encryptedExpiryYear}))),f(e||{})}};return n?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:o,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"===p,valids:g,errors:x})]}),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"===p,valids:g,errors:x})]}),jsxRuntime.jsxs("div",{children:[jsxRuntime.jsx(Label,__assign({htmlFor:"securityCode"},{children:"Security Code (CVV/CVC)"})),jsxRuntime.jsx(CheckoutInputField,{field:"encryptedSecurityCode",focus:"encryptedSecurityCode"===p,valids:g,errors:x})]})]}))]})),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 CheckoutPaymentMethod(e){var t=e.active,n=e.children,e=e.onClick;return jsxRuntime.jsx("div",__assign({className:classNames({"border px-3 py-2 mb-2 rounded-md cursor-pointer":!0,"bg-primary-500 text-white border-primary-500":!!t,"text-gray-300 border-gray-300":!t}),onClick:e},{children:n}))}function CheckoutContainer(e){var t=this,n=e.client,r=e.amount,s=e.onValid,e=e.onChange,i=n.getApiKey(),a=react.useState(!0),o=a[0],c=a[1],a=react.useState([]),l=a[0],u=a[1],a=react.useState(null),d=a[0],p=a[1],h=react.useCallback(function(){return __awaiter(t,void 0,void 0,function(){return __generator(this,function(e){switch(e.label){case 0:return[4,n.initConfig()];case 1:return e.sent(),[4,function(n){return __awaiter(this,void 0,void 0,function(){var t;return __generator(this,function(e){switch(e.label){case 0:return[4,n.generatePaymentMethods(r)];case 1:return(t=e.sent())&&t.data&&t.data.success&&(u(t.data.paymentMethods),p(!!t.data.paymentMethods&&t.data.paymentMethods[0]),c(!1)),[2]}})})}(n)];case 2:return e.sent(),[2]}})})},[n]);return react.useEffect(function(){i?h():c(!1)},[h]),o?jsxRuntime.jsxs("div",__assign({className:classNames({"mx-auto w-64 h-64 inset-0 flex flex-col gap-3 items-center justify-center":!0,"opacity-0 pointer-events-none":!o})},{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"})]})):jsxRuntime.jsxs("div",{children:[(l||[]).map(function(t){return jsxRuntime.jsx(CheckoutPaymentMethod,__assign({active:(d||{}).type===t.type,onClick:function(){var e;e=t,(d||{}).type!==(e||{}).type&&p(e)}},{children:t.name}),t.type)}),jsxRuntime.jsxs("div",__assign({className:classNames({"border-t border-gray-200 mt-6 py-3":!0})},{children:[jsxRuntime.jsx(CardComponent,{client:n,active:!!d&&"scheme"===d.type,type:"card",brands:["mc","visa","amex"],onValid:s,onChange:e}),jsxRuntime.jsx(GrabPayComponent,{active:!!d&&d.type.includes("grabpay"),paymentMethod:d,onValid:s,onChange:e})]}))]})}function createClient(e){e=e.apiKey;return new KoomiPayClient({apiKey:e})}Label.defaultProps={error:!1};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 e=e.apiKey.split("."),t=e[0],e=e.slice(1);if(this.apiKey=e.join("."),this.apiUrl=API_URLs[t],!this.apiUrl)throw new Error("Invalid API Key");this.config=null}return e.prototype.setConfig=function(e){this.config=e},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.generatePaymentMethods=function(n){return __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,axios.post("".concat(this.config.baseApiUri,"/koomipay/payment-methods"),{amount:{currency:n.currency,price:n.price}},{headers:{"X-API-KEY":this.apiKey}})];case 1:return[2,e.sent()];case 2:throw t=e.sent(),console.log("[DEBUG] Generate payment method error",t),new Error("Error when generate payment method, please check your payload");case 3:return[2]}})})},e.prototype.checkout=function(n,r){return void 0===r&&(r={}),__awaiter(this,void 0,void 0,function(){var t;return __generator(this,function(e){switch(e.label){case 0:r&&this.setConfig(r),e.label=1;case 1:return e.trys.push([1,3,,4]),[4,axios.post("".concat(this.config.baseApiUri,"/koomipay/checkout"),n,{headers:{"X-API-KEY":this.apiKey}})];case 2:return[2,e.sent()];case 3:throw t=e.sent(),console.log("[DEBUG] Checkout error",t),new Error("Error when checkout, please check your payload");case 4:return[2]}})})},e.prototype.instantCheckout=function(n,r){return void 0===r&&(r={}),__awaiter(this,void 0,void 0,function(){var t;return __generator(this,function(e){switch(e.label){case 0:r&&this.setConfig(r),e.label=1;case 1:return e.trys.push([1,3,,4]),[4,axios.post("".concat(this.config.baseApiUri,"/koomipay/instant-checkout"),n,{headers:{"X-API-KEY":this.apiKey}})];case 2:return[2,e.sent()];case 3:throw t=e.sent(),console.log("[DEBUG] Instant Checkout error",t),new Error("Error when checkout, please check your payload");case 4: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,i,o,c){return new(o=o||Promise)(function(n,t){function r(e){try{a(c.next(e))}catch(e){t(e)}}function s(e){try{a(c.throw(e))}catch(e){t(e)}}function a(e){var t;e.done?n(e.value):((t=e.value)instanceof o?t:new o(function(e){e(t)})).then(r,s)}a((c=c.apply(e,i||[])).next())})}function __generator(r,s){var a,i,o,c={label:0,sent:function(){if(1&o[0])throw o[1];return o[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(a)throw new TypeError("Generator is already executing.");for(;c=l&&t[l=0]?0:c;)try{if(a=1,i&&(o=2&t[0]?i.return:t[0]?i.throw||((o=i.return)&&o.call(i),0):i.next)&&!(o=o.call(i,t[1])).done)return o;switch(i=0,(t=o?[2&t[0],o.value]:t)[0]){case 0:case 1:o=t;break;case 4:return c.label++,{value:t[1],done:!1};case 5:c.label++,i=t[1],t=[0];continue;case 7:t=c.ops.pop(),c.trys.pop();continue;default:if(!(o=0<(o=c.trys).length&&o[o.length-1])&&(6===t[0]||2===t[0])){c=0;continue}if(3===t[0]&&(!o||t[1]>o[0]&&t[1]<o[3]))c.label=t[1];else if(6===t[0]&&c.label<o[1])c.label=o[1],o=t;else{if(!(o&&c.label<o[2])){o[2]&&c.ops.pop(),c.trys.pop();continue}c.label=o[2],c.ops.push(t)}}t=s.call(r,c)}catch(e){t=[6,e],i=0}finally{a=o=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,a=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,a&&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 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 GrabPayComponent(e){var t=e.active,n=e.paymentMethod,r=e.onValid,s=e.onChange;return react.useEffect(function(){t&&("function"==typeof s&&s({type:n.type}),"function"==typeof r)&&r(!0)},[t]),t?jsxRuntime.jsx("div",{children:"After checkout, You will be redirected to payment page to complete this payment."}):null}function CardComponent(e){var t=e.client,n=e.active,r=e.type,s=e.brands,a=e.onValid,i=e.onChange,o=react.useRef(null),e=react.useState(!0),c=e[0],l=e[1],e=react.useState({}),u=e[0],d=e[1],e=react.useState(null),p=e[0],h=e[1],e=react.useState([]),m=e[0],y=e[1],e=react.useState({}),x=e[0],f=e[1],e=react.useState({}),g=e[0],v=e[1];react.useEffect(function(){n&&(a(!1),l(!0),d({}),h(null),y([]),f({}),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(),o.current&&t.create("securedfields",{type:r,brands:s,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;h(t?e:null)},onBinLookup:function(e){e=(e||{}).detectedBrands;y(e||[])}}).mount(o.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]}})})}())},[n,r]),react.useEffect(function(){var e;u&&"function"==typeof a&&(e=!!(u.encryptedCardNumber&&u.encryptedExpiryMonth&&u.encryptedExpiryYear&&u.encryptedSecurityCode),a(e),i({type:u.type,brand:u.brand,encryptedCardNumber:u.encryptedCardNumber,encryptedExpiryMonth:u.encryptedExpiryMonth,encryptedExpiryYear:u.encryptedExpiryYear,encryptedSecurityCode:u.encryptedSecurityCode,cardholder:u.cardholder}))},[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(!!t&&t.paymentMethod||{}),v(Object.assign(__assign(__assign({},n||{}),{encryptedExpiryDate:n.encryptedExpiryMonth&&n.encryptedExpiryYear}))),f(e||{})}};return n?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:o,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"===p,valids:g,errors:x})]}),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"===p,valids:g,errors:x})]}),jsxRuntime.jsxs("div",{children:[jsxRuntime.jsx(Label,__assign({htmlFor:"securityCode"},{children:"Security Code (CVV/CVC)"})),jsxRuntime.jsx(CheckoutInputField,{field:"encryptedSecurityCode",focus:"encryptedSecurityCode"===p,valids:g,errors:x})]})]}))]})),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 CheckoutPaymentMethod(e){var t=e.active,n=e.children,e=e.onClick;return jsxRuntime.jsx("div",__assign({className:classNames({"border px-3 py-2 mb-2 rounded-md cursor-pointer":!0,"bg-primary-500 text-white border-primary-500":!!t,"text-gray-300 border-gray-300":!t}),onClick:e},{children:n}))}function CheckoutContainer(e){var t=this,n=e.client,r=e.amount,s=e.onValid,e=e.onChange,a=n.getApiKey(),i=react.useState(!0),o=i[0],c=i[1],i=react.useState([]),l=i[0],u=i[1],i=react.useState(null),d=i[0],p=i[1],h=react.useCallback(function(){return __awaiter(t,void 0,void 0,function(){return __generator(this,function(e){switch(e.label){case 0:return[4,n.initConfig()];case 1:return e.sent(),[4,function(n){return __awaiter(this,void 0,void 0,function(){var t;return __generator(this,function(e){switch(e.label){case 0:return[4,n.generatePaymentMethods(r)];case 1:return(t=e.sent())&&t.data&&t.data.success&&(u(t.data.paymentMethods),p(!!t.data.paymentMethods&&t.data.paymentMethods[0]),c(!1)),[2]}})})}(n)];case 2:return e.sent(),[2]}})})},[n]);return react.useEffect(function(){a?h():c(!1)},[h]),o?jsxRuntime.jsxs("div",__assign({className:classNames({"mx-auto w-64 h-64 inset-0 flex flex-col gap-3 items-center justify-center":!0,"opacity-0 pointer-events-none":!o})},{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"})]})):jsxRuntime.jsxs("div",{children:[(l||[]).map(function(t){return jsxRuntime.jsx(CheckoutPaymentMethod,__assign({active:(d||{}).type===t.type,onClick:function(){var e;e=t,(d||{}).type!==(e||{}).type&&p(e)}},{children:t.name}),t.type)}),jsxRuntime.jsxs("div",__assign({className:classNames({"border-t border-gray-200 mt-6 py-3":!0})},{children:[jsxRuntime.jsx(CardComponent,{client:n,active:!!d&&"scheme"===d.type,type:"card",brands:["mc","visa","amex"],onValid:s,onChange:e}),jsxRuntime.jsx(GrabPayComponent,{active:!!d&&d.type.includes("grabpay"),paymentMethod:d,onValid:s,onChange:e})]}))]})}function createClient(e){e=e.apiKey;return new KoomiPayClient({apiKey:e})}Label.defaultProps={error:!1};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.setConfig=function(e){this.config=e},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.generatePaymentMethods=function(n){return __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,axios.post("".concat(this.config.baseApiUri,"/koomipay/payment-methods"),{amount:{currency:n.currency,price:n.price}},{headers:{"X-API-KEY":this.apiKey}})];case 1:return[2,e.sent()];case 2:throw t=e.sent(),console.log("[DEBUG] Generate payment method error",t),new Error("Error when generate payment method, please check your payload");case 3:return[2]}})})},e.prototype.checkout=function(n,r){return void 0===r&&(r={}),__awaiter(this,void 0,void 0,function(){var t;return __generator(this,function(e){switch(e.label){case 0:r&&this.setConfig(r),e.label=1;case 1:return e.trys.push([1,3,,4]),[4,axios.post("".concat(this.config.baseApiUri,"/koomipay/checkout"),n,{headers:{"X-API-KEY":this.apiKey}})];case 2:return[2,e.sent()];case 3:throw t=e.sent(),console.log("[DEBUG] Checkout error",t),new Error("Error when checkout, please check your payload");case 4:return[2]}})})},e.prototype.instantCheckout=function(n,r){return void 0===r&&(r={}),__awaiter(this,void 0,void 0,function(){var t;return __generator(this,function(e){switch(e.label){case 0:r&&this.setConfig(r),e.label=1;case 1:return e.trys.push([1,3,,4]),[4,axios.post("".concat(this.config.baseApiUri,"/koomipay/instant-checkout"),n,{headers:{"X-API-KEY":this.apiKey}})];case 2:return[2,e.sent()];case 3:throw t=e.sent(),console.log("[DEBUG] Instant Checkout error",t),new Error("Error when checkout, please check your payload");case 4: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}from"react/jsx-runtime";import{useState,useCallback,useEffect,useRef}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 a in t=arguments[r])Object.prototype.hasOwnProperty.call(t,a)&&(e[a]=t[a]);return e}).apply(this,arguments)};function __awaiter(e,o,i,c){return new(i=i||Promise)(function(r,t){function n(e){try{s(c.next(e))}catch(e){t(e)}}function a(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,a)}s((c=c.apply(e,o||[])).next())})}function __generator(n,a){var s,o,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,o&&(i=2&t[0]?o.return:t[0]?o.throw||((i=o.return)&&i.call(o),0):o.next)&&!(i=i.call(o,t[1])).done)return i;switch(o=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++,o=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=a.call(n,c)}catch(e){t=[6,e],o=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,a=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:"*"}))]})),a&&jsx("span",__assign({className:"text-sm leading-5 text-gray-500 dark:text-gray-500 ".concat(r&&"text-red-600")},{children:a}))]}))}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],a=null!=e,e=!!a&&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&&!a,"bg-green-50 border-green-700":!!n,"bg-red-50 border-red-500":!r&&!!a&&!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 GrabPayComponent(e){var t=e.active,r=e.paymentMethod,n=e.onValid,a=e.onChange;return useEffect(function(){t&&("function"==typeof a&&a({type:r.type}),"function"==typeof n)&&n(!0)},[t]),t?jsx("div",{children:"After checkout, You will be redirected to payment page to complete this payment."}):null}function CardComponent(e){var t=e.client,r=e.active,n=e.type,a=e.brands,s=e.onValid,o=e.onChange,i=useRef(null),e=useState(!0),c=e[0],l=e[1],e=useState({}),u=e[0],d=e[1],e=useState(null),p=e[0],h=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(){r&&(s(!1),l(!0),d({}),h(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(),i.current&&t.create("securedfields",{type:n,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;h(t?e:null)},onBinLookup:function(e){e=(e||{}).detectedBrands;f(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]}})})}())},[r,n]),useEffect(function(){var e;u&&"function"==typeof s&&(e=!!(u.encryptedCardNumber&&u.encryptedExpiryMonth&&u.encryptedExpiryYear&&u.encryptedSecurityCode),s(e),o({type:u.type,brand:u.brand,encryptedCardNumber:u.encryptedCardNumber,encryptedExpiryMonth:u.encryptedExpiryMonth,encryptedExpiryYear:u.encryptedExpiryYear,encryptedSecurityCode:u.encryptedSecurityCode,cardholder:u.cardholder}))},[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(!!t&&t.paymentMethod||{}),v(Object.assign(__assign(__assign({},r||{}),{encryptedExpiryDate:r.encryptedExpiryMonth&&r.encryptedExpiryYear}))),m(e||{})}};return r?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:i,className:classNames({"opacity-0":!!c})},{children:[jsxs("div",{children:[jsx(Label,__assign({htmlFor:"cardNumber"},{children:"Card number"})),jsx(CheckoutInputField,{field:"encryptedCardNumber",focus:"encryptedCardNumber"===p,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"===p,valids:x,errors:g})]}),jsxs("div",{children:[jsx(Label,__assign({htmlFor:"securityCode"},{children:"Security Code (CVV/CVC)"})),jsx(CheckoutInputField,{field:"encryptedSecurityCode",focus:"encryptedSecurityCode"===p,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 CheckoutPaymentMethod(e){var t=e.active,r=e.children,e=e.onClick;return jsx("div",__assign({className:classNames({"border px-3 py-2 mb-2 rounded-md cursor-pointer":!0,"bg-primary-500 text-white border-primary-500":!!t,"text-gray-300 border-gray-300":!t}),onClick:e},{children:r}))}function CheckoutContainer(e){var t=this,r=e.client,n=e.amount,a=e.onValid,e=e.onChange,s=r.getApiKey(),o=useState(!0),i=o[0],c=o[1],o=useState([]),l=o[0],u=o[1],o=useState(null),d=o[0],p=o[1],h=useCallback(function(){return __awaiter(t,void 0,void 0,function(){return __generator(this,function(e){switch(e.label){case 0:return[4,r.initConfig()];case 1:return e.sent(),[4,function(r){return __awaiter(this,void 0,void 0,function(){var t;return __generator(this,function(e){switch(e.label){case 0:return[4,r.generatePaymentMethods(n)];case 1:return(t=e.sent())&&t.data&&t.data.success&&(u(t.data.paymentMethods),p(!!t.data.paymentMethods&&t.data.paymentMethods[0]),c(!1)),[2]}})})}(r)];case 2:return e.sent(),[2]}})})},[r]);return useEffect(function(){s?h():c(!1)},[h]),jsxs("div",i?__assign({className:classNames({"mx-auto w-64 h-64 inset-0 flex flex-col gap-3 items-center justify-center":!0,"opacity-0 pointer-events-none":!i})},{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"})]}):{children:[(l||[]).map(function(t){return jsx(CheckoutPaymentMethod,__assign({active:(d||{}).type===t.type,onClick:function(){var e;e=t,(d||{}).type!==(e||{}).type&&p(e)}},{children:t.name}),t.type)}),jsxs("div",__assign({className:classNames({"border-t border-gray-200 mt-6 py-3":!0})},{children:[jsx(CardComponent,{client:r,active:!!d&&"scheme"===d.type,type:"card",brands:["mc","visa","amex"],onValid:a,onChange:e}),jsx(GrabPayComponent,{active:!!d&&d.type.includes("grabpay"),paymentMethod:d,onValid:a,onChange:e})]}))]})}function createClient(e){e=e.apiKey;return new KoomiPayClient({apiKey:e})}Label.defaultProps={error:!1};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 e=e.apiKey.split("."),t=e[0],e=e.slice(1);if(this.apiKey=e.join("."),this.apiUrl=API_URLs[t],!this.apiUrl)throw new Error("Invalid API Key");this.config=null}return e.prototype.setConfig=function(e){this.config=e},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.generatePaymentMethods=function(r){return __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,axios.post("".concat(this.config.baseApiUri,"/koomipay/payment-methods"),{amount:{currency:r.currency,price:r.price}},{headers:{"X-API-KEY":this.apiKey}})];case 1:return[2,e.sent()];case 2:throw t=e.sent(),console.log("[DEBUG] Generate payment method error",t),new Error("Error when generate payment method, please check your payload");case 3:return[2]}})})},e.prototype.checkout=function(r,n){return void 0===n&&(n={}),__awaiter(this,void 0,void 0,function(){var t;return __generator(this,function(e){switch(e.label){case 0:n&&this.setConfig(n),e.label=1;case 1:return e.trys.push([1,3,,4]),[4,axios.post("".concat(this.config.baseApiUri,"/koomipay/checkout"),r,{headers:{"X-API-KEY":this.apiKey}})];case 2:return[2,e.sent()];case 3:throw t=e.sent(),console.log("[DEBUG] Checkout error",t),new Error("Error when checkout, please check your payload");case 4:return[2]}})})},e.prototype.instantCheckout=function(r,n){return void 0===n&&(n={}),__awaiter(this,void 0,void 0,function(){var t;return __generator(this,function(e){switch(e.label){case 0:n&&this.setConfig(n),e.label=1;case 1:return e.trys.push([1,3,,4]),[4,axios.post("".concat(this.config.baseApiUri,"/koomipay/instant-checkout"),r,{headers:{"X-API-KEY":this.apiKey}})];case 2:return[2,e.sent()];case 3:throw t=e.sent(),console.log("[DEBUG] Instant Checkout error",t),new Error("Error when checkout, please check your payload");case 4:return[2]}})})},e}();export{CheckoutContainer,createClient};
|
|
1
|
+
import{jsxs,jsx}from"react/jsx-runtime";import{useState,useCallback,useEffect,useRef}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 a in t=arguments[r])Object.prototype.hasOwnProperty.call(t,a)&&(e[a]=t[a]);return e}).apply(this,arguments)};function __awaiter(e,o,i,c){return new(i=i||Promise)(function(r,t){function n(e){try{s(c.next(e))}catch(e){t(e)}}function a(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,a)}s((c=c.apply(e,o||[])).next())})}function __generator(n,a){var s,o,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,o&&(i=2&t[0]?o.return:t[0]?o.throw||((i=o.return)&&i.call(o),0):o.next)&&!(i=i.call(o,t[1])).done)return i;switch(o=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++,o=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=a.call(n,c)}catch(e){t=[6,e],o=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,a=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:"*"}))]})),a&&jsx("span",__assign({className:"text-sm leading-5 text-gray-500 dark:text-gray-500 ".concat(r&&"text-red-600")},{children:a}))]}))}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],a=null!=e,e=!!a&&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&&!a,"bg-green-50 border-green-700":!!n,"bg-red-50 border-red-500":!r&&!!a&&!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 GrabPayComponent(e){var t=e.active,r=e.paymentMethod,n=e.onValid,a=e.onChange;return useEffect(function(){t&&("function"==typeof a&&a({type:r.type}),"function"==typeof n)&&n(!0)},[t]),t?jsx("div",{children:"After checkout, You will be redirected to payment page to complete this payment."}):null}function CardComponent(e){var t=e.client,r=e.active,n=e.type,a=e.brands,s=e.onValid,o=e.onChange,i=useRef(null),e=useState(!0),c=e[0],l=e[1],e=useState({}),u=e[0],d=e[1],e=useState(null),p=e[0],h=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(){r&&(s(!1),l(!0),d({}),h(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(),i.current&&t.create("securedfields",{type:n,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;h(t?e:null)},onBinLookup:function(e){e=(e||{}).detectedBrands;f(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]}})})}())},[r,n]),useEffect(function(){var e;u&&"function"==typeof s&&(e=!!(u.encryptedCardNumber&&u.encryptedExpiryMonth&&u.encryptedExpiryYear&&u.encryptedSecurityCode),s(e),o({type:u.type,brand:u.brand,encryptedCardNumber:u.encryptedCardNumber,encryptedExpiryMonth:u.encryptedExpiryMonth,encryptedExpiryYear:u.encryptedExpiryYear,encryptedSecurityCode:u.encryptedSecurityCode,cardholder:u.cardholder}))},[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(!!t&&t.paymentMethod||{}),v(Object.assign(__assign(__assign({},r||{}),{encryptedExpiryDate:r.encryptedExpiryMonth&&r.encryptedExpiryYear}))),m(e||{})}};return r?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:i,className:classNames({"opacity-0":!!c})},{children:[jsxs("div",{children:[jsx(Label,__assign({htmlFor:"cardNumber"},{children:"Card number"})),jsx(CheckoutInputField,{field:"encryptedCardNumber",focus:"encryptedCardNumber"===p,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"===p,valids:x,errors:g})]}),jsxs("div",{children:[jsx(Label,__assign({htmlFor:"securityCode"},{children:"Security Code (CVV/CVC)"})),jsx(CheckoutInputField,{field:"encryptedSecurityCode",focus:"encryptedSecurityCode"===p,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 CheckoutPaymentMethod(e){var t=e.active,r=e.children,e=e.onClick;return jsx("div",__assign({className:classNames({"border px-3 py-2 mb-2 rounded-md cursor-pointer":!0,"bg-primary-500 text-white border-primary-500":!!t,"text-gray-300 border-gray-300":!t}),onClick:e},{children:r}))}function CheckoutContainer(e){var t=this,r=e.client,n=e.amount,a=e.onValid,e=e.onChange,s=r.getApiKey(),o=useState(!0),i=o[0],c=o[1],o=useState([]),l=o[0],u=o[1],o=useState(null),d=o[0],p=o[1],h=useCallback(function(){return __awaiter(t,void 0,void 0,function(){return __generator(this,function(e){switch(e.label){case 0:return[4,r.initConfig()];case 1:return e.sent(),[4,function(r){return __awaiter(this,void 0,void 0,function(){var t;return __generator(this,function(e){switch(e.label){case 0:return[4,r.generatePaymentMethods(n)];case 1:return(t=e.sent())&&t.data&&t.data.success&&(u(t.data.paymentMethods),p(!!t.data.paymentMethods&&t.data.paymentMethods[0]),c(!1)),[2]}})})}(r)];case 2:return e.sent(),[2]}})})},[r]);return useEffect(function(){s?h():c(!1)},[h]),jsxs("div",i?__assign({className:classNames({"mx-auto w-64 h-64 inset-0 flex flex-col gap-3 items-center justify-center":!0,"opacity-0 pointer-events-none":!i})},{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"})]}):{children:[(l||[]).map(function(t){return jsx(CheckoutPaymentMethod,__assign({active:(d||{}).type===t.type,onClick:function(){var e;e=t,(d||{}).type!==(e||{}).type&&p(e)}},{children:t.name}),t.type)}),jsxs("div",__assign({className:classNames({"border-t border-gray-200 mt-6 py-3":!0})},{children:[jsx(CardComponent,{client:r,active:!!d&&"scheme"===d.type,type:"card",brands:["mc","visa","amex"],onValid:a,onChange:e}),jsx(GrabPayComponent,{active:!!d&&d.type.includes("grabpay"),paymentMethod:d,onValid:a,onChange:e})]}))]})}function createClient(e){e=e.apiKey;return new KoomiPayClient({apiKey:e})}Label.defaultProps={error:!1};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.setConfig=function(e){this.config=e},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.generatePaymentMethods=function(r){return __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,axios.post("".concat(this.config.baseApiUri,"/koomipay/payment-methods"),{amount:{currency:r.currency,price:r.price}},{headers:{"X-API-KEY":this.apiKey}})];case 1:return[2,e.sent()];case 2:throw t=e.sent(),console.log("[DEBUG] Generate payment method error",t),new Error("Error when generate payment method, please check your payload");case 3:return[2]}})})},e.prototype.checkout=function(r,n){return void 0===n&&(n={}),__awaiter(this,void 0,void 0,function(){var t;return __generator(this,function(e){switch(e.label){case 0:n&&this.setConfig(n),e.label=1;case 1:return e.trys.push([1,3,,4]),[4,axios.post("".concat(this.config.baseApiUri,"/koomipay/checkout"),r,{headers:{"X-API-KEY":this.apiKey}})];case 2:return[2,e.sent()];case 3:throw t=e.sent(),console.log("[DEBUG] Checkout error",t),new Error("Error when checkout, please check your payload");case 4:return[2]}})})},e.prototype.instantCheckout=function(r,n){return void 0===n&&(n={}),__awaiter(this,void 0,void 0,function(){var t;return __generator(this,function(e){switch(e.label){case 0:n&&this.setConfig(n),e.label=1;case 1:return e.trys.push([1,3,,4]),[4,axios.post("".concat(this.config.baseApiUri,"/koomipay/instant-checkout"),r,{headers:{"X-API-KEY":this.apiKey}})];case 2:return[2,e.sent()];case 3:throw t=e.sent(),console.log("[DEBUG] Instant Checkout error",t),new Error("Error when checkout, please check your payload");case 4:return[2]}})})},e}();export{CheckoutContainer,createClient};
|