@paykka/card-checkout-ui 0.11.6 → 0.13.1
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/card-checkout-ui.js +17 -17
- package/dist/card-checkout-ui.umd.cjs +17 -17
- package/dist/es/api/index.js +1 -0
- package/dist/es/api/modules/address/index.js +9 -9
- package/dist/es/api/modules/ali-pay/index.js +10 -49
- package/dist/es/api/modules/apple-pay/index.js +13 -59
- package/dist/es/api/modules/boost/index.js +8 -48
- package/dist/es/api/modules/card/index.js +10 -54
- package/dist/es/api/modules/checkout/index.js +11 -9
- package/dist/es/api/modules/checkout/map.js +25 -18
- package/dist/es/api/modules/encrypted-card/index.js +3 -2
- package/dist/es/api/modules/gcash/index.js +8 -48
- package/dist/es/api/modules/google-pay/index.js +10 -56
- package/dist/es/api/modules/grab-pay/index.js +8 -48
- package/dist/es/api/modules/index.js +1 -0
- package/dist/es/api/modules/line-pay/index.js +8 -48
- package/dist/es/api/modules/map.js +17 -11
- package/dist/es/api/modules/may-bank-qr-pay/index.js +8 -48
- package/dist/es/api/modules/nine-pay/index.js +8 -48
- package/dist/es/api/modules/paymaya/index.js +8 -48
- package/dist/es/api/modules/risk/index.js +2 -1
- package/dist/es/api/modules/sepa/index.js +10 -51
- package/dist/es/api/modules/shopee-pay/index.js +8 -48
- package/dist/es/api/modules/threeDS/index.js +3 -0
- package/dist/es/api/modules/tng-wallet/index.js +8 -48
- package/dist/es/api/modules/wechat-pay/index.js +10 -51
- package/dist/es/api/modules/zalopay/index.js +16 -0
- package/dist/es/api/utils/index.js +59 -0
- package/dist/es/components/AddressField/index.js +37 -37
- package/dist/es/components/AliPay/index.js +143 -90
- package/dist/es/components/ApplePay/index.js +99 -67
- package/dist/es/components/Boost/index.js +66 -39
- package/dist/es/components/Card/index.js +90 -79
- package/dist/es/components/CardSelector/index.js +1 -1
- package/dist/es/components/DropIn/index.js +12 -4
- package/dist/es/components/EncryptedCard/index.js +1 -1
- package/dist/es/components/GooglePay/index.js +93 -60
- package/dist/es/components/GrabPay/index.js +66 -39
- package/dist/es/components/GuideCard/index.js +10 -7
- package/dist/es/components/LinePay/index.js +66 -39
- package/dist/es/components/MayBankQRPay/index.js +306 -273
- package/dist/es/components/NinePay/index.js +66 -39
- package/dist/es/components/SecuredFieldsProvider/index.js +3 -2
- package/dist/es/components/SecuredIframe/index.js +4 -2
- package/dist/es/components/Sepa/index.js +62 -39
- package/dist/es/components/ShopeePay/index.js +66 -39
- package/dist/es/components/SubmitButton/index.js +8 -7
- package/dist/es/components/TNGWallet/index.js +66 -39
- package/dist/es/components/WechatPay/index.js +146 -92
- package/dist/es/components/business/QRCodeModal/QRCodeModal.js +26 -6
- package/dist/es/components/index.js +1 -0
- package/dist/es/components/internal/Modal/Modal.js +1 -1
- package/dist/es/components/internal/Select/Select.js +19 -8
- package/dist/es/components/internal/Select/SelectMenuItem.js +12 -4
- package/dist/es/components/internal/icons/IconZalopay.js +47 -0
- package/dist/es/components/internal/icons/IconZalopayComplete.js +48 -0
- package/dist/es/components/wallets/GCash/GCash.js +68 -39
- package/dist/es/components/wallets/Paymaya/Paymaya.js +66 -39
- package/dist/es/components/wallets/Zalopay/Zalopay.js +386 -0
- package/dist/es/components/wallets/Zalopay/index.js +1 -0
- package/dist/es/components/wallets/Zalopay/type.js +1 -0
- package/dist/es/components/wallets/Zalopay/zalopay2.js +1 -0
- package/dist/es/config.js +5 -5
- package/dist/es/constant.js +8 -2
- package/dist/es/core/{Address.js → address.js} +8 -16
- package/dist/es/core/{PayKKaCheckout.js → checkout.js} +78 -27
- package/dist/es/core/query.js +3 -2
- package/dist/es/core/{Session.js → session.js} +37 -20
- package/dist/es/core.js +0 -4
- package/dist/es/hooks/usePayment.js +14 -0
- package/dist/es/i18n/locales/de-DE.js +3 -1
- package/dist/es/i18n/locales/en-GB.js +3 -1
- package/dist/es/i18n/locales/es-ES.js +3 -1
- package/dist/es/i18n/locales/fr-FR.js +3 -1
- package/dist/es/i18n/locales/ja-JP.js +3 -1
- package/dist/es/i18n/locales/ko-KR.js +3 -1
- package/dist/es/i18n/locales/nl-NL.js +3 -1
- package/dist/es/i18n/locales/pt-PT.js +3 -1
- package/dist/es/i18n/locales/ru-RU.js +3 -1
- package/dist/es/i18n/locales/zh-CN.js +3 -1
- package/dist/es/i18n/locales/zh-HK.js +3 -1
- package/dist/es/i18n/locales/zh-TW.js +3 -1
- package/dist/es/index.js +16 -4
- package/dist/es/style.css +1 -1
- package/dist/es/types/index.js +7 -0
- package/dist/es/utils/colors.js +5 -1
- package/dist/es/utils/payment.js +82 -0
- package/dist/es/utils/redirect.js +4 -4
- package/dist/style.css +1 -1
- package/dist/types/api/modules/address/index.d.ts +15 -6
- package/dist/types/api/modules/ali-pay/index.d.ts +3 -19
- package/dist/types/api/modules/apple-pay/index.d.ts +4 -14
- package/dist/types/api/modules/boost/index.d.ts +3 -23
- package/dist/types/api/modules/card/index.d.ts +3 -30
- package/dist/types/api/modules/checkout/index.d.ts +3 -3
- package/dist/types/api/modules/checkout/map.d.ts +3 -3
- package/dist/types/api/modules/checkout/type.d.ts +33 -4
- package/dist/types/api/modules/gcash/index.d.ts +3 -23
- package/dist/types/api/modules/google-pay/index.d.ts +3 -13
- package/dist/types/api/modules/grab-pay/index.d.ts +3 -23
- package/dist/types/api/modules/index.d.ts +1 -0
- package/dist/types/api/modules/line-pay/index.d.ts +3 -23
- package/dist/types/api/modules/map.d.ts +2 -2
- package/dist/types/api/modules/may-bank-qr-pay/index.d.ts +3 -23
- package/dist/types/api/modules/nine-pay/index.d.ts +3 -23
- package/dist/types/api/modules/paymaya/index.d.ts +3 -23
- package/dist/types/api/modules/sepa/index.d.ts +3 -24
- package/dist/types/api/modules/shopee-pay/index.d.ts +3 -23
- package/dist/types/api/modules/tng-wallet/index.d.ts +3 -23
- package/dist/types/api/modules/type.d.ts +74 -21
- package/dist/types/api/modules/wechat-pay/index.d.ts +3 -20
- package/dist/types/api/modules/zalopay/index.d.ts +4 -0
- package/dist/types/api/utils/index.d.ts +48 -0
- package/dist/types/components/AddressField/type.d.ts +3 -9
- package/dist/types/components/AliPay/AliPay.d.ts +6 -2
- package/dist/types/components/AliPay/type.d.ts +15 -2
- package/dist/types/components/ApplePay/ApplePay.d.ts +6 -2
- package/dist/types/components/ApplePay/type.d.ts +10 -14
- package/dist/types/components/ApplePay/utils.d.ts +1 -1
- package/dist/types/components/Boost/Boost.d.ts +6 -2
- package/dist/types/components/Boost/type.d.ts +2 -24
- package/dist/types/components/Card/Card.d.ts +6 -2
- package/dist/types/components/Card/type.d.ts +3 -43
- package/dist/types/components/DropIn/DropIn.d.ts +6 -2
- package/dist/types/components/DropIn/type.d.ts +4 -10
- package/dist/types/components/GooglePay/GooglePay.d.ts +6 -2
- package/dist/types/components/GooglePay/createGooglePay.d.ts +2 -1
- package/dist/types/components/GooglePay/type.d.ts +10 -26
- package/dist/types/components/GrabPay/GrabPay.d.ts +6 -2
- package/dist/types/components/GrabPay/type.d.ts +3 -25
- package/dist/types/components/LinePay/LinePay.d.ts +6 -2
- package/dist/types/components/LinePay/type.d.ts +3 -25
- package/dist/types/components/MayBankQRPay/MayBankQRPay.d.ts +6 -2
- package/dist/types/components/MayBankQRPay/type.d.ts +3 -25
- package/dist/types/components/NinePay/NinePay.d.ts +6 -2
- package/dist/types/components/NinePay/type.d.ts +3 -25
- package/dist/types/components/Sepa/Sepa.d.ts +6 -2
- package/dist/types/components/Sepa/type.d.ts +3 -2
- package/dist/types/components/ShopeePay/ShopeePay.d.ts +6 -2
- package/dist/types/components/ShopeePay/type.d.ts +3 -25
- package/dist/types/components/TNGWallet/TNGWallet.d.ts +6 -2
- package/dist/types/components/TNGWallet/type.d.ts +3 -25
- package/dist/types/components/WechatPay/WechatPay.d.ts +6 -2
- package/dist/types/components/WechatPay/type.d.ts +15 -2
- package/dist/types/components/business/QRCodeModal/type.d.ts +2 -0
- package/dist/types/components/index.d.ts +1 -0
- package/dist/types/components/internal/icons/IconZalopay.d.ts +2 -0
- package/dist/types/components/internal/icons/IconZalopayComplete.d.ts +2 -0
- package/dist/types/components/internal/icons/index.d.ts +3 -0
- package/dist/types/components/wallets/GCash/GCash.d.ts +6 -2
- package/dist/types/components/wallets/GCash/type.d.ts +3 -35
- package/dist/types/components/wallets/Paymaya/Paymaya.d.ts +6 -2
- package/dist/types/components/wallets/Paymaya/type.d.ts +3 -25
- package/dist/types/components/wallets/Zalopay/Zalopay.d.ts +10 -0
- package/dist/types/components/wallets/Zalopay/index.d.ts +2 -0
- package/dist/types/components/wallets/Zalopay/type.d.ts +39 -0
- package/dist/types/config.d.ts +2 -4
- package/dist/types/constant.d.ts +3 -1
- package/dist/types/core/{Address.d.ts → address.d.ts} +23 -24
- package/dist/types/core/{PayKKaCheckout.d.ts → checkout.d.ts} +5 -3
- package/dist/types/core/context.d.ts +3 -2
- package/dist/types/core/index.d.ts +2 -2
- package/dist/types/core/query.d.ts +2 -2
- package/dist/types/core/session.d.ts +33 -0
- package/dist/types/hooks/index.d.ts +1 -0
- package/dist/types/hooks/usePayment.d.ts +8 -0
- package/dist/types/i18n/locales/de-DE.d.ts +2 -0
- package/dist/types/i18n/locales/en-GB.d.ts +2 -0
- package/dist/types/i18n/locales/es-ES.d.ts +2 -0
- package/dist/types/i18n/locales/fr-FR.d.ts +2 -0
- package/dist/types/i18n/locales/ja-JP.d.ts +2 -0
- package/dist/types/i18n/locales/ko-KR.d.ts +2 -0
- package/dist/types/i18n/locales/nl-NL.d.ts +2 -0
- package/dist/types/i18n/locales/pt-PT.d.ts +2 -0
- package/dist/types/i18n/locales/ru-RU.d.ts +2 -0
- package/dist/types/i18n/locales/zh-CN.d.ts +2 -0
- package/dist/types/i18n/locales/zh-HK.d.ts +2 -0
- package/dist/types/i18n/locales/zh-TW.d.ts +2 -0
- package/dist/types/index.d.ts +2 -1
- package/dist/types/types/index.d.ts +70 -32
- package/dist/types/types/message.d.ts +1 -0
- package/dist/types/utils/card-brand/index.d.ts +3 -3
- package/dist/types/utils/colors.d.ts +1 -0
- package/dist/types/utils/index.d.ts +1 -0
- package/dist/types/utils/payment.d.ts +37 -0
- package/package.json +3 -3
- package/dist/types/core/Session.d.ts +0 -16
|
@@ -5,16 +5,15 @@ import "../../utils/card-brand/brands.js";
|
|
|
5
5
|
import "../../utils/system-info/get-browser-info.js";
|
|
6
6
|
import { cssVarPrefix, normalizedClass, formatAmount } from "../../utils/format.js";
|
|
7
7
|
import { redirectToPayment } from "../../utils/redirect.js";
|
|
8
|
+
import { formatPaymentResult } from "../../utils/payment.js";
|
|
8
9
|
import { isTimeoutError } from "../../api/http.js";
|
|
9
|
-
import { PaymentCategory, COMMON_CLASS_NAME, PaymentMethod, SessionMode } from "../../constant.js";
|
|
10
10
|
import { getBrowserParams } from "../../api/modules/get-browser-params.js";
|
|
11
|
+
import { PaymentCategory, COMMON_CLASS_NAME, PaymentMethod, SessionMode } from "../../constant.js";
|
|
11
12
|
import { getMayBankQRPayInfo, mayBankQRPay } from "../../api/modules/may-bank-qr-pay/index.js";
|
|
12
13
|
import { PayKKaError } from "../../core/error.js";
|
|
13
|
-
import { hidePaymentButton } from "../../config.js";
|
|
14
14
|
import { usePayState } from "../../hooks/usePayState.js";
|
|
15
15
|
import { useRetry } from "../../hooks/useRetry.js";
|
|
16
16
|
import { createEmailCore, EmailField } from "../EmailField/EmailField.js";
|
|
17
|
-
import { createAddressCore } from "../../core/Address.js";
|
|
18
17
|
import { SubmitButton } from "../SubmitButton/index.js";
|
|
19
18
|
import "../internal/Form/type.js";
|
|
20
19
|
import "../internal/Form/context.js";
|
|
@@ -25,300 +24,334 @@ import { Info } from "../internal/Info/Info.js";
|
|
|
25
24
|
import { GuideCard } from "../GuideCard/index.js";
|
|
26
25
|
const { bem } = useBEM("may-bank-qr-pay");
|
|
27
26
|
const fieldClassNames = bem("field");
|
|
28
|
-
const MayBankQRPay = w(
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
27
|
+
const MayBankQRPay = w(
|
|
28
|
+
(props, ref) => {
|
|
29
|
+
var _a, _b, _c, _d, _e, _f;
|
|
30
|
+
const {
|
|
31
|
+
session,
|
|
32
|
+
showEmail = false,
|
|
33
|
+
showAddress = false,
|
|
34
|
+
redirectMode = "auto",
|
|
35
|
+
core,
|
|
36
|
+
autoQuery = true,
|
|
37
|
+
showGuideCard = true,
|
|
38
|
+
hidePaymentButton = false
|
|
39
|
+
} = props;
|
|
40
|
+
F(ref, () => ({
|
|
41
|
+
stopRetry: () => {
|
|
42
|
+
setSubmitButtonStatus("unSubmit");
|
|
43
|
+
stopReFetchPayInfo();
|
|
44
|
+
},
|
|
45
|
+
startRetry: (timeout) => {
|
|
46
|
+
setSubmitButtonStatus("loading");
|
|
47
|
+
startReFetchPayInfo({ timeout });
|
|
48
|
+
},
|
|
49
|
+
updateAddress: () => {
|
|
50
|
+
var _a2;
|
|
51
|
+
if (!(fieldStatus == null ? void 0 : fieldStatus.address.show))
|
|
52
|
+
return;
|
|
53
|
+
const newForm = Object.assign(form, { address: addressCore.getAddressState() });
|
|
54
|
+
setForm(newForm);
|
|
55
|
+
(_a2 = addressFieldRef.current) == null ? void 0 : _a2.update(addressCore.getAddressState());
|
|
56
|
+
validateForm();
|
|
57
|
+
},
|
|
58
|
+
updateEmail: () => {
|
|
59
|
+
var _a2;
|
|
60
|
+
if (!(fieldStatus == null ? void 0 : fieldStatus.email.show))
|
|
61
|
+
return;
|
|
62
|
+
const newForm = Object.assign(form, { email: emailState.email });
|
|
63
|
+
setForm(newForm);
|
|
64
|
+
(_a2 = emailFieldRef.current) == null ? void 0 : _a2.update(emailState.email);
|
|
65
|
+
validateForm();
|
|
66
|
+
},
|
|
67
|
+
payment: () => {
|
|
68
|
+
hidePaymentButton && onSubmit();
|
|
69
|
+
}
|
|
70
|
+
}));
|
|
71
|
+
const addressCore = core.getAddressCore();
|
|
72
|
+
const emailState = createEmailCore();
|
|
73
|
+
const addressFieldRef = A(null);
|
|
74
|
+
const emailFieldRef = A(null);
|
|
75
|
+
const [isCheckoutEnabled, setIsCheckoutEnabled] = h(false);
|
|
76
|
+
const { setErrorMsg, i18n, errorMsg, sessionReady } = usePayState(session, props.core);
|
|
77
|
+
const [submitButtonStatus, setSubmitButtonStatus] = h("unSubmit");
|
|
78
|
+
const formRef = A(null);
|
|
79
|
+
const [form, setForm] = h({
|
|
80
|
+
email: "",
|
|
81
|
+
address: {
|
|
82
|
+
country: void 0,
|
|
83
|
+
province: void 0,
|
|
84
|
+
city: void 0,
|
|
85
|
+
area: void 0,
|
|
86
|
+
postCode: void 0,
|
|
87
|
+
address1: void 0,
|
|
88
|
+
address2: void 0
|
|
89
|
+
}
|
|
90
|
+
});
|
|
91
|
+
const [validated, setValidated] = h(false);
|
|
92
|
+
const [fieldStatus, setFieldStatus] = h();
|
|
93
|
+
const initFieldStatus = () => {
|
|
94
|
+
const { field, sessionMode } = session.checkout;
|
|
95
|
+
const { email, address } = field;
|
|
96
|
+
if (sessionMode === SessionMode.COMPONENT) {
|
|
97
|
+
if (email.disabled) {
|
|
98
|
+
email.show = showEmail;
|
|
99
|
+
}
|
|
100
|
+
if (showAddress && !(address == null ? void 0 : address.show)) {
|
|
101
|
+
address.show = true;
|
|
102
|
+
}
|
|
103
|
+
}
|
|
104
|
+
setFieldStatus({ ...field });
|
|
105
|
+
};
|
|
106
|
+
const processOnSuccess = (res) => {
|
|
107
|
+
var _a2, _b2;
|
|
108
|
+
setSubmitButtonStatus("success");
|
|
109
|
+
(_b2 = props.onSuccess) == null ? void 0 : _b2.call(props, formatPaymentResult({
|
|
110
|
+
...res,
|
|
111
|
+
returnUrl: (_a2 = session == null ? void 0 : session.checkout) == null ? void 0 : _a2.returnUrl
|
|
112
|
+
}));
|
|
113
|
+
};
|
|
114
|
+
y(() => {
|
|
115
|
+
if (!sessionReady) {
|
|
51
116
|
return;
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
updateEmail: () => {
|
|
56
|
-
var _a2;
|
|
57
|
-
if (!(fieldStatus == null ? void 0 : fieldStatus.email.show))
|
|
117
|
+
}
|
|
118
|
+
const { bill = {}, supportMethods = [], country } = (session == null ? void 0 : session.checkout) || {};
|
|
119
|
+
if (!supportMethods.includes(PaymentMethod.MAY_BANK_QR_PAY)) {
|
|
58
120
|
return;
|
|
59
|
-
setForm(Object.assign(form, { email: emailState.email }));
|
|
60
|
-
form.email = emailState.email;
|
|
61
|
-
(_a2 = emailFieldRef.current) == null ? void 0 : _a2.update(emailState.email);
|
|
62
|
-
validateForm();
|
|
63
|
-
},
|
|
64
|
-
payment: () => {
|
|
65
|
-
hidePaymentButton && onSubmit();
|
|
66
|
-
}
|
|
67
|
-
}));
|
|
68
|
-
const addressState = createAddressCore();
|
|
69
|
-
const emailState = createEmailCore();
|
|
70
|
-
const addressFieldRef = A(null);
|
|
71
|
-
const emailFieldRef = A(null);
|
|
72
|
-
const [isCheckoutEnabled, setIsCheckoutEnabled] = h(false);
|
|
73
|
-
const { setErrorMsg, i18n, errorMsg, sessionReady } = usePayState(session, props.core);
|
|
74
|
-
const [submitButtonStatus, setSubmitButtonStatus] = h("unSubmit");
|
|
75
|
-
const formRef = A(null);
|
|
76
|
-
const [form, setForm] = h({
|
|
77
|
-
email: "",
|
|
78
|
-
address: {
|
|
79
|
-
country: "",
|
|
80
|
-
province: "",
|
|
81
|
-
city: "",
|
|
82
|
-
area: "",
|
|
83
|
-
postCode: "",
|
|
84
|
-
address1: "",
|
|
85
|
-
address2: ""
|
|
86
|
-
}
|
|
87
|
-
});
|
|
88
|
-
const [validated, setValidated] = h(false);
|
|
89
|
-
const [fieldStatus, setFieldStatus] = h();
|
|
90
|
-
const initFieldStatus = () => {
|
|
91
|
-
const { field, sessionMode } = session.checkout;
|
|
92
|
-
const { email, address } = field;
|
|
93
|
-
if (sessionMode === SessionMode.COMPONENT) {
|
|
94
|
-
if (email.disabled) {
|
|
95
|
-
email.show = showEmail;
|
|
96
121
|
}
|
|
97
|
-
|
|
98
|
-
|
|
122
|
+
initFieldStatus();
|
|
123
|
+
setIsCheckoutEnabled(true);
|
|
124
|
+
country && addressCore.setCountry(country);
|
|
125
|
+
form.email = bill.email ?? "";
|
|
126
|
+
form.address.country = country;
|
|
127
|
+
if (autoQuery && core.processingPaymentMethod === PaymentMethod.MAY_BANK_QR_PAY) {
|
|
128
|
+
setSubmitButtonStatus("loading");
|
|
129
|
+
startReFetchPayInfo();
|
|
99
130
|
}
|
|
100
|
-
}
|
|
101
|
-
|
|
102
|
-
};
|
|
103
|
-
y(() => {
|
|
104
|
-
if (!sessionReady) {
|
|
105
|
-
return;
|
|
106
|
-
}
|
|
107
|
-
const { bill = {}, paymentMethod = [] } = (session == null ? void 0 : session.checkout) || {};
|
|
108
|
-
if (!paymentMethod.includes(PaymentMethod.MAY_BANK_QR_PAY)) {
|
|
109
|
-
return;
|
|
110
|
-
}
|
|
111
|
-
initFieldStatus();
|
|
112
|
-
setIsCheckoutEnabled(true);
|
|
113
|
-
form.email = bill.email ?? "";
|
|
114
|
-
if (autoQuery && core.processingPaymentMethod === PaymentMethod.MAY_BANK_QR_PAY) {
|
|
115
|
-
setSubmitButtonStatus("loading");
|
|
116
|
-
startReFetchPayInfo();
|
|
117
|
-
}
|
|
118
|
-
}, [sessionReady]);
|
|
119
|
-
const processOnError = (error) => {
|
|
120
|
-
var _a2;
|
|
121
|
-
(_a2 = props.onError) == null ? void 0 : _a2.call(props, error);
|
|
122
|
-
core.resetEnablePaymentMethod();
|
|
123
|
-
};
|
|
124
|
-
const onTimeout = q(
|
|
125
|
-
(message) => {
|
|
131
|
+
}, [sessionReady]);
|
|
132
|
+
const processOnError = (error) => {
|
|
126
133
|
var _a2;
|
|
127
|
-
|
|
128
|
-
setSubmitButtonStatus("unSubmit");
|
|
129
|
-
(_a2 = props.onTimeout) == null ? void 0 : _a2.call(props);
|
|
134
|
+
(_a2 = props.onError) == null ? void 0 : _a2.call(props, error);
|
|
130
135
|
core.resetEnablePaymentMethod();
|
|
131
|
-
}
|
|
132
|
-
|
|
133
|
-
|
|
134
|
-
|
|
135
|
-
|
|
136
|
-
|
|
137
|
-
|
|
138
|
-
|
|
139
|
-
return {
|
|
140
|
-
sessionId: session.sessionId,
|
|
141
|
-
clientKey: session.clientKey,
|
|
142
|
-
payment: {
|
|
143
|
-
paymentMethod: PaymentMethod.MAY_BANK_QR_PAY
|
|
144
|
-
},
|
|
145
|
-
bill: {
|
|
146
|
-
email: form.email,
|
|
147
|
-
...form.address,
|
|
148
|
-
province: addressState.getLabel(form.address.province, addressState.getProvinceOption()) ?? form.address.province,
|
|
149
|
-
city: addressState.getLabel(form.address.city, addressState.getCityOptions()) ?? form.address.city
|
|
136
|
+
};
|
|
137
|
+
const onTimeout = q(
|
|
138
|
+
(message) => {
|
|
139
|
+
var _a2;
|
|
140
|
+
setErrorMsg(message || i18n.get("common.payTimeout"));
|
|
141
|
+
setSubmitButtonStatus("unSubmit");
|
|
142
|
+
(_a2 = props.onTimeout) == null ? void 0 : _a2.call(props);
|
|
143
|
+
core.resetEnablePaymentMethod();
|
|
150
144
|
},
|
|
151
|
-
|
|
145
|
+
[i18n, props.onTimeout]
|
|
146
|
+
);
|
|
147
|
+
const { start: startReFetchPayInfo, stop: stopReFetchPayInfo } = useRetry(
|
|
148
|
+
(timeout) => pay(true, timeout),
|
|
149
|
+
{ onTimeout: () => onTimeout(i18n.get("common.queryTimeout")) }
|
|
150
|
+
);
|
|
151
|
+
const getPaymentParams = async () => {
|
|
152
|
+
return {
|
|
153
|
+
sessionId: session.sessionId,
|
|
154
|
+
clientKey: session.clientKey,
|
|
155
|
+
payment: {
|
|
156
|
+
paymentMethod: PaymentMethod.MAY_BANK_QR_PAY
|
|
157
|
+
},
|
|
158
|
+
bill: {
|
|
159
|
+
email: form.email,
|
|
160
|
+
addressLine1: form.address.address1,
|
|
161
|
+
addressLine2: form.address.address2,
|
|
162
|
+
postalCode: form.address.postCode,
|
|
163
|
+
country: form.address.country,
|
|
164
|
+
district: form.address.area,
|
|
165
|
+
state: form.address.province ? addressCore.getLabel(form.address.province, addressCore.getProvinceOption()) ?? form.address.province : void 0,
|
|
166
|
+
city: form.address.city ? addressCore.getLabel(form.address.city, addressCore.getCityOptions()) ?? form.address.city : void 0
|
|
167
|
+
},
|
|
168
|
+
browser: await getBrowserParams()
|
|
169
|
+
};
|
|
152
170
|
};
|
|
153
|
-
|
|
154
|
-
|
|
155
|
-
|
|
156
|
-
|
|
157
|
-
|
|
158
|
-
|
|
159
|
-
|
|
160
|
-
|
|
161
|
-
|
|
162
|
-
|
|
163
|
-
|
|
164
|
-
|
|
165
|
-
|
|
166
|
-
|
|
167
|
-
|
|
168
|
-
|
|
169
|
-
} else
|
|
170
|
-
|
|
171
|
-
|
|
172
|
-
|
|
173
|
-
|
|
174
|
-
|
|
175
|
-
|
|
176
|
-
|
|
177
|
-
|
|
178
|
-
|
|
179
|
-
|
|
180
|
-
|
|
181
|
-
|
|
182
|
-
|
|
183
|
-
|
|
184
|
-
|
|
171
|
+
const pay = async (search = false, timeout) => {
|
|
172
|
+
var _a2, _b2, _c2, _d2, _e2, _f2, _g;
|
|
173
|
+
try {
|
|
174
|
+
const requestOptions = { locale: i18n.locale, timeout };
|
|
175
|
+
let res = null;
|
|
176
|
+
if (search) {
|
|
177
|
+
const extraParams = (_b2 = (_a2 = core.config)._getExtraParams) == null ? void 0 : _b2.call(_a2, "query", PaymentMethod.MAY_BANK_QR_PAY);
|
|
178
|
+
res = await getMayBankQRPayInfo(
|
|
179
|
+
{
|
|
180
|
+
sessionId: session.sessionId,
|
|
181
|
+
clientKey: session.clientKey,
|
|
182
|
+
paymentMethod: PaymentMethod.MAY_BANK_QR_PAY
|
|
183
|
+
},
|
|
184
|
+
extraParams,
|
|
185
|
+
requestOptions
|
|
186
|
+
);
|
|
187
|
+
} else {
|
|
188
|
+
const extraParams = (_d2 = (_c2 = core.config)._getExtraParams) == null ? void 0 : _d2.call(
|
|
189
|
+
_c2,
|
|
190
|
+
"payment",
|
|
191
|
+
PaymentMethod.MAY_BANK_QR_PAY
|
|
192
|
+
);
|
|
193
|
+
res = await mayBankQRPay(await getPaymentParams(), extraParams, requestOptions);
|
|
194
|
+
}
|
|
195
|
+
!search && ((_e2 = props.onSubmitResponse) == null ? void 0 : _e2.call(props, res));
|
|
196
|
+
const { status, orderStatus, errorMessage, errorCode, payInfo, sessionId } = res;
|
|
197
|
+
sessionId && (session.sessionId = sessionId);
|
|
198
|
+
if (status === "PROCESSING") {
|
|
199
|
+
if (!orderStatus) {
|
|
200
|
+
setSubmitButtonStatus("unSubmit");
|
|
201
|
+
return { end: true };
|
|
202
|
+
} else if (orderStatus === "SUCCESS") {
|
|
203
|
+
processOnSuccess(res);
|
|
204
|
+
return { end: true };
|
|
205
|
+
} else if (orderStatus === "FAILURE") {
|
|
206
|
+
errorMessage && setErrorMsg(errorMessage);
|
|
207
|
+
setSubmitButtonStatus("unSubmit");
|
|
208
|
+
processOnError(new PayKKaError("API_ERROR", errorMessage, { code: errorCode }));
|
|
209
|
+
return { end: true };
|
|
210
|
+
} else if (orderStatus === "PROCESSING") {
|
|
211
|
+
if (!search) {
|
|
212
|
+
if (redirectMode === "auto" && payInfo) {
|
|
213
|
+
redirectToPayment(payInfo);
|
|
214
|
+
return { end: true };
|
|
215
|
+
} else {
|
|
216
|
+
startReFetchPayInfo();
|
|
217
|
+
}
|
|
185
218
|
}
|
|
219
|
+
return { end: false };
|
|
220
|
+
} else if (orderStatus === "CANCELED") {
|
|
221
|
+
setSubmitButtonStatus("unSubmit");
|
|
222
|
+
(_f2 = props.onTimeout) == null ? void 0 : _f2.call(props);
|
|
223
|
+
core.resetEnablePaymentMethod();
|
|
224
|
+
return { end: true };
|
|
186
225
|
}
|
|
187
|
-
|
|
188
|
-
|
|
226
|
+
} else if (status === "SUCCESS") {
|
|
227
|
+
processOnSuccess(res);
|
|
228
|
+
return { end: true };
|
|
229
|
+
} else if (status === "EXPIRED") {
|
|
189
230
|
setSubmitButtonStatus("unSubmit");
|
|
190
|
-
(
|
|
191
|
-
core.resetEnablePaymentMethod();
|
|
231
|
+
(_g = props.onExpired) == null ? void 0 : _g.call(props);
|
|
192
232
|
return { end: true };
|
|
193
233
|
}
|
|
194
|
-
} else if (status === "SUCCESS") {
|
|
195
|
-
setSubmitButtonStatus("success");
|
|
196
|
-
(_d2 = props.onSuccess) == null ? void 0 : _d2.call(props);
|
|
197
|
-
return { end: true };
|
|
198
|
-
} else if (status === "EXPIRED") {
|
|
199
234
|
setSubmitButtonStatus("unSubmit");
|
|
200
|
-
(_e2 = props.onExpired) == null ? void 0 : _e2.call(props);
|
|
201
235
|
return { end: true };
|
|
202
|
-
}
|
|
203
|
-
|
|
204
|
-
|
|
205
|
-
|
|
206
|
-
|
|
207
|
-
|
|
208
|
-
|
|
236
|
+
} catch (error) {
|
|
237
|
+
if (isTimeoutError(error)) {
|
|
238
|
+
if (search) {
|
|
239
|
+
return { end: false };
|
|
240
|
+
} else {
|
|
241
|
+
onTimeout();
|
|
242
|
+
return { end: true };
|
|
243
|
+
}
|
|
209
244
|
} else {
|
|
210
|
-
|
|
245
|
+
const message = error.i18nKey ? i18n.get(error.i18nKey) : error.message;
|
|
246
|
+
message && setErrorMsg(message);
|
|
247
|
+
processOnError(new PayKKaError("API_ERROR", message, { code: error.code, cause: error }));
|
|
248
|
+
setSubmitButtonStatus("unSubmit");
|
|
211
249
|
return { end: true };
|
|
212
250
|
}
|
|
213
|
-
} else {
|
|
214
|
-
const message = error.i18nKey ? i18n.get(error.i18nKey) : error.message;
|
|
215
|
-
setErrorMsg(message);
|
|
216
|
-
processOnError(new PayKKaError("API_ERROR", message, { code: error.code, cause: error }));
|
|
217
|
-
setSubmitButtonStatus("unSubmit");
|
|
218
|
-
return { end: true };
|
|
219
|
-
}
|
|
220
|
-
}
|
|
221
|
-
};
|
|
222
|
-
const validateForm = () => {
|
|
223
|
-
var _a2;
|
|
224
|
-
(_a2 = formRef.current) == null ? void 0 : _a2.validate(void 0, false).then(() => {
|
|
225
|
-
setValidated(true);
|
|
226
|
-
}).catch(() => {
|
|
227
|
-
setValidated(false);
|
|
228
|
-
});
|
|
229
|
-
};
|
|
230
|
-
y(() => {
|
|
231
|
-
validateForm();
|
|
232
|
-
}, [form]);
|
|
233
|
-
const onSubmit = async () => {
|
|
234
|
-
var _a2;
|
|
235
|
-
setErrorMsg("");
|
|
236
|
-
(_a2 = formRef.current) == null ? void 0 : _a2.validate(async (errors) => {
|
|
237
|
-
var _a3;
|
|
238
|
-
(fieldStatus == null ? void 0 : fieldStatus.address.show) && addressState.setValidateAllFields(true);
|
|
239
|
-
(_a3 = props.onSubmit) == null ? void 0 : _a3.call(props, errors);
|
|
240
|
-
if (errors) {
|
|
241
|
-
setSubmitButtonStatus("unSubmit");
|
|
242
|
-
return;
|
|
243
251
|
}
|
|
252
|
+
};
|
|
253
|
+
const validateForm = () => {
|
|
254
|
+
var _a2;
|
|
255
|
+
(_a2 = formRef.current) == null ? void 0 : _a2.validate(void 0, false).then(() => {
|
|
256
|
+
setValidated(true);
|
|
257
|
+
}).catch(() => {
|
|
258
|
+
setValidated(false);
|
|
259
|
+
});
|
|
260
|
+
};
|
|
261
|
+
y(() => {
|
|
262
|
+
validateForm();
|
|
263
|
+
}, [form]);
|
|
264
|
+
const onSubmit = async () => {
|
|
265
|
+
var _a2;
|
|
244
266
|
setErrorMsg("");
|
|
245
|
-
|
|
246
|
-
|
|
247
|
-
|
|
248
|
-
|
|
249
|
-
|
|
250
|
-
|
|
251
|
-
|
|
252
|
-
|
|
253
|
-
|
|
254
|
-
|
|
255
|
-
|
|
256
|
-
|
|
257
|
-
|
|
267
|
+
(_a2 = formRef.current) == null ? void 0 : _a2.validate(async (errors) => {
|
|
268
|
+
var _a3;
|
|
269
|
+
(fieldStatus == null ? void 0 : fieldStatus.address.show) && addressCore.setValidateAllFields(true);
|
|
270
|
+
(_a3 = props.onSubmit) == null ? void 0 : _a3.call(props, errors);
|
|
271
|
+
if (errors) {
|
|
272
|
+
setSubmitButtonStatus("unSubmit");
|
|
273
|
+
return;
|
|
274
|
+
}
|
|
275
|
+
setErrorMsg("");
|
|
276
|
+
setSubmitButtonStatus("loading");
|
|
277
|
+
await pay();
|
|
278
|
+
});
|
|
279
|
+
};
|
|
280
|
+
const setFormRef = (dom) => {
|
|
281
|
+
formRef.current = dom;
|
|
282
|
+
dom && validateForm();
|
|
283
|
+
};
|
|
284
|
+
const Button = () => {
|
|
285
|
+
var _a2;
|
|
286
|
+
const transAmount = (_a2 = session == null ? void 0 : session.checkout) == null ? void 0 : _a2.transAmount;
|
|
287
|
+
const amountText = (transAmount == null ? void 0 : transAmount.amount) ? formatAmount(transAmount).jointSymbol() : "";
|
|
288
|
+
const text = i18n.get("common.pay") + (amountText ? ` ${amountText}` : "");
|
|
289
|
+
return /* @__PURE__ */ u(
|
|
290
|
+
SubmitButton,
|
|
291
|
+
{
|
|
292
|
+
className: bem("button"),
|
|
293
|
+
status: submitButtonStatus,
|
|
294
|
+
text,
|
|
295
|
+
loadingText: i18n.get("common.payProcessing"),
|
|
296
|
+
successText: i18n.get("common.paySuccess"),
|
|
297
|
+
onClick: onSubmit,
|
|
298
|
+
verified: validated
|
|
299
|
+
}
|
|
300
|
+
);
|
|
301
|
+
};
|
|
302
|
+
const Email = () => {
|
|
303
|
+
return /* @__PURE__ */ u(b, { children: (fieldStatus == null ? void 0 : fieldStatus.email.show) && /* @__PURE__ */ u("div", { className: fieldClassNames, children: /* @__PURE__ */ u(
|
|
304
|
+
EmailField,
|
|
305
|
+
{
|
|
306
|
+
ref: emailFieldRef,
|
|
307
|
+
value: form.email,
|
|
308
|
+
disabled: fieldStatus == null ? void 0 : fieldStatus.email.disabled
|
|
309
|
+
}
|
|
310
|
+
) }) });
|
|
311
|
+
};
|
|
312
|
+
const formStyle = {
|
|
313
|
+
[cssVarPrefix("button-bg-color")]: (_a = session == null ? void 0 : session.colors) == null ? void 0 : _a.primary,
|
|
314
|
+
[cssVarPrefix("button-bg-color-hover")]: (_b = session == null ? void 0 : session.colors) == null ? void 0 : _b.primaryHover,
|
|
315
|
+
[cssVarPrefix("button-bg-color-active")]: (_c = session == null ? void 0 : session.colors) == null ? void 0 : _c.primaryActive,
|
|
316
|
+
[cssVarPrefix("button-text-color")]: (_e = (_d = session == null ? void 0 : session.checkout) == null ? void 0 : _d.theme) == null ? void 0 : _e.payButtonTextColor,
|
|
317
|
+
[cssVarPrefix("input-color")]: (_f = session == null ? void 0 : session.colors) == null ? void 0 : _f.primary
|
|
318
|
+
};
|
|
319
|
+
const ErrorMessage = () => {
|
|
320
|
+
return /* @__PURE__ */ u(b, { children: !!errorMsg && /* @__PURE__ */ u(Info, { content: errorMsg, style: { marginTop: "12px" } }) });
|
|
321
|
+
};
|
|
322
|
+
const Address = () => {
|
|
323
|
+
var _a2, _b2;
|
|
324
|
+
return /* @__PURE__ */ u(b, { children: (fieldStatus == null ? void 0 : fieldStatus.address.show) && /* @__PURE__ */ u("div", { className: fieldClassNames, children: /* @__PURE__ */ u(
|
|
325
|
+
AddressField,
|
|
326
|
+
{
|
|
327
|
+
ref: addressFieldRef,
|
|
328
|
+
value: form.address,
|
|
329
|
+
country: ((_a2 = session == null ? void 0 : session.checkout) == null ? void 0 : _a2.country) || ((_b2 = session == null ? void 0 : session.checkout) == null ? void 0 : _b2.bill.country),
|
|
330
|
+
onAddressChange: (value) => setForm(Object.assign(form, { address: value }))
|
|
331
|
+
}
|
|
332
|
+
) }) });
|
|
333
|
+
};
|
|
258
334
|
return /* @__PURE__ */ u(
|
|
259
|
-
|
|
335
|
+
CoreContext.Provider,
|
|
260
336
|
{
|
|
261
|
-
|
|
262
|
-
|
|
263
|
-
|
|
264
|
-
|
|
265
|
-
|
|
266
|
-
|
|
267
|
-
|
|
337
|
+
value: {
|
|
338
|
+
i18n,
|
|
339
|
+
session,
|
|
340
|
+
core
|
|
341
|
+
},
|
|
342
|
+
children: isCheckoutEnabled && i18n.ready.value && /* @__PURE__ */ u(b, { children: [
|
|
343
|
+
showGuideCard && /* @__PURE__ */ u(GuideCard, { type: PaymentCategory.MAY_BANK_QR_PAY }),
|
|
344
|
+
/* @__PURE__ */ u(Form, { form, ref: setFormRef, onFormChange: (form2) => setForm(form2), children: /* @__PURE__ */ u("div", { className: normalizedClass(COMMON_CLASS_NAME, bem()), style: formStyle, children: [
|
|
345
|
+
Email(),
|
|
346
|
+
Address(),
|
|
347
|
+
ErrorMessage(),
|
|
348
|
+
!hidePaymentButton && Button()
|
|
349
|
+
] }) })
|
|
350
|
+
] })
|
|
268
351
|
}
|
|
269
352
|
);
|
|
270
|
-
}
|
|
271
|
-
|
|
272
|
-
return /* @__PURE__ */ u(b, { children: (fieldStatus == null ? void 0 : fieldStatus.email.show) && /* @__PURE__ */ u("div", { className: fieldClassNames, children: /* @__PURE__ */ u(
|
|
273
|
-
EmailField,
|
|
274
|
-
{
|
|
275
|
-
ref: emailFieldRef,
|
|
276
|
-
value: form.email,
|
|
277
|
-
disabled: fieldStatus == null ? void 0 : fieldStatus.email.disabled
|
|
278
|
-
}
|
|
279
|
-
) }) });
|
|
280
|
-
};
|
|
281
|
-
const formStyle = {
|
|
282
|
-
[cssVarPrefix("button-bg-color")]: (_a = session == null ? void 0 : session.colors) == null ? void 0 : _a.primary,
|
|
283
|
-
[cssVarPrefix("button-bg-color-hover")]: (_b = session == null ? void 0 : session.colors) == null ? void 0 : _b.primaryHover,
|
|
284
|
-
[cssVarPrefix("button-bg-color-active")]: (_c = session == null ? void 0 : session.colors) == null ? void 0 : _c.primaryActive,
|
|
285
|
-
[cssVarPrefix("button-text-color")]: (_e = (_d = session == null ? void 0 : session.checkout) == null ? void 0 : _d.theme) == null ? void 0 : _e.payButtonTextColor,
|
|
286
|
-
[cssVarPrefix("input-color")]: (_f = session == null ? void 0 : session.colors) == null ? void 0 : _f.primary
|
|
287
|
-
};
|
|
288
|
-
const ErrorMessage = () => {
|
|
289
|
-
return /* @__PURE__ */ u(b, { children: !!errorMsg && /* @__PURE__ */ u(Info, { content: errorMsg, style: { marginTop: "12px" } }) });
|
|
290
|
-
};
|
|
291
|
-
const Address = () => {
|
|
292
|
-
var _a2, _b2;
|
|
293
|
-
return /* @__PURE__ */ u(b, { children: (fieldStatus == null ? void 0 : fieldStatus.address.show) && /* @__PURE__ */ u("div", { className: fieldClassNames, children: /* @__PURE__ */ u(
|
|
294
|
-
AddressField,
|
|
295
|
-
{
|
|
296
|
-
ref: addressFieldRef,
|
|
297
|
-
value: form.address,
|
|
298
|
-
country: ((_a2 = session == null ? void 0 : session.checkout) == null ? void 0 : _a2.country) || ((_b2 = session == null ? void 0 : session.checkout) == null ? void 0 : _b2.bill.country),
|
|
299
|
-
onAddressChange: (value) => setForm(Object.assign(form, { address: value }))
|
|
300
|
-
}
|
|
301
|
-
) }) });
|
|
302
|
-
};
|
|
303
|
-
return /* @__PURE__ */ u(
|
|
304
|
-
CoreContext.Provider,
|
|
305
|
-
{
|
|
306
|
-
value: {
|
|
307
|
-
i18n,
|
|
308
|
-
session
|
|
309
|
-
},
|
|
310
|
-
children: isCheckoutEnabled && i18n.ready.value && /* @__PURE__ */ u(b, { children: [
|
|
311
|
-
showGuideCard && /* @__PURE__ */ u(GuideCard, { type: PaymentCategory.MAY_BANK_QR_PAY }),
|
|
312
|
-
/* @__PURE__ */ u(Form, { form, ref: setFormRef, onFormChange: (form2) => setForm(form2), children: /* @__PURE__ */ u("div", { className: normalizedClass(COMMON_CLASS_NAME, bem()), style: formStyle, children: [
|
|
313
|
-
Email(),
|
|
314
|
-
Address(),
|
|
315
|
-
ErrorMessage(),
|
|
316
|
-
!hidePaymentButton && Button()
|
|
317
|
-
] }) })
|
|
318
|
-
] })
|
|
319
|
-
}
|
|
320
|
-
);
|
|
321
|
-
});
|
|
353
|
+
}
|
|
354
|
+
);
|
|
322
355
|
export {
|
|
323
356
|
MayBankQRPay
|
|
324
357
|
};
|