@paykka/card-checkout-ui 0.13.2 → 0.13.7

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (183) hide show
  1. package/dist/card-checkout-ui.js +20 -20
  2. package/dist/card-checkout-ui.umd.cjs +19 -19
  3. package/dist/es/_commonjsHelpers.js +1 -1
  4. package/dist/es/api/http.js +1 -0
  5. package/dist/es/api/modules/opay-wallet/index.js +16 -0
  6. package/dist/es/api/modules/paga-wallet/index.js +16 -0
  7. package/dist/es/api/modules/pic-pay/index.js +16 -0
  8. package/dist/es/api/modules/pix/index.js +16 -0
  9. package/dist/es/api/modules/risk/index.js +21 -0
  10. package/dist/es/api/modules/vietqr/index.js +4 -0
  11. package/dist/es/components/AccordionItem/AccordionItem.js +1 -0
  12. package/dist/es/components/AccountNameField/index.js +1 -0
  13. package/dist/es/components/AddressField/index.js +1 -0
  14. package/dist/es/components/AliPay/index.js +1 -0
  15. package/dist/es/components/ApplePay/index.js +1 -0
  16. package/dist/es/components/Boost/index.js +1 -0
  17. package/dist/es/components/Card/index.js +1 -0
  18. package/dist/es/components/CardBrands/index.js +1 -0
  19. package/dist/es/components/CardExpireDateField/index.js +1 -0
  20. package/dist/es/components/CardHolderNameField/index.js +1 -0
  21. package/dist/es/components/CardIBANField/index.js +1 -0
  22. package/dist/es/components/CardNo/index.js +1 -0
  23. package/dist/es/components/CardNumberField/index.js +1 -0
  24. package/dist/es/components/CardSecurityCodeField/index.js +1 -0
  25. package/dist/es/components/CardSelector/index.js +1 -0
  26. package/dist/es/components/CombinedCardInfo/index.js +1 -0
  27. package/dist/es/components/DropIn/index.js +43 -2
  28. package/dist/es/components/EmailField/EmailField.js +1 -0
  29. package/dist/es/components/EncryptedCard/index.js +1 -0
  30. package/dist/es/components/GooglePay/index.js +1 -0
  31. package/dist/es/components/GrabPay/index.js +1 -0
  32. package/dist/es/components/GuideCard/index.js +7 -1
  33. package/dist/es/components/LinePay/index.js +1 -0
  34. package/dist/es/components/MayBankQRPay/index.js +1 -0
  35. package/dist/es/components/NinePay/index.js +1 -0
  36. package/dist/es/components/RecurringTip/index.js +1 -0
  37. package/dist/es/components/Sepa/index.js +1 -0
  38. package/dist/es/components/ShopeePay/index.js +1 -0
  39. package/dist/es/components/SubmitButton/index.js +1 -0
  40. package/dist/es/components/TNGWallet/index.js +1 -0
  41. package/dist/es/components/ThreeDS/index.js +2 -1
  42. package/dist/es/components/WechatPay/index.js +1 -0
  43. package/dist/es/components/business/QRCodeModal/QRCodeModal.js +7 -6
  44. package/dist/es/components/business/QRCodeModal/index.js +1 -0
  45. package/dist/es/components/business/index.js +1 -0
  46. package/dist/es/components/index.js +6 -0
  47. package/dist/es/components/internal/Accordion/index.js +1 -0
  48. package/dist/es/components/internal/Button/Button.js +1 -0
  49. package/dist/es/components/internal/Button/index.js +1 -0
  50. package/dist/es/components/internal/CheckBox/CheckBox.js +1 -0
  51. package/dist/es/components/internal/CheckBox/index.js +1 -0
  52. package/dist/es/components/internal/Form/type.js +1 -0
  53. package/dist/es/components/internal/Info/Info.js +1 -0
  54. package/dist/es/components/internal/Info/index.js +1 -0
  55. package/dist/es/components/internal/Input/type.js +1 -0
  56. package/dist/es/components/internal/LoadingCheck/LoadingCheck.js +1 -0
  57. package/dist/es/components/internal/LoadingCheck/index.js +1 -0
  58. package/dist/es/components/internal/Modal/Modal.js +1 -0
  59. package/dist/es/components/internal/QRCode/QRCode.js +1 -0
  60. package/dist/es/components/internal/QRCode/index.js +1 -0
  61. package/dist/es/components/internal/Select/Select.js +1 -0
  62. package/dist/es/components/internal/Select/SelectMenu.js +1 -0
  63. package/dist/es/components/internal/Select/SelectMenuItem.js +1 -0
  64. package/dist/es/components/internal/icons/IconOpayWallet.js +71 -0
  65. package/dist/es/components/internal/icons/IconPagaWallet.js +141 -0
  66. package/dist/es/components/internal/icons/IconPaymaya.js +42 -86
  67. package/dist/es/components/internal/icons/IconPicPay.js +49 -0
  68. package/dist/es/components/internal/icons/IconPix.js +75 -0
  69. package/dist/es/components/internal/icons/IconVietqr.js +45 -0
  70. package/dist/es/components/internal/icons/IconVietqrComplete.js +49 -0
  71. package/dist/es/components/wallets/GCash/GCash.js +1 -0
  72. package/dist/es/components/wallets/OpayWallet/OpayWallet.js +347 -0
  73. package/dist/es/components/wallets/OpayWallet/index.js +1 -0
  74. package/dist/es/components/wallets/OpayWallet/opay-wallet.js +1 -0
  75. package/dist/es/components/wallets/OpayWallet/type.js +1 -0
  76. package/dist/es/components/wallets/PagaWallet/PagaWallet.js +347 -0
  77. package/dist/es/components/wallets/PagaWallet/index.js +1 -0
  78. package/dist/es/components/wallets/PagaWallet/paga-wallet.js +1 -0
  79. package/dist/es/components/wallets/PagaWallet/type.js +1 -0
  80. package/dist/es/components/wallets/Paymaya/Paymaya.js +1 -0
  81. package/dist/es/components/wallets/PicPay/PicPay.js +347 -0
  82. package/dist/es/components/wallets/PicPay/index.js +1 -0
  83. package/dist/es/components/wallets/PicPay/pic-pay.js +1 -0
  84. package/dist/es/components/wallets/PicPay/type.js +1 -0
  85. package/dist/es/components/wallets/Pix/Pix.js +347 -0
  86. package/dist/es/components/wallets/Pix/index.js +1 -0
  87. package/dist/es/components/wallets/Pix/pix2.js +1 -0
  88. package/dist/es/components/wallets/Pix/type.js +1 -0
  89. package/dist/es/components/wallets/Vietqr/Vietqr.js +381 -0
  90. package/dist/es/components/wallets/Vietqr/index.js +1 -0
  91. package/dist/es/components/wallets/Vietqr/type.js +1 -0
  92. package/dist/es/components/wallets/Vietqr/vietqr2.js +1 -0
  93. package/dist/es/components/wallets/Zalopay/Zalopay.js +2 -0
  94. package/dist/es/components/wallets/index.js +8 -0
  95. package/dist/es/constant.js +38 -2
  96. package/dist/es/core/checkout.js +4 -3
  97. package/dist/es/core/environment.js +1 -13
  98. package/dist/es/core/index.js +1 -0
  99. package/dist/es/core/theme.js +1 -0
  100. package/dist/es/hooks/index.js +1 -0
  101. package/dist/es/hooks/useI18n.js +1 -0
  102. package/dist/es/hooks/usePayState.js +2 -2
  103. package/dist/es/i18n/locales/de-DE.js +8 -2
  104. package/dist/es/i18n/locales/en-GB.js +8 -2
  105. package/dist/es/i18n/locales/es-ES.js +8 -2
  106. package/dist/es/i18n/locales/fr-FR.js +8 -2
  107. package/dist/es/i18n/locales/ja-JP.js +8 -2
  108. package/dist/es/i18n/locales/ko-KR.js +8 -2
  109. package/dist/es/i18n/locales/nl-NL.js +8 -2
  110. package/dist/es/i18n/locales/pt-PT.js +8 -2
  111. package/dist/es/i18n/locales/ru-RU.js +8 -2
  112. package/dist/es/i18n/locales/zh-CN.js +10 -4
  113. package/dist/es/i18n/locales/zh-HK.js +10 -4
  114. package/dist/es/i18n/locales/zh-TW.js +10 -4
  115. package/dist/es/index.js +12 -1
  116. package/dist/es/out/fraud-detection.js +25 -60
  117. package/dist/es/out/stripe-radar.js +92 -0
  118. package/dist/es/out/worldpay-ddc.js +14 -4
  119. package/dist/es/out/worldpay-jsc-origin.js +61 -0
  120. package/dist/es/out/worldpay-jsc.js +68 -0
  121. package/dist/es/style.css +1 -1
  122. package/dist/es/types/event.js +4 -0
  123. package/dist/es/types/fraud-detection.js +1 -0
  124. package/dist/style.css +1 -1
  125. package/dist/types/api/modules/index.d.ts +5 -0
  126. package/dist/types/api/modules/opay-wallet/index.d.ts +4 -0
  127. package/dist/types/api/modules/paga-wallet/index.d.ts +4 -0
  128. package/dist/types/api/modules/pic-pay/index.d.ts +4 -0
  129. package/dist/types/api/modules/pix/index.d.ts +4 -0
  130. package/dist/types/api/modules/risk/index.d.ts +5 -0
  131. package/dist/types/api/modules/vietqr/index.d.ts +4 -0
  132. package/dist/types/components/DropIn/type.d.ts +3 -2
  133. package/dist/types/components/business/QRCodeModal/type.d.ts +2 -0
  134. package/dist/types/components/index.d.ts +1 -3
  135. package/dist/types/components/internal/icons/IconOpayWallet.d.ts +2 -0
  136. package/dist/types/components/internal/icons/IconPagaWallet.d.ts +2 -0
  137. package/dist/types/components/internal/icons/IconPicPay.d.ts +2 -0
  138. package/dist/types/components/internal/icons/IconPix.d.ts +2 -0
  139. package/dist/types/components/internal/icons/IconVietqr.d.ts +2 -0
  140. package/dist/types/components/internal/icons/IconVietqrComplete.d.ts +2 -0
  141. package/dist/types/components/internal/icons/index.d.ts +6 -0
  142. package/dist/types/components/wallets/OpayWallet/OpayWallet.d.ts +10 -0
  143. package/dist/types/components/wallets/OpayWallet/index.d.ts +2 -0
  144. package/dist/types/components/wallets/OpayWallet/type.d.ts +40 -0
  145. package/dist/types/components/wallets/PagaWallet/PagaWallet.d.ts +10 -0
  146. package/dist/types/components/wallets/PagaWallet/index.d.ts +2 -0
  147. package/dist/types/components/wallets/PagaWallet/type.d.ts +40 -0
  148. package/dist/types/components/wallets/PicPay/PicPay.d.ts +10 -0
  149. package/dist/types/components/wallets/PicPay/index.d.ts +2 -0
  150. package/dist/types/components/wallets/PicPay/type.d.ts +40 -0
  151. package/dist/types/components/wallets/Pix/Pix.d.ts +10 -0
  152. package/dist/types/components/wallets/Pix/index.d.ts +2 -0
  153. package/dist/types/components/wallets/Pix/type.d.ts +40 -0
  154. package/dist/types/components/wallets/Vietqr/Vietqr.d.ts +10 -0
  155. package/dist/types/components/wallets/Vietqr/index.d.ts +2 -0
  156. package/dist/types/components/wallets/Vietqr/type.d.ts +39 -0
  157. package/dist/types/components/wallets/index.d.ts +8 -0
  158. package/dist/types/components/wallets/type.d.ts +9 -0
  159. package/dist/types/constant.d.ts +15 -1
  160. package/dist/types/core/environment.d.ts +1 -2
  161. package/dist/types/hooks/usePayState.d.ts +0 -1
  162. package/dist/types/i18n/locales/de-DE.d.ts +6 -0
  163. package/dist/types/i18n/locales/en-GB.d.ts +6 -0
  164. package/dist/types/i18n/locales/es-ES.d.ts +6 -0
  165. package/dist/types/i18n/locales/fr-FR.d.ts +6 -0
  166. package/dist/types/i18n/locales/ja-JP.d.ts +6 -0
  167. package/dist/types/i18n/locales/ko-KR.d.ts +6 -0
  168. package/dist/types/i18n/locales/nl-NL.d.ts +6 -0
  169. package/dist/types/i18n/locales/pt-PT.d.ts +6 -0
  170. package/dist/types/i18n/locales/ru-RU.d.ts +6 -0
  171. package/dist/types/i18n/locales/zh-CN.d.ts +6 -0
  172. package/dist/types/i18n/locales/zh-HK.d.ts +6 -0
  173. package/dist/types/i18n/locales/zh-TW.d.ts +6 -0
  174. package/dist/types/out/fraud-detection.d.ts +2 -5
  175. package/dist/types/out/stripe-radar.d.ts +21 -0
  176. package/dist/types/out/types.d.ts +2 -4
  177. package/dist/types/out/worldpay-ddc.d.ts +9 -2
  178. package/dist/types/out/worldpay-jsc-origin.d.ts +0 -0
  179. package/dist/types/out/worldpay-jsc.d.ts +38 -0
  180. package/dist/types/types/event.d.ts +28 -1
  181. package/dist/types/types/fraud-detection.d.ts +5 -5
  182. package/dist/types/types/message.d.ts +1 -0
  183. package/package.json +1 -1
