@paykka/card-checkout-ui 0.6.0 → 0.8.0

package/dist/es/api/index.js

@@ -1,5 +1,3 @@
 import "../utils/card-brand/brands.js";
 import "../utils/system-info/get-browser-info.js";
-import "../i18n/util.js";
 import "../core.js";
-import "../i18n/locales/index.js";

package/dist/es/api/modules/checkout/index.js

@@ -12,23 +12,9 @@ async function queryCheckout({ sessionId, clientKey }, options) {
     options
   );
 }
-function getPaymentMethods({ sessionId, clientKey }, options) {
-  return http.post(
-    "/session/payment-methods",
-    {
-      session_id: sessionId,
-      client_key: clientKey
-    },
-    options
-  );
-}
 async function getCheckoutInfo({ sessionId, clientKey }, options) {
   const checkoutInfo = await queryCheckout({ sessionId, clientKey }, options);
-  let paymentMethods = {};
-  if (checkoutInfo) {
-    paymentMethods = await getPaymentMethods({ sessionId, clientKey }, options);
-  }
-  return checkoutMap({ ...checkoutInfo, ...paymentMethods });
+  return checkoutMap({ ...checkoutInfo, ...checkoutInfo == null ? void 0 : checkoutInfo.support_methods });
 }
 let getCheckoutInfoIns;
 async function onceGetCheckoutInfo({ sessionId, clientKey }, options) {

package/dist/es/api/modules/checkout/map.js

@@ -32,19 +32,31 @@ function formatPaymentMethodInfo(paymentMethods = []) {
     channelParams
   };
 }