@@ -0,0 +1,381 @@
1
+ import { w, F, A, h, y, q, u, b } from "../../../core.js";
2
+ import { useBEM } from "../../../hooks/useBEM.js";
3
+ import { CoreContext } from "../../../core/context.js";
4
+ import "../../../utils/card-brand/brands.js";
5
+ import "../../../utils/system-info/get-browser-info.js";
6
+ import { isMobile } from "../../../utils/system-info/get-system-info.js";
7
+ import { normalizedClass, formatAmount } from "../../../utils/format.js";
8
+ import { redirectToPayment } from "../../../utils/redirect.js";
9
+ import { processPaymentStatus } from "../../../utils/payment.js";
10
+ import { isTimeoutError } from "../../../api/http.js";
11
+ import { getBrowserParams } from "../../../api/modules/get-browser-params.js";
12
+ import { PaymentCategory, COMMON_CLASS_NAME, PaymentMethod, SessionMode } from "../../../constant.js";
13
+ import { getZalopayPayInfo, zalopayPay } from "../../../api/modules/zalopay/index.js";
14
+ import { PayKKaError } from "../../../core/error.js";
15
+ import "../../../out/worldpay-jsc-origin.js";
16
+ import { usePayState } from "../../../hooks/usePayState.js";
17
+ import { useRetry } from "../../../hooks/useRetry.js";
18
+ import { usePaymentStatus } from "../../../hooks/usePayment.js";
19
+ import { createEmailCore, EmailField } from "../../EmailField/EmailField.js";
20
+ import { SubmitButton } from "../../SubmitButton/index.js";
21
+ import { GuideCard } from "../../GuideCard/index.js";
22
+ import { AddressField } from "../../AddressField/index.js";
23
+ import { Info } from "../../internal/Info/Info.js";
24
+ import "../../internal/Form/type.js";
25
+ import "../../internal/Form/context.js";
26
+ import "../../internal/Form/FormItem.js";
27
+ import { Form } from "../../internal/Form/Form.js";
28
+ import { QRCodeModal } from "../../business/QRCodeModal/QRCodeModal.js";
29
+ import { IconVietqrComplete } from "../../internal/icons/IconVietqrComplete.js";
30
+ import "./vietqr2.js";
31
+ const { bem } = useBEM("vietqr");
32
+ const fieldClassNames = bem("field");
33
+ const Vietqr = w((props, ref) => {
34
+ var _a;
35
+ const {
36
+ session,
37
+ showEmail = false,
38
+ showAddress = false,
39
+ core,
40
+ redirectMode = "auto",
41
+ autoQuery = true,
42
+ showGuideCard = true,
43
+ enableQRCodeModal = true,
44
+ hidePaymentButton = false
45
+ } = props;
46
+ F(ref, () => ({
47
+ stopRetry: () => {
48
+ setPaymentButtonStatus("unSubmit");
49
+ stopReFetchPayInfo();
50
+ },
51
+ startRetry: (timeout) => {
52
+ setPaymentButtonStatus("loading");
53
+ startReFetchPayInfo({ timeout });
54
+ },
55
+ updateAddress: () => {
56
+ var _a2;
57
+ if (!(fieldStatus == null ? void 0 : fieldStatus.address.show))
58
+ return;
59
+ const newForm = Object.assign(form, { address: addressCore.getAddressState() });
60
+ setForm(newForm);
61
+ (_a2 = addressFieldRef.current) == null ? void 0 : _a2.update(addressCore.getAddressState());
62
+ validateForm();
63
+ },
64
+ updateEmail: () => {
65
+ var _a2;
66
+ if (!(fieldStatus == null ? void 0 : fieldStatus.email.show))
67
+ return;
68
+ const newForm = Object.assign(form, { email: emailState.email });
69
+ setForm(newForm);
70
+ (_a2 = emailFieldRef.current) == null ? void 0 : _a2.update(emailState.email);
71
+ validateForm();
72
+ },
73
+ payment: () => {
74
+ hidePaymentButton && onSubmit();
75
+ }
76
+ }));
77
+ const addressCore = core.getAddressCore();
78
+ const emailState = createEmailCore();
79
+ const addressFieldRef = A(null);
80
+ const emailFieldRef = A(null);
81
+ const [isCheckoutEnabled, setIsCheckoutEnabled] = h(false);
82
+ const { i18n, sessionReady } = usePayState(session);
83
+ const { errorMsg, setErrorMsg, paymentButtonStatus, setPaymentButtonStatus } = usePaymentStatus();
84
+ const formRef = A(null);
85
+ const [form, setForm] = h({
86
+ email: "",
87
+ address: {
88
+ country: void 0,
89
+ province: void 0,
90
+ city: void 0,
91
+ area: void 0,
92
+ postCode: void 0,
93
+ address1: void 0,
94
+ address2: void 0
95
+ }
96
+ });
97
+ const [validated, setValidated] = h(false);
98
+ const [fieldStatus, setFieldStatus] = h();
99
+ const [showQRCodeModal, setShowQRCodeModal] = h(false);
100
+ const [qrCodeInfo, setQrCodeInfo] = h();
101
+ const initFieldStatus = () => {
102
+ const { field, sessionMode } = session.checkout;
103
+ const { email, address } = field;
104
+ if (sessionMode === SessionMode.COMPONENT) {
105
+ if (email.disabled) {
106
+ email.show = showEmail;
107
+ }
108
+ if (showAddress && !(address == null ? void 0 : address.show)) {
109
+ address.show = true;
110
+ }
111
+ }
112
+ setFieldStatus({ ...field });
113
+ };
114
+ y(() => {
115
+ if (!sessionReady) {
116
+ return;
117
+ }
118
+ const { bill = {}, supportMethods = [], country } = (session == null ? void 0 : session.checkout) || {};
119
+ if (!supportMethods.includes(PaymentMethod.VIETQR)) {
120
+ return;
121
+ }
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.VIETQR) {
128
+ setPaymentButtonStatus("loading");
129
+ startReFetchPayInfo();
130
+ }
131
+ }, [sessionReady]);
132
+ const processOnError = (error) => {
133
+ var _a2;
134
+ setShowQRCodeModal(false);
135
+ (_a2 = props.onError) == null ? void 0 : _a2.call(props, error);
136
+ core.resetEnablePaymentMethod();
137
+ };
138
+ const onTimeout = q(
139
+ (message) => {
140
+ var _a2;
141
+ setShowQRCodeModal(false);
142
+ setErrorMsg(message || i18n.get("common.payTimeout"));
143
+ setPaymentButtonStatus("unSubmit");
144
+ (_a2 = props.onTimeout) == null ? void 0 : _a2.call(props, "retry");
145
+ core.resetEnablePaymentMethod();
146
+ },
147
+ [i18n, props.onTimeout]
148
+ );
149
+ const { start: startReFetchPayInfo, stop: stopReFetchPayInfo } = useRetry(
150
+ (timeout) => pay(true, timeout),
151
+ {
152
+ timeout: 10 * 60 * 1e3,
153
+ onTimeout: () => onTimeout(i18n.get("common.queryTimeout"))
154
+ }
155
+ );
156
+ const getPaymentParams = async () => {
157
+ return {
158
+ sessionId: session.sessionId,
159
+ clientKey: session.clientKey,
160
+ payment: {
161
+ paymentMethod: PaymentMethod.VIETQR
162
+ },
163
+ bill: {
164
+ email: form.email,
165
+ addressLine1: form.address.address1,
166
+ addressLine2: form.address.address2,
167
+ postalCode: form.address.postCode,
168
+ country: form.address.country,
169
+ district: form.address.area,
170
+ state: form.address.province ? addressCore.getLabel(form.address.province, addressCore.getProvinceOption()) ?? form.address.province : void 0,
171
+ city: form.address.city ? addressCore.getLabel(form.address.city, addressCore.getCityOptions()) ?? form.address.city : void 0
172
+ },
173
+ browser: await getBrowserParams()
174
+ };
175
+ };
176
+ const pay = async (search = false, timeout) => {
177
+ var _a2, _b, _c, _d, _e;
178
+ try {
179
+ const requestOptions = { locale: i18n.locale, timeout };
180
+ let res = null;
181
+ if (search) {
182
+ const extraParams = (_b = (_a2 = core.config)._getExtraParams) == null ? void 0 : _b.call(_a2, "query", PaymentMethod.VIETQR);
183
+ res = await getZalopayPayInfo(
184
+ {
185
+ sessionId: session.sessionId,
186
+ clientKey: session.clientKey,
187
+ paymentMethod: PaymentMethod.VIETQR
188
+ },
189
+ extraParams,
190
+ requestOptions
191
+ );
192
+ } else {
193
+ const extraParams = (_d = (_c = core.config)._getExtraParams) == null ? void 0 : _d.call(_c, "payment", PaymentMethod.VIETQR);
194
+ res = await zalopayPay(await getPaymentParams(), extraParams, requestOptions);
195
+ }
196
+ !search && ((_e = props.onSubmitResponse) == null ? void 0 : _e.call(props, res));
197
+ const { errorMessage, errorCode, payInfo = {}, sessionId } = res;
198
+ sessionId && (session.sessionId = sessionId);
199
+ const { paymentExpiredAt } = payInfo;
200
+ let end = true;
201
+ processPaymentStatus(res, {
202
+ onProcessing: () => {
203
+ if (!search && payInfo) {
204
+ if (isMobile()) {
205
+ if (redirectMode === "auto") {
206
+ redirectToPayment(payInfo);
207
+ return;
208
+ }
209
+ } else {
210
+ if (enableQRCodeModal) {
211
+ setShowQRCodeModal(true);
212
+ setQrCodeInfo({
213
+ qrCode: payInfo.qr_code || payInfo.request_url,
214
+ expiredTime: paymentExpiredAt
215
+ });
216
+ }
217
+ startReFetchPayInfo();
218
+ }
219
+ }
220
+ end = false;
221
+ },
222
+ onSuccess: () => {
223
+ var _a3;
224
+ setShowQRCodeModal(false);
225
+ setPaymentButtonStatus("success");
226
+ (_a3 = props.onSuccess) == null ? void 0 : _a3.call(props, res);
227
+ },
228
+ onFailure: () => {
229
+ errorMessage && setErrorMsg(errorMessage);
230
+ setPaymentButtonStatus("unSubmit");
231
+ processOnError(new PayKKaError("API_ERROR", errorMessage, { code: errorCode }));
232
+ },
233
+ onCanceled: () => {
234
+ var _a3;
235
+ core.resetEnablePaymentMethod();
236
+ setPaymentButtonStatus("unSubmit");
237
+ (_a3 = props.onTimeout) == null ? void 0 : _a3.call(props, "channel");
238
+ },
239
+ onExpired: () => {
240
+ var _a3;
241
+ setShowQRCodeModal(false);
242
+ setPaymentButtonStatus("unSubmit");
243
+ (_a3 = props.onExpired) == null ? void 0 : _a3.call(props);
244
+ },
245
+ onDefault: () => {
246
+ setPaymentButtonStatus("unSubmit");
247
+ }
248
+ });
249
+ return { end };
250
+ } catch (error) {
251
+ if (isTimeoutError(error)) {
252
+ if (search) {
253
+ return { end: false };
254
+ } else {
255
+ onTimeout();
256
+ return { end: true };
257
+ }
258
+ } else {
259
+ const message = error.i18nKey ? i18n.get(error.i18nKey) : error.message;
260
+ message && setErrorMsg(message);
261
+ processOnError(new PayKKaError("API_ERROR", message, { code: error.code, cause: error }));
262
+ setPaymentButtonStatus("unSubmit");
263
+ return { end: true };
264
+ }
265
+ }
266
+ };
267
+ const validateForm = () => {
268
+ var _a2;
269
+ (_a2 = formRef.current) == null ? void 0 : _a2.validate(void 0, false).then(() => {
270
+ setValidated(true);
271
+ }).catch(() => {
272
+ setValidated(false);
273
+ });
274
+ };
275
+ y(() => {
276
+ validateForm();
277
+ }, [form]);
278
+ const onSubmit = async () => {
279
+ var _a2;
280
+ setErrorMsg("");
281
+ (_a2 = formRef.current) == null ? void 0 : _a2.validate(async (errors) => {
282
+ var _a3;
283
+ (fieldStatus == null ? void 0 : fieldStatus.address.show) && addressCore.setValidateAllFields(true);
284
+ (_a3 = props.onSubmit) == null ? void 0 : _a3.call(props, errors);
285
+ if (errors) {
286
+ setPaymentButtonStatus("unSubmit");
287
+ return;
288
+ }
289
+ setErrorMsg("");
290
+ setPaymentButtonStatus("loading");
291
+ await pay();
292
+ });
293
+ };
294
+ const handleCloseQRCodeModal = () => {
295
+ var _a2;
296
+ setPaymentButtonStatus("unSubmit");
297
+ stopReFetchPayInfo();
298
+ setShowQRCodeModal(false);
299
+ setQrCodeInfo(void 0);
300
+ (_a2 = props.onCloseModal) == null ? void 0 : _a2.call(props);
301
+ };
302
+ const setFormRef = (dom) => {
303
+ formRef.current = dom;
304
+ dom && validateForm();
305
+ };
306
+ const PaymentButton = () => {
307
+ var _a2;
308
+ const transAmount = (_a2 = session == null ? void 0 : session.checkout) == null ? void 0 : _a2.transAmount;
309
+ const amountText = (transAmount == null ? void 0 : transAmount.amount) ? formatAmount(transAmount).jointSymbol() : "";
310
+ const text = i18n.get("common.pay") + (amountText ? ` ${amountText}` : "");
311
+ return /* @__PURE__ */ u(
312
+ SubmitButton,
313
+ {
314
+ className: bem("button"),
315
+ status: paymentButtonStatus,
316
+ text,
317
+ onClick: onSubmit,
318
+ verified: validated
319
+ }
320
+ );
321
+ };
322
+ const Email = () => {
323
+ return /* @__PURE__ */ u(b, { children: (fieldStatus == null ? void 0 : fieldStatus.email.show) && /* @__PURE__ */ u("div", { className: fieldClassNames, children: /* @__PURE__ */ u(
324
+ EmailField,
325
+ {
326
+ ref: emailFieldRef,
327
+ value: form.email,
328
+ disabled: fieldStatus == null ? void 0 : fieldStatus.email.disabled
329
+ }
330
+ ) }) });
331
+ };
332
+ const ErrorMessage = () => {
333
+ return /* @__PURE__ */ u(b, { children: !!errorMsg && /* @__PURE__ */ u(Info, { content: errorMsg, style: { marginTop: "12px" } }) });
334
+ };
335
+ const Address = () => {
336
+ var _a2, _b;
337
+ return /* @__PURE__ */ u(b, { children: (fieldStatus == null ? void 0 : fieldStatus.address.show) && /* @__PURE__ */ u("div", { className: fieldClassNames, children: /* @__PURE__ */ u(
338
+ AddressField,
339
+ {
340
+ ref: addressFieldRef,
341
+ value: form.address,
342
+ country: ((_a2 = session == null ? void 0 : session.checkout) == null ? void 0 : _a2.country) || ((_b = session == null ? void 0 : session.checkout) == null ? void 0 : _b.bill.country),
343
+ onAddressChange: (value) => setForm(Object.assign(form, { address: value }))
344
+ }
345
+ ) }) });
346
+ };
347
+ return /* @__PURE__ */ u(
348
+ CoreContext.Provider,
349
+ {
350
+ value: {
351
+ i18n,
352
+ session,
353
+ core
354
+ },
355
+ children: isCheckoutEnabled && i18n.ready.value && /* @__PURE__ */ u(b, { children: [
356
+ showGuideCard && /* @__PURE__ */ u(GuideCard, { type: PaymentCategory.VIETQR }),
357
+ /* @__PURE__ */ u(Form, { form, ref: setFormRef, onFormChange: (form2) => setForm(form2), children: /* @__PURE__ */ u("div", { className: normalizedClass(COMMON_CLASS_NAME, bem()), children: [
358
+ Email(),
359
+ Address(),
360
+ ErrorMessage(),
361
+ !hidePaymentButton && PaymentButton()
362
+ ] }) }),
363
+ showQRCodeModal && /* @__PURE__ */ u(
364
+ QRCodeModal,
365
+ {
366
+ title: i18n.get("qrCode.scanByVietqr"),
367
+ qrCode: qrCodeInfo.qrCode,
368
+ icon: /* @__PURE__ */ u(IconVietqrComplete, { size: 22 }),
369
+ amount: (_a = session == null ? void 0 : session.checkout) == null ? void 0 : _a.transAmount,
370
+ expiredTime: qrCodeInfo.expiredTime,
371
+ borderColor: "#DC2626",
372
+ onClose: handleCloseQRCodeModal
373
+ }
374
+ )
375
+ ] })
376
+ }
377
+ );
378
+ });
379
+ export {
380
+ Vietqr
381
+ };
@@ -0,0 +1 @@
1
+ import "./Vietqr.js";
@@ -12,6 +12,7 @@ import { getBrowserParams } from "../../../api/modules/get-browser-params.js";
12
12
  import { PaymentCategory, COMMON_CLASS_NAME, PaymentMethod, SessionMode } from "../../../constant.js";
13
13
  import { getZalopayPayInfo, zalopayPay } from "../../../api/modules/zalopay/index.js";
14
14
  import { PayKKaError } from "../../../core/error.js";
15
+ import "../../../out/worldpay-jsc-origin.js";
15
16
  import { usePayState } from "../../../hooks/usePayState.js";
16
17
  import { useRetry } from "../../../hooks/useRetry.js";
17
18
  import { usePaymentStatus } from "../../../hooks/usePayment.js";
@@ -369,6 +370,7 @@ const Zalopay = w((props, ref) => {
369
370
  icon: /* @__PURE__ */ u(IconZalopayComplete, { size: 22 }),
370
371
  amount: (_a = session == null ? void 0 : session.checkout) == null ? void 0 : _a.transAmount,
371
372
  expiredTime: qrCodeInfo.expiredTime,
373
+ borderColor: "#00CF6A",
372
374
  onClose: handleCloseQRCodeModal
373
375
  }
374
376
  )
@@ -0,0 +1,8 @@
1
+ import "./GCash/GCash.js";
2
+ import "./Paymaya/Paymaya.js";
3
+ import "./Zalopay/Zalopay.js";
4
+ import "./Vietqr/Vietqr.js";
5
+ import "./Pix/Pix.js";
6
+ import "./PicPay/PicPay.js";
7
+ import "./PagaWallet/PagaWallet.js";
8
+ import "./OpayWallet/OpayWallet.js";
@@ -25,6 +25,11 @@ var PaymentMethod = /* @__PURE__ */ ((PaymentMethod2) => {
25
25
  PaymentMethod2["GCASH"] = "G_CASH";
26
26
  PaymentMethod2["PAYMAYA"] = "PAYMAYA";
27
27
  PaymentMethod2["ZALOPAY"] = "ZALOPAY";
28
+ PaymentMethod2["VIETQR"] = "VIETQR";
29
+ PaymentMethod2["PIX"] = "PIX";
30
+ PaymentMethod2["PIC_PAY"] = "PIC_PAY";
31
+ PaymentMethod2["OPAY_WALLET"] = "OPAY_WALLET";
32
+ PaymentMethod2["PAGA_WALLET"] = "PAGA_WALLET";
28
33
  PaymentMethod2["SEPA_DEBIT"] = "SEPA_DEBIT";
29
34
  return PaymentMethod2;
30
35
  })(PaymentMethod || {});