+function formatAmountBreakdown(info = {}) {
+  return {
+    goodsTax: info.goods_tax,
+    shippingAmount: info.shipping_amount,
+    shippingTax: info.shipping_tax,
+    discount: info.discount,
+    other: info.other
+  };
+}
 function checkoutMap(res = {}) {
   var _a, _b, _c;
-  const { theme, bill, payment_methods } = res;
+  const { theme, bill, payment_methods, field } = res;
   const paymentMethodsInfo = formatPaymentMethodInfo(payment_methods);
+  const sessionMode = res.session_mode === "HOST" ? "HOSTED" : res.session_mode;
   return {
+    country: res.country,
     merchantId: res.merchant_id,
     sessionId: res.session_id,
     status: res.status,
     transAmount: amountMap(res.trans_amount),
     expireTime: res.expire_time,
-    sessionMode: res.session_mode,
+    sessionMode,
     merchantName: (_a = res.theme) == null ? void 0 : _a.merchant_name,
     returnUrl: res.return_url,
+    cancelUrl: res.cancel_url,
     locale: res.locale,
     paymentType: res.payment_type,
     goods: res.goods ? res.goods : [],
@@ -60,7 +72,8 @@ function checkoutMap(res = {}) {
       addressLine1: bill == null ? void 0 : bill.address_line1,
       addressLine2: bill == null ? void 0 : bill.address_line2,
       email: bill == null ? void 0 : bill.email,
-      descriptor: bill == null ? void 0 : bill.descriptor
+      descriptor: bill == null ? void 0 : bill.descriptor,
+      country: bill == null ? void 0 : bill.country
     },
     tokens: (_b = res.tokens) == null ? void 0 : _b.map((card) => ({
       token: card.token,
@@ -69,6 +82,21 @@ function checkoutMap(res = {}) {
       billingAddressFilled: card.billing_address_filled
     })),
     storePaymentMethod: (_c = res.payment) == null ? void 0 : _c.store_payment_method,
+    field: {
+      holderName: {
+        show: !!(field == null ? void 0 : field.holder_name_display),
+        required: !!(field == null ? void 0 : field.holder_name_required)
+      },
+      email: {
+        show: !!(field == null ? void 0 : field.bill_email_display),
+        required: !!(field == null ? void 0 : field.bill_email_required)
+      },
+      address: {
+        show: !!(field == null ? void 0 : field.bill_address_display),
+        required: !!(field == null ? void 0 : field.bill_address_required)
+      }
+    },
+    amountBreakdown: formatAmountBreakdown(res.amount_breakdown),
     ...paymentMethodsInfo
   };
 }

package/dist/es/api/modules/index.js

@@ -1,5 +1,3 @@
 import "../../utils/card-brand/brands.js";
 import "../../utils/system-info/get-browser-info.js";
-import "../../i18n/util.js";
 import "../../core.js";
-import "../../i18n/locales/index.js";

package/dist/es/components/AccountNameField/index.js

@@ -2,9 +2,6 @@ import { u } from "../../core.js";
 import "../../utils/card-brand/brands.js";
 import "../../utils/system-info/get-browser-info.js";
 import { useI18n } from "../../hooks/useI18n.js";
-import "../../core/context.js";
-import "../../i18n/util.js";
-import "../../i18n/locales/index.js";
 import "../internal/Form/type.js";
 import "../internal/Form/context.js";
 import { FormItem } from "../internal/Form/FormItem.js";

package/dist/es/components/AddressField/index.js

@@ -4,12 +4,9 @@ import { EAddressType } from "../../constant.js";
 import { createAddressCore } from "../../core/Address.js";
 import { useBEM } from "../../hooks/useBEM.js";
 import { useI18n } from "../../hooks/useI18n.js";
-import "../../core/context.js";
 import { isArray, isNil } from "../../utils/is.js";
 import "../../utils/card-brand/brands.js";
 import "../../utils/system-info/get-browser-info.js";
-import "../../i18n/util.js";
-import "../../i18n/locales/index.js";
 import "../internal/Form/type.js";
 import "../internal/Form/context.js";
 import { FormItem } from "../internal/Form/FormItem.js";
@@ -107,10 +104,8 @@ const AddressField = w((props, ref) => {
     });
   }
   async function getDefaultCountry() {
-    const language = navigator.language;
-    const areaCode = language.split("-");
-    const countryCode = (areaCode == null ? void 0 : areaCode[1]) ?? "US";
-    onSelectCountry(countryCode);
+    const countryCode = props.country;
+    onSelectCountry(countryCode || "");
     onAddressChange({
       country: addressState.country ?? "",
       province: addressState.province ?? "",

package/dist/es/components/AliPay/index.js

@@ -4,11 +4,10 @@ import { getAliPayInfo, aliPay } from "../../api/modules/ali-pay/index.js";
 import { isUndefined } from "../../utils/is.js";
 import "../../utils/card-brand/brands.js";
 import "../../utils/system-info/get-browser-info.js";
-import { formatAmount } from "../../utils/format.js";
-import { PaymentType } from "../../constant.js";
+import { cssVarPrefix, normalizedClass, formatAmount } from "../../utils/format.js";
+import { COMMON_CLASS_NAME, PaymentType } from "../../constant.js";
 import { CoreContext } from "../../core/context.js";
-import "../../i18n/util.js";
-import "../../i18n/locales/index.js";
+import { PayKKaError } from "../../core/error.js";
 import { createAddressCore } from "../../core/Address.js";
 import { useBEM } from "../../hooks/useBEM.js";
 import { usePayState } from "../../hooks/usePayState.js";
@@ -24,9 +23,11 @@ import { RecurringTip } from "../RecurringTip/index.js";
 import { SubmitButton } from "../SubmitButton/index.js";
 const { bem } = useBEM("ali-pay");
 const AliPay = w((props, ref) => {
+  var _a, _b, _c, _d, _e, _f, _g, _h;
+  const { session } = props;
   let addressState = createAddressCore();
   let emailState = createEmailCore();
-  const { setErrorMsg, i18n, session, errorMsg, sessionReady } = usePayState();
+  const { setErrorMsg, i18n, errorMsg, sessionReady } = usePayState(session);
   const [submitButtonStatus, setSubmitButtonStatus] = h("unSubmit");
   const formRef = A(null);
   const [form, setForm] = h({
@@ -56,19 +57,19 @@ const AliPay = w((props, ref) => {
       startReFetchPayInfo({ timeout });
     },
     updateAddress: () => {
-      var _a;
+      var _a2;
       setForm(Object.assign(form, { address: addressState.getAddressState() }));
-      (_a = addressFieldRef.current) == null ? void 0 : _a.update(addressState.getAddressState());
+      (_a2 = addressFieldRef.current) == null ? void 0 : _a2.update(addressState.getAddressState());
     },
     updateEmail: () => {
-      var _a;
+      var _a2;
       setForm(Object.assign(form, { email: emailState.email }));
-      (_a = emailFieldRef.current) == null ? void 0 : _a.update(emailState.email);
+      (_a2 = emailFieldRef.current) == null ? void 0 : _a2.update(emailState.email);
     }
   }));
   function validateForm() {
-    var _a;
-    (_a = formRef.current) == null ? void 0 : _a.validate(void 0, false).then(() => {
+    var _a2;
+    (_a2 = formRef.current) == null ? void 0 : _a2.validate(void 0, false).then(() => {
       setValidated(true);
     }).catch(() => {
       setValidated(false);
@@ -78,11 +79,11 @@ const AliPay = w((props, ref) => {
     validateForm();
   }, [form]);
   y(() => {
-    var _a;
+    var _a2;
     if (sessionReady) {
       if ((session == null ? void 0 : session.checkout.status) === "SUCCESS") {
         setSubmitButtonStatus("success");
-        (_a = props.onSuccess) == null ? void 0 : _a.call(props);
+        (_a2 = props.onSuccess) == null ? void 0 : _a2.call(props);
       }
       form.email = (session == null ? void 0 : session.checkout.bill.email) ?? "";
       disabledEmail.current = !!(session == null ? void 0 : session.checkout.bill.email);
@@ -93,10 +94,10 @@ const AliPay = w((props, ref) => {
     }
   }, [sessionReady]);
   const onTimeout = q((message) => {
-    var _a;
+    var _a2;
     setErrorMsg(message || i18n.get("common.payTimeout"));
     setSubmitButtonStatus("unSubmit");
-    (_a = props.onTimeout) == null ? void 0 : _a.call(props, "retry");
+    (_a2 = props.onTimeout) == null ? void 0 : _a2.call(props, "retry");
   }, [i18n, props.onTimeout]);
   const { start: startReFetchPayInfo, stop: stopReFetchPayInfo } = useRetry(
     (timeout) => pay(true, timeout),
@@ -105,7 +106,7 @@ const AliPay = w((props, ref) => {
     }
   );
   async function pay(search = false, timeout) {
-    var _a, _b, _c, _d, _e, _f, _g, _h;
+    var _a2, _b2, _c2, _d2, _e2, _f2, _g2, _h2;
     try {
       const res = search ? await getAliPayInfo(
         {
@@ -131,21 +132,21 @@ const AliPay = w((props, ref) => {
         },
         { locale: i18n.locale, timeout }
       );
-      const { status, orderStatus, errorMessage } = res;
-      !search && ((_a = props.onSubmitResponse) == null ? void 0 : _a.call(props, res));
+      const { status, orderStatus, errorMessage, errorCode } = res;
+      !search && ((_a2 = props.onSubmitResponse) == null ? void 0 : _a2.call(props, res));
       if (status === "PROCESSING") {
         if (!orderStatus) {
           setSubmitButtonStatus("unSubmit");
         } else if (orderStatus === "SUCCESS") {
           setSubmitButtonStatus("success");
-          (_b = props.onSuccess) == null ? void 0 : _b.call(props);
+          (_b2 = props.onSuccess) == null ? void 0 : _b2.call(props);
           return {
             end: true
           };
         } else if (orderStatus === "FAILURE") {
           setErrorMsg(errorMessage);
           setSubmitButtonStatus("unSubmit");
-          (_c = props.onError) == null ? void 0 : _c.call(props, "FAILURE");
+          (_c2 = props.onError) == null ? void 0 : _c2.call(props, new PayKKaError("API_ERROR", errorMessage, { code: errorCode }));
           return {
             end: true
           };
@@ -156,26 +157,26 @@ const AliPay = w((props, ref) => {
           };
         } else if (orderStatus === "CANCELED") {
           setSubmitButtonStatus("unSubmit");
-          (_d = props.onTimeout) == null ? void 0 : _d.call(props, "channel");
+          (_d2 = props.onTimeout) == null ? void 0 : _d2.call(props, "channel");
           return {
             end: true
           };
         }
       } else if (status === "SUCCESS") {
         setSubmitButtonStatus("success");
-        (_e = props.onSuccess) == null ? void 0 : _e.call(props);
+        (_e2 = props.onSuccess) == null ? void 0 : _e2.call(props);
         return {
           end: true
         };
       } else if (status === "EXPIRED") {
         setSubmitButtonStatus("unSubmit");
-        (_f = props.onExpired) == null ? void 0 : _f.call(props);
+        (_f2 = props.onExpired) == null ? void 0 : _f2.call(props);
         return {
           end: true
         };
       }
       setSubmitButtonStatus("unSubmit");
-      (_g = props.onSuccess) == null ? void 0 : _g.call(props);
+      (_g2 = props.onSuccess) == null ? void 0 : _g2.call(props);
       return {
         end: true
       };
@@ -188,20 +189,21 @@ const AliPay = w((props, ref) => {
           return { end: true };
         }
       } else {
-        setErrorMsg(error.i18nKey ? i18n.get(error.i18nKey) : error.message);
-        (_h = props.onError) == null ? void 0 : _h.call(props, error);
+        const message = error.i18nKey ? i18n.get(error.i18nKey) : error.message;
+        setErrorMsg(message);
+        (_h2 = props.onError) == null ? void 0 : _h2.call(props, new PayKKaError("API_ERROR", message, { code: error.code, cause: error }));
         setSubmitButtonStatus("unSubmit");
         return { end: true };
       }
     }
   }
   async function onSubmit() {
-    var _a;
+    var _a2;
     setErrorMsg("");
-    (_a = formRef.current) == null ? void 0 : _a.validate(async (errors) => {
-      var _a2;
+    (_a2 = formRef.current) == null ? void 0 : _a2.validate(async (errors) => {
+      var _a3;
       requiredBill && addressState.setValidateAllFields(true);
-      (_a2 = props.onSubmit) == null ? void 0 : _a2.call(props, errors);
+      (_a3 = props.onSubmit) == null ? void 0 : _a3.call(props, errors);
       if (errors) {
         setSubmitButtonStatus("unSubmit");
         return;
@@ -214,9 +216,10 @@ const AliPay = w((props, ref) => {
   const Button = () => {
     const { transAmount } = (session == null ? void 0 : session.checkout) ?? {};
     let { symbol = "", amount = "", digits } = transAmount ?? {};
+    let amountStr = "";
     if (amount && !isUndefined(digits))
-      amount = formatAmount(+amount, digits);
-    const text = i18n.get("common.pay") + (Number(amount) ? ` ${symbol}${amount}` : "");
+      amountStr = formatAmount(+amount, digits);
+    const text = i18n.get("common.pay") + (Number(amount) ? ` ${symbol}${amountStr}` : "");
     return /* @__PURE__ */ u(
       SubmitButton,
       {
@@ -234,6 +237,13 @@ const AliPay = w((props, ref) => {
     formRef.current = dom;
     dom && validateForm();
   };
+  const formStyle = {
+    [cssVarPrefix("button-bg-color")]: (_a = session == null ? void 0 : session.colors) == null ? void 0 : _a.primary,
+    [cssVarPrefix("button-bg-color-hover")]: (_b = session == null ? void 0 : session.colors) == null ? void 0 : _b.primaryHover,
+    [cssVarPrefix("button-bg-color-active")]: (_c = session == null ? void 0 : session.colors) == null ? void 0 : _c.primaryActive,
+    [cssVarPrefix("button-text-color")]: (_e = (_d = session == null ? void 0 : session.checkout) == null ? void 0 : _d.theme) == null ? void 0 : _e.payButtonTextColor,
+    [cssVarPrefix("input-color")]: (_f = session == null ? void 0 : session.colors) == null ? void 0 : _f.primary
+  };
   return /* @__PURE__ */ u(
     CoreContext.Provider,
     {
@@ -241,7 +251,7 @@ const AliPay = w((props, ref) => {
         i18n,
         session
       },
-      children: sessionReady && i18n.ready.value && /* @__PURE__ */ u(Form, { form, ref: setFormRef, onFormChange: (form2) => setForm(form2), children: [
+      children: sessionReady && i18n.ready.value && /* @__PURE__ */ u(Form, { form, ref: setFormRef, onFormChange: (form2) => setForm(form2), children: /* @__PURE__ */ u("div", { className: normalizedClass(COMMON_CLASS_NAME, bem()), style: formStyle, children: [
         /* @__PURE__ */ u(
           EmailField,
           {
@@ -256,13 +266,14 @@ const AliPay = w((props, ref) => {
           {
             ref: addressFieldRef,
             value: form.address,
+            country: ((_g = session == null ? void 0 : session.checkout) == null ? void 0 : _g.country) || ((_h = session == null ? void 0 : session.checkout) == null ? void 0 : _h.bill.country),
             onAddressChange: (value) => setForm(Object.assign(form, { address: value }))
           }
         ),
         (session == null ? void 0 : session.checkout.paymentType) === PaymentType.RECURRING && RecurringTip(),
         !!errorMsg && /* @__PURE__ */ u(Info, { className: bem("error"), content: errorMsg }),
         Button()
-      ] })
+      ] }) })
     }
   );
 });

package/dist/es/components/ApplePay/index.js

@@ -1,6 +1,6 @@
 import { w, h, y, q, u, b } from "../../core.js";
 import { isTimeoutError } from "../../api/http.js";
-import { PaymentMethod } from "../../constant.js";
+import { SessionMode, PaymentMethod } from "../../constant.js";
 import { getBrowserParams } from "../../api/modules/get-browser-params.js";
 import { getApplePayInfo, applePay, getMerchantSession } from "../../api/modules/apple-pay/index.js";
 import { useBEM } from "../../hooks/useBEM.js";
@@ -8,8 +8,7 @@ import "../../core/context.js";
 import "../../utils/card-brand/brands.js";
 import "../../utils/system-info/get-browser-info.js";
 import { parseE164, underscoreToUpperCamelCase } from "../../utils/format.js";
-import "../../i18n/util.js";
-import "../../i18n/locales/index.js";
+import { PayKKaError } from "../../core/error.js";
 import { usePayState } from "../../hooks/usePayState.js";
 import { useRetry } from "../../hooks/useRetry.js";
 import { Info } from "../internal/Info/Info.js";
@@ -44,34 +43,41 @@ async function applePayEnv(id) {
 }
 const { bem } = useBEM("apple-pay");
 const ApplePay = w((props) => {
+  const { session, isDropIn } = props;
   let applePaySession;
-  const { i18n, session, sessionReady, fraudDetection } = usePayState();
+  const { i18n, sessionReady, fraudDetection } = usePayState(session);
   const [errorMsg, setErrorMsg] = h("");
   const [showApplePay, setShowApplePay] = h(false);
   const getPaymentSuccessData = () => ({
     returnUrl: session == null ? void 0 : session.checkout.returnUrl
   });
   y(() => {
-    var _a;
+    var _a, _b, _c;
     if (!sessionReady) {
       return;
     }
-    const { status, paymentMethod = [] } = (session == null ? void 0 : session.checkout) || {};
+    const { status, paymentMethod = [], sessionMode } = (session == null ? void 0 : session.checkout) || {};
+    if (sessionMode === SessionMode.DROP_IN && !isDropIn) {
+      (_b = (_a = props.core.config).onInitError) == null ? void 0 : _b.call(
+        _a,
+        new PayKKaError("ERROR", "Please send the correct mode when creating the checkout")
+      );
+      return;
+    }
     if (!paymentMethod.includes(PaymentMethod.APPLE_PAY)) {
       return;
     }
     loadApplePayJS(
       async () => {
-        var _a2, _b, _c, _d, _e;
+        var _a2, _b2, _c2, _d;
         const envSupported = await applePayEnv(
-          (_c = (_b = (_a2 = session == null ? void 0 : session.checkout) == null ? void 0 : _a2.channelParams) == null ? void 0 : _b.applePay) == null ? void 0 : _c.merchantIdentifier
+          (_c2 = (_b2 = (_a2 = session == null ? void 0 : session.checkout) == null ? void 0 : _a2.channelParams) == null ? void 0 : _b2.applePay) == null ? void 0 : _c2.merchantIdentifier
         );
         if (!envSupported) {
           return;
         }
         setShowApplePay(true);
         (_d = props.onLoad) == null ? void 0 : _d.call(props, true);
-        console.log((_e = ApplePaySession.canMakePayments) == null ? void 0 : _e.call(ApplePaySession));
       },
       () => {
         var _a2;
@@ -80,7 +86,7 @@ const ApplePay = w((props) => {
       }
     );
     if (status === "SUCCESS") {
-      (_a = props.onSuccess) == null ? void 0 : _a.call(props, getPaymentSuccessData());
+      (_c = props.onSuccess) == null ? void 0 : _c.call(props, getPaymentSuccessData());
     }
   }, [sessionReady]);
   const onTimeout = q(
@@ -139,7 +145,7 @@ const ApplePay = w((props) => {
           { locale: i18n.locale }
         );
       }());
-      const { status, orderStatus, errorMessage } = res;
+      const { status, orderStatus, errorMessage, errorCode } = res;
       if (status === "PROCESSING") {
         if (orderStatus === "SUCCESS") {
           applePaySession.completePayment({
@@ -156,7 +162,7 @@ const ApplePay = w((props) => {
           };
         } else if (orderStatus === "FAILURE") {
           setErrorMsg(errorMessage);
-          (_b = props.onError) == null ? void 0 : _b.call(props, "FAILURE");
+          (_b = props.onError) == null ? void 0 : _b.call(props, new PayKKaError("API_ERROR", errorMessage, { code: errorCode }));
           applePaySession.completePayment({
             status: 1,
             errors: [new ApplePayError("unknown", void 0, errorMessage)]
@@ -211,7 +217,7 @@ const ApplePay = w((props) => {
       } else {
         const message = error.i18nKey ? i18n.get(error.i18nKey) : error.message;
         setErrorMsg(message);
-        (_g = props.onError) == null ? void 0 : _g.call(props, error);
+        (_g = props.onError) == null ? void 0 : _g.call(props, new PayKKaError("API_ERROR", message, { code: error.code, cause: error }));
         applePaySession.completePayment({
           status: 1,
           errors: [new ApplePayError("unknown", void 0, message)]