@@ -44,7 +49,12 @@ var PaymentCategory = /* @__PURE__ */ ((PaymentCategory2) => {
44
49
  PaymentCategory2["NINE_PAY"] = "ninePay";
45
50
  PaymentCategory2["GCASH"] = "gcash";
46
51
  PaymentCategory2["PAYMAYA"] = "paymaya";
52
+ PaymentCategory2["VIETQR"] = "vietqr";
47
53
  PaymentCategory2["ZALOPAY"] = "zalopay";
54
+ PaymentCategory2["PIX"] = "pix";
55
+ PaymentCategory2["PIC_PAY"] = "picPay";
56
+ PaymentCategory2["OPAY_WALLET"] = "opayWallet";
57
+ PaymentCategory2["PAGA_WALLET"] = "pagaWallet";
48
58
  return PaymentCategory2;
49
59
  })(PaymentCategory || {});
50
60
  const PaymentMethod2CategoryMap = {
@@ -107,8 +117,28 @@ const PaymentMethod2CategoryMap = {
107
117
  [
108
118
  "ZALOPAY"
109
119
  /* ZALOPAY */
110
- ]: "zalopay"
111
- /* ZALOPAY */
120
+ ]: "zalopay",
121
+ [
122
+ "VIETQR"
123
+ /* VIETQR */
124
+ ]: "vietqr",
125
+ [
126
+ "PIX"
127
+ /* PIX */
128
+ ]: "pix",
129
+ [
130
+ "PIC_PAY"
131
+ /* PIC_PAY */
132
+ ]: "picPay",
133
+ [
134
+ "OPAY_WALLET"
135
+ /* OPAY_WALLET */
136
+ ]: "opayWallet",
137
+ [
138
+ "PAGA_WALLET"
139
+ /* PAGA_WALLET */
140
+ ]: "pagaWallet"
141
+ /* PAGA_WALLET */
112
142
  };
113
143
  const CardPaymentMethods = [
114
144
  "VISA",
@@ -142,9 +172,15 @@ var SessionMode = /* @__PURE__ */ ((SessionMode2) => {
142
172
  SessionMode2["COMPONENT"] = "COMPONENT";
143
173
  return SessionMode2;
144
174
  })(SessionMode || {});
175
+ var ChannelCode = /* @__PURE__ */ ((ChannelCode2) => {
176
+ ChannelCode2["STRIPE"] = "STRIPE";
177
+ ChannelCode2["WORLDPAY"] = "WORLD_PAY";
178
+ return ChannelCode2;
179
+ })(ChannelCode || {});
145
180
  export {
146
181
  COMMON_CLASS_NAME,
147
182
  CardPaymentMethods,
183
+ ChannelCode,
148
184
  EAddressType,
149
185
  PREFIX,
150
186
  PaymentCategory,
@@ -29,9 +29,9 @@ var __privateMethod = (obj, member, method) => {
29
29
  var _id, _config, _envConfig, _session, _theme, _componentInsts, _addressCore, _initPromise, _doInit, doInit_fn;
30
30
  import { create } from "./create.js";
31
31
  import { Session } from "./session.js";
32
- import { setApiPrefix, setApiUrl, setCDNUrl, setFraudDetectionEnv, setCustomLocale } from "../config.js";
32
+ import { setApiPrefix, setApiUrl, setCDNUrl, setFraudDetectionEnv, fraudDetectionEnv, setCustomLocale } from "../config.js";
33
33
  import { PayKKaError } from "./error.js";
34
- import { apiEnv, cdnEnv, fraudDetectionEnv } from "./environment.js";
34
+ import { apiEnv, cdnEnv } from "./environment.js";
35
35
  import "../api/http.js";
36
36
  import { isEmptyObject } from "../utils/is.js";
37
37
  import "../utils/card-brand/brands.js";
@@ -39,6 +39,7 @@ import "../utils/system-info/get-browser-info.js";
39
39
  import { getUrlParam } from "../utils/location.js";
40
40
  import { deepMerge } from "../utils/object.js";
41
41
  import { genShortId } from "../utils/string.js";
42
+ import "../out/worldpay-jsc-origin.js";
42
43
  import { d } from "../core.js";
43
44
  import { AddressCore } from "./address.js";
44
45
  import { PayKKaTheme } from "./theme.js";
@@ -141,7 +142,7 @@ class PayKKaCheckout {
141
142
  }
142
143
  setApiUrl((_envConfig2 == null ? void 0 : _envConfig2.api) || apiEnv[env]);
143
144
  setCDNUrl((_envConfig2 == null ? void 0 : _envConfig2.cdn) || cdnEnv[env]);
144
- setFraudDetectionEnv((_envConfig2 == null ? void 0 : _envConfig2.fraudDetection) || fraudDetectionEnv[env]);
145
+ setFraudDetectionEnv((_envConfig2 == null ? void 0 : _envConfig2.fraudDetection) || env || fraudDetectionEnv);
145
146
  }
146
147
  initLocale() {
147
148
  const { locale } = __privateGet(this, _config);
@@ -8,19 +8,7 @@ const cdnEnv = {
8
8
  hk: "https://checkout.aq.paykka.com/cp",
9
9
  sandbox: "https://checkout-sandbox.aq.paykka.com/cp"
10
10
  };
11
- const fraudDetectionEnv = {
12
- eu: {
13
- SR: "pk_live_51QSXl2G2tOepMLcRVNu0S2T6MxyB1AIgCP5g7qMQvAviQS37v0wkPhJRKqfcbTql6ZkCkGktux4ixfXuZtFy6ZpP00awbGlLEq"
14
- },
15
- hk: {
16
- SR: "pk_live_51QSXh9Azq7GQL5iqwZNLz3KJ896MIUnai4H7H0z9DtlklJkgoH1VAlHKy382vWPqDm80nTy8MKUdJIKs0fFbTlKx006WcKWEDu"
17
- },
18
- sandbox: {
19
- SR: "pk_test_51QaC2P5VarcojPHdg13yagk5TqrGkIkeK8I21BgQUZe8BzyRmbtmOg3dKsXjkxt6JlsjyjJMTvBH9dFMCZWRxOkt00tWQ1eHFU"
20
- }
21
- };
22
11
  export {
23
12
  apiEnv,
24
- cdnEnv,
25
- fraudDetectionEnv
13
+ cdnEnv
26
14
  };
@@ -3,3 +3,4 @@ import "../core.js";
3
3
  import "../utils/card-brand/brands.js";
4
4
  import "../utils/system-info/get-browser-info.js";
5
5
  import "../api/http.js";
6
+ import "../out/worldpay-jsc-origin.js";
@@ -26,6 +26,7 @@ import { generateColors } from "../utils/colors.js";
26
26
  import { loadStyle } from "../utils/style.js";
27
27
  import { getThemeText } from "../utils/theme.js";
28
28
  import "../api/http.js";
29
+ import "../out/worldpay-jsc-origin.js";
29
30
  class PayKKaTheme {
30
31
  constructor(checkoutId) {
31
32
  /** 主题类名 */
@@ -3,3 +3,4 @@ import "../utils/system-info/get-browser-info.js";
3
3
  import "../core.js";
4
4
  import "../core/context.js";
5
5
  import "../api/http.js";
6
+ import "../out/worldpay-jsc-origin.js";
@@ -4,6 +4,7 @@ import "../utils/card-brand/brands.js";
4
4
  import "../utils/system-info/get-browser-info.js";
5
5
  import "../api/http.js";
6
6
  import { I18n } from "../i18n/I18n.js";
7
+ import "../out/worldpay-jsc-origin.js";
7
8
  function useI18n(locale) {
8
9
  const coreContext = x(CoreContext);
9
10
  const [_i18n] = h((coreContext == null ? void 0 : coreContext.i18n) ?? new I18n());
@@ -20,9 +20,9 @@ function usePayState(session, core) {
20
20
  );
21
21
  i18n.load(locale);
22
22
  const fraudDetection2 = getFraudDetectionInstance(fraudDetectionEnv, void 0, {
23
- onEvent: (type) => {
23
+ onEvent: (type, data) => {
24
24
  var _a2, _b;
25
- (_b = core == null ? void 0 : (_a2 = core.config).onEvent) == null ? void 0 : _b.call(_a2, type);
25
+ (_b = core == null ? void 0 : (_a2 = core.config).onEvent) == null ? void 0 : _b.call(_a2, type, data);
26
26
  }
27
27
  });
28
28
  setFraudDetection(fraudDetection2);
@@ -13,8 +13,13 @@ const deDE = {
13
13
  "dropIn.linePay.label": "LinePay",
14
14
  "dropIn.ninePay.label": "9Pay",
15
15
  "dropIn.gcash.label": "GCash",
16
- "dropIn.paymaya.label": "Paymaya",
16
+ "dropIn.paymaya.label": "Maya",
17
17
  "dropIn.zalopay.label": "Zalopay",
18
+ "dropIn.vietqr.label": "VietQR",
19
+ "dropIn.pix.label": "Pix",
20
+ "dropIn.picPay.label": "PicPay",
21
+ "dropIn.opayWallet.label": "OPay Wallet",
22
+ "dropIn.pagaWallet.label": "Paga Wallet",
18
23
  // card number
19
24
  "card.cardNumber.label": "Kartennummer",
20
25
  "card.cardNumber.incomplete": "Ihre Kartennummer ist unvollständig",
@@ -83,7 +88,8 @@ const deDE = {
83
88
  // qrCode
84
89
  "qrCode.expired": "Der QR-Code ist abgelaufen.",
85
90
  "qrCode.scanByGcash": "QR-Code mit GCash scannen",
86
- "qrCode.scanByZalopay": "QR-Code mit Zalopay scannen"
91
+ "qrCode.scanByZalopay": "QR-Code mit Zalopay scannen",
92
+ "qrCode.scanByVietqr": "QR-Code mit VietQR scannen"
87
93
  };
88
94
  export {
89
95
  deDE as default
@@ -13,8 +13,13 @@ const enGB = {
13
13
  "dropIn.linePay.label": "LinePay",
14
14
  "dropIn.ninePay.label": "9Pay",
15
15
  "dropIn.gcash.label": "GCash",
16
- "dropIn.paymaya.label": "Paymaya",
16
+ "dropIn.paymaya.label": "Maya",
17
17
  "dropIn.zalopay.label": "Zalopay",
18
+ "dropIn.vietqr.label": "VietQR",
19
+ "dropIn.pix.label": "Pix",
20
+ "dropIn.picPay.label": "PicPay",
21
+ "dropIn.opayWallet.label": "OPay Wallet",
22
+ "dropIn.pagaWallet.label": "Paga Wallet",
18
23
  // card number
19
24
  "card.cardNumber.label": "Card number",
20
25
  "card.cardNumber.incomplete": "Your card number is incomplete",
@@ -83,7 +88,8 @@ const enGB = {
83
88
  // qrCode
84
89
  "qrCode.expired": "The QR code has expired.",
85
90
  "qrCode.scanByGcash": "Scan QR code with GCash",
86
- "qrCode.scanByZalopay": "Scan QR code with Zalopay"
91
+ "qrCode.scanByZalopay": "Scan QR code with Zalopay",
92
+ "qrCode.scanByVietqr": "Scan QR code with VietQR"
87
93
  };
88
94
  export {
89
95
  enGB as default
@@ -13,8 +13,13 @@ const esES = {
13
13
  "dropIn.linePay.label": "LinePay",
14
14
  "dropIn.ninePay.label": "9Pay",
15
15
  "dropIn.gcash.label": "GCash",
16
- "dropIn.paymaya.label": "Paymaya",
16
+ "dropIn.paymaya.label": "Maya",
17
17
  "dropIn.zalopay.label": "Zalopay",
18
+ "dropIn.vietqr.label": "VietQR",
19
+ "dropIn.pix.label": "Pix",
20
+ "dropIn.picPay.label": "PicPay",
21
+ "dropIn.opayWallet.label": "OPay Wallet",
22
+ "dropIn.pagaWallet.label": "Paga Wallet",
18
23
  // card number
19
24
  "card.cardNumber.label": "Número de tarjeta",
20
25
  "card.cardNumber.incomplete": "Tu número de tarjeta está incompleto",
@@ -83,7 +88,8 @@ const esES = {
83
88
  // qrCode
84
89
  "qrCode.expired": "El código QR ha expirado.",
85
90
  "qrCode.scanByGcash": "Escanear el código QR con GCash",
86
- "qrCode.scanByZalopay": "Escanear el código QR con Zalopay"
91
+ "qrCode.scanByZalopay": "Escanear el código QR con Zalopay",
92
+ "qrCode.scanByVietqr": "Escanear el código QR con VietQR"
87
93
  };
88
94
  export {
89
95
  esES as default