@zonos/elements 1.3.38 → 1.3.40

package/dist/cjs/zonos-language-select_2.cjs.entry.js

@@ -2,13 +2,13 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-b071017b.js');
-const cart = require('./cart-c7212410.js');
-const zonosStore = require('./zonosStore-4c6c85da.js');
+const index = require('./index-ef8b2c76.js');
+const cart = require('./cart-775440b7.js');
+const zonosStore = require('./zonosStore-b6c72408.js');
 const ILanguage = require('./ILanguage-98b04442.js');
 require('./logError-4e2f2020.js');
-require('./isDarkColor-371a3b1a.js');
-require('./getBorderRadius-074b46ef.js');
+require('./isDarkColor-5f56770b.js');
+require('./getBorderRadius-9ae7890c.js');
 
 const GreenCheckDuotoneIcon = `<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
 <path d="M7.99996 2.6665C5.05444 2.6665 2.66663 5.05432 2.66663 7.99984C2.66663 10.9454 5.05444 13.3332 7.99996 13.3332C10.9455 13.3332 13.3333 10.9454 13.3333 7.99984C13.3333 5.05432 10.9455 2.6665 7.99996 2.6665Z" fill="#AFF8C3"/>

package/dist/cjs/zonos-link.cjs.entry.js

@@ -2,7 +2,7 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-b071017b.js');
+const index = require('./index-ef8b2c76.js');
 
 const zonosLinkCss = ":host{font-family:var(--font-family, Inter), Inter;display:block;white-space:normal}:host *{font-family:var(--font-family, Inter), Inter}:host img{max-width:100%}:host dl,:host dd,:host h1,:host h2,:host h3,:host h4,:host h5,:host h6,:host hr,:host figure,:host p,:host pre{margin:0}:host{-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased}:host{display:inline-block}:host a{padding-bottom:2px;color:var(--zonos-elements-primary);-webkit-box-shadow:none;box-shadow:none;text-decoration:none;word-break:break-word;-webkit-hyphens:auto;-ms-hyphens:auto;hyphens:auto;overflow-wrap:break-word}:host a:link,:host a:visited{color:var(--zonos-elements-primary);-webkit-transition:all 150ms ease-in-out;transition:all 150ms ease-in-out}:host a:hover,:host a:active{color:var(--zonos-elements-primary);-webkit-box-shadow:0 1px 0 var(--zonos-elements-primary);box-shadow:0 1px 0 var(--zonos-elements-primary)}";
 const ZonosLinkStyle0 = zonosLinkCss;

package/dist/cjs/zonos-logo.cjs.entry.js

@@ -2,8 +2,8 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-b071017b.js');
-const zonosStore = require('./zonosStore-4c6c85da.js');
+const index = require('./index-ef8b2c76.js');
+const zonosStore = require('./zonosStore-b6c72408.js');
 const classes = require('./classes-b7918f56.js');
 
 const zonosLogoCss = ":host{font-family:var(--font-family, Inter), Inter;display:block;white-space:normal}:host *{font-family:var(--font-family, Inter), Inter}:host img{max-width:100%}:host dl,:host dd,:host h1,:host h2,:host h3,:host h4,:host h5,:host h6,:host hr,:host figure,:host p,:host pre{margin:0}:host{-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased}:host{display:-ms-inline-flexbox;display:inline-flex}:host img{-webkit-filter:var(--filter-color);filter:var(--filter-color);width:var(--width)}";

package/dist/cjs/{zonos-notification_2.cjs.entry.js → zonos-notification_3.cjs.entry.js}

@@ -2,13 +2,14 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-b071017b.js');
-const zonosStore = require('./zonosStore-4c6c85da.js');
+const index = require('./index-ef8b2c76.js');
+const zonosStore = require('./zonosStore-b6c72408.js');
 const classes = require('./classes-b7918f56.js');
-const cart = require('./cart-c7212410.js');
+const cart = require('./cart-775440b7.js');
 const logError = require('./logError-4e2f2020.js');
-require('./isDarkColor-371a3b1a.js');
-require('./getBorderRadius-074b46ef.js');
+const paypal = require('./paypal-25c84e33.js');
+require('./isDarkColor-5f56770b.js');
+require('./getBorderRadius-9ae7890c.js');
 
 const zonosNotificationCss = ":host{font-family:var(--font-family, Inter), Inter;display:block;white-space:normal}:host *{font-family:var(--font-family, Inter), Inter}:host img{max-width:100%}:host dl,:host dd,:host h1,:host h2,:host h3,:host h4,:host h5,:host h6,:host hr,:host figure,:host p,:host pre{margin:0}:host{-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased}:host{display:-ms-flexbox;display:flex;-ms-flex-pack:center;justify-content:center}:host .zonos--notification-items{position:fixed;z-index:9999999999;bottom:24px;gap:8px;display:-ms-inline-flexbox;display:inline-flex;-ms-flex-direction:column;flex-direction:column}:host .zonos--notification-item{cursor:pointer;-webkit-transition:all 0.3s ease;transition:all 0.3s ease;padding:8px;border-radius:var(--border-radius, var(--zonos-elements-radius-6));opacity:0;-ms-flex-negative:0.0001;flex-shrink:0.0001;-webkit-transform:translateY(100%);transform:translateY(100%)}:host .zonos--notification-item+:host .zonos--notification-item{margin-top:8px}:host .zonos--notification-item.show{opacity:1;-webkit-transform:translateY(0);transform:translateY(0);-ms-flex-positive:1000;flex-grow:1000}:host .zonos--notification-item.success{background-color:var(--zonos-elements-green-700)}:host .zonos--notification-item.error{background-color:var(--zonos-elements-red-700)}:host .zonos--notification-item.warning{background-color:var(--zonos-elements-orange-700)}";
 const ZonosNotificationStyle0 = zonosNotificationCss;
@@ -90,7 +91,7 @@ const ZonosPayment = class {
         // Create and mount the Authentication Element in ${type} mode
         const paymentElement = cart.stripeStore.stripePaymentElement ||
             this.stripeElements.create('payment', {
-                layout: 'tabs',
+                layout: 'accordion',
             });
         const paymentElementContainer = this.el.querySelector('.zonos--payment-component');
         if (!paymentElementContainer) {
@@ -109,7 +110,7 @@ const ZonosPayment = class {
     }
     render() {
         // this component loads iframe from the stripe elements and puts here, so we don't need to do anything here
-        return (index.h(index.Host, { key: 'c940b38c3bb7e8a7856ce28e62ee40d60eb445a1', class: "zonos--payment zonos--elements" }, this.titleText && (index.h("zonos-text", { key: '7625e3865a13cdf4fc6c05d7a2e0c7b84ae5ebd4', class: "zonos--title", type: "semiBoldLabel" }, this.titleText)), index.h("div", { key: '92cde315378611a675b19cdce46b1bf6ac2221a1', class: "zonos--payment-component" })));
+        return (index.h(index.Host, { key: 'a6df9bab4826d7c4e4027bf6b7e58f176cb25ca1', class: "zonos--payment zonos--elements" }, this.titleText && (index.h("zonos-text", { key: 'a2f3d1288537a8e63c26bef9c87cae7f3a6f94fa', class: "zonos--title", type: "semiBoldLabel" }, this.titleText)), index.h("div", { key: '4e30103e4b6fa407450afc71474b663377233310', class: "zonos--payment-component" }), index.h("div", { key: '66a9798018fb25e86933a839014ed0d2ed16d8b3', class: "zonos--payment-paypal-container" })));
     }
     get el() { return index.getElement(this); }
     static get watchers() { return {
@@ -119,5 +120,56 @@ const ZonosPayment = class {
 };
 ZonosPayment.style = ZonosPaymentStyle0;
 
+const zonosPaypalPaymentCss = ".sc-zonos-paypal-payment-h{font-family:var(--font-family, Inter), Inter;display:block;white-space:normal}.sc-zonos-paypal-payment-h *.sc-zonos-paypal-payment{font-family:var(--font-family, Inter), Inter}.sc-zonos-paypal-payment-h img.sc-zonos-paypal-payment{max-width:100%}.sc-zonos-paypal-payment-h dl.sc-zonos-paypal-payment,.sc-zonos-paypal-payment-h dd.sc-zonos-paypal-payment,.sc-zonos-paypal-payment-h h1.sc-zonos-paypal-payment,.sc-zonos-paypal-payment-h h2.sc-zonos-paypal-payment,.sc-zonos-paypal-payment-h h3.sc-zonos-paypal-payment,.sc-zonos-paypal-payment-h h4.sc-zonos-paypal-payment,.sc-zonos-paypal-payment-h h5.sc-zonos-paypal-payment,.sc-zonos-paypal-payment-h h6.sc-zonos-paypal-payment,.sc-zonos-paypal-payment-h hr.sc-zonos-paypal-payment,.sc-zonos-paypal-payment-h figure.sc-zonos-paypal-payment,.sc-zonos-paypal-payment-h p.sc-zonos-paypal-payment,.sc-zonos-paypal-payment-h pre.sc-zonos-paypal-payment{margin:0}.sc-zonos-paypal-payment-h{-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased}.sc-zonos-paypal-payment-h{display:-ms-inline-flexbox;display:inline-flex;-ms-flex-direction:column;flex-direction:column}";
+const ZonosPaypalPaymentStyle0 = zonosPaypalPaymentCss;
+
+const ZonosPaypalPayment = class {
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+        this.paypalSessionDone = index.createEvent(this, "paypalSessionDone", 7);
+        this.paypalSessionFail = index.createEvent(this, "paypalSessionFail", 7);
+    }
+    async loadPaypal() {
+        if (!window.Zonos.paypal) {
+            logError.log('Paypal is not available');
+            return;
+        }
+        // Init paypal store buttons
+        const paypalButtons = paypal.paypalStoreInitButtons({
+            onPaypalFail: () => {
+                logError.log('onPaypalFail');
+                this.paypalSessionFail.emit();
+            },
+            onPaypalSessionDone: ({ orderId }) => {
+                logError.log('onPaypalSessionDone', 'info', { orderId });
+                this.paypalSessionDone.emit({ orderId });
+            },
+        });
+        if (!(paypalButtons === null || paypalButtons === void 0 ? void 0 : paypalButtons.length)) {
+            logError.log('There are no paypal buttons available');
+            return;
+        }
+        const container = this.el.querySelector('.zonos--payment-paypal-container');
+        if (!container) {
+            logError.log('Cannot find container element for paypal buttons');
+            return;
+        }
+        // render paypal buttons
+        paypalButtons.forEach(async (paypalButton) => {
+            await paypalButton.render(container);
+        });
+    }
+    componentDidLoad() {
+        // @Watch doesn't get trigger on initial load
+        void this.loadPaypal();
+    }
+    render() {
+        return (index.h(index.Host, { key: '036a9d43da99e1c08293936d89ca5f97d5acdf10', class: "zonos--paypal-payment zonos--elements" }, index.h("div", { key: 'f38290dce670024e001d8219d2d8d1e9fde1f9e2', class: "zonos--payment-paypal-container" })));
+    }
+    get el() { return index.getElement(this); }
+};
+ZonosPaypalPayment.style = ZonosPaypalPaymentStyle0;
+
 exports.zonos_notification = ZonosNotification;
 exports.zonos_payment = ZonosPayment;
+exports.zonos_paypal_payment = ZonosPaypalPayment;

package/dist/cjs/zonos-shipping-rich-radio.cjs.entry.js

@@ -2,10 +2,10 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-b071017b.js');
-const zonosStore = require('./zonosStore-4c6c85da.js');
+const index = require('./index-ef8b2c76.js');
+const zonosStore = require('./zonosStore-b6c72408.js');
 const classes = require('./classes-b7918f56.js');
-const getBorderRadius = require('./getBorderRadius-074b46ef.js');
+const getBorderRadius = require('./getBorderRadius-9ae7890c.js');
 const isColorVariable = require('./isColorVariable-6f5a9608.js');
 
 const zonosShippingRichRadioCss = ":host{font-family:var(--font-family, Inter), Inter;display:block;white-space:normal}:host *{font-family:var(--font-family, Inter), Inter}:host img{max-width:100%}:host dl,:host dd,:host h1,:host h2,:host h3,:host h4,:host h5,:host h6,:host hr,:host figure,:host p,:host pre{margin:0}:host{-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased}:host{display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column}:host input{margin:0;accent-color:var(--selected-border-color, var(--zonos-elements-blue-600))}:host .zonos--shipping-rich-radio-item{display:-ms-flexbox;display:flex;-ms-flex:1;flex:1;padding:16px;-ms-flex-align:center;align-items:center;gap:16px;cursor:pointer;border:1px solid var(--zonos-elements-gray-200)}:host .zonos--shipping-rich-radio-item:first-child{border-top-left-radius:var(--border-radius, var(--zonos-elements-radius-10));border-top-right-radius:var(--border-radius, var(--zonos-elements-radius-10))}:host .zonos--shipping-rich-radio-item:last-child{border-bottom-right-radius:var(--border-radius, var(--zonos-elements-radius-10));border-bottom-left-radius:var(--border-radius, var(--zonos-elements-radius-10))}:host .zonos--shipping-rich-radio-item:not(:last-child){border-bottom:none}:host .zonos--shipping-rich-radio-item.selected{outline:1px solid var(--selected-border-color, var(--zonos-elements-blue-600));outline-offset:-1px}:host .zonos--shipping-info{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;-ms-flex:1;flex:1}:host .zonos--shipping-detail{-ms-flex:1;flex:1}:host .zonos--sub-detail{display:-ms-inline-flexbox;display:inline-flex;gap:8px;-ms-flex-wrap:wrap;flex-wrap:wrap}";

package/dist/cjs/zonos-text.cjs.entry.js

@@ -2,8 +2,8 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-b071017b.js');
-const zonosStore = require('./zonosStore-4c6c85da.js');
+const index = require('./index-ef8b2c76.js');
+const zonosStore = require('./zonosStore-b6c72408.js');
 const classes = require('./classes-b7918f56.js');
 const isColorVariable = require('./isColorVariable-6f5a9608.js');
 

package/dist/cjs/zonos-v-stack.cjs.entry.js

@@ -2,8 +2,8 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-b071017b.js');
-const zonosStore = require('./zonosStore-4c6c85da.js');
+const index = require('./index-ef8b2c76.js');
+const zonosStore = require('./zonosStore-b6c72408.js');
 const classes = require('./classes-b7918f56.js');
 
 const zonosVStackCss = ":host{font-family:var(--font-family, Inter), Inter;display:block;white-space:normal}:host *{font-family:var(--font-family, Inter), Inter}:host img{max-width:100%}:host dl,:host dd,:host h1,:host h2,:host h3,:host h4,:host h5,:host h6,:host hr,:host figure,:host p,:host pre{margin:0}:host{-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased}:host .vstack{display:grid;grid-auto-columns:minmax(0, 1fr);grid-row-gap:var(--spacing, 24px);grid-auto-flow:row}";

package/dist/cjs/{zonosStore-4c6c85da.js → zonosStore-b6c72408.js}

@@ -1,6 +1,6 @@
 'use strict';
 
-const index = require('./index-b071017b.js');
+const index = require('./index-ef8b2c76.js');
 
 const appendToMap = (map, propName, value) => {
     const items = map.get(propName);
@@ -2771,6 +2771,9 @@ const { dispose: zonosStoreDispose, reset, state: zonosStore, } = createStore(()
     checkoutSettings: {
         allowedCharacterSets: 'ALL',
         analyticsProviders: [],
+        externalPaymentMethods: [],
+        externalServiceTokens: [],
+        mode: 'TEST',
         orderNotifications: {
             abandonedCart: {
                 delay: 0,
@@ -2834,6 +2837,7 @@ const { dispose: zonosStoreDispose, reset, state: zonosStore, } = createStore(()
     // toggle to know if the config has been loaded with graphql
     stripeApiKey: '',
     zonosApiKey: '',
+    zonosMode: null,
 }));
 let savedZonosSettings = null;
 /**

package/dist/collection/__tests__/build-utils/urlCheckOne.js

@@ -22,7 +22,9 @@ export const urlCheckOne = async ({ branch, filePath, packageVersion, }) => {
                 !excludeDomainPattern.includes(fullUrl) &&
                 !excludeFiles.some(file => filePath.includes(file))) {
                 // match: v1.2.3-alpha.0.qa.js.zonos.com | v1.2.3.qa.js.zonos.com | v1.qa.js.zonos.com
-                const versioned = /(v(?<major>\d+)(?<patch>\.\d+(\-alpha\.\d+)*)*)\.*(.*?js\.zonos\.com)/g.exec(fullUrl);
+                const versioned = 
+                // @ts-ignore ts v5.5 requires target to be ES2017 to use group, but we run this in node and not in compiled version, so it should work with current target ES2017
+                /(v(?<major>\d+)(?<patch>\.\d+(\-alpha\.\d+)*)*)\.*(.*?js\.zonos\.com)/g.exec(fullUrl);
                 if (!versioned) {
                     throw new Error(`${filePath}: url in the file is not versioned for url "${fullUrl}"`);
                 }

package/dist/collection/collection-manifest.json

@@ -43,13 +43,14 @@
     "components/hello/zonos-hello-dialog/zonos-hello-dialog.js",
     "components/hello/zonos-hello-dialog/zonos-hello-dialog-footer/zonos-hello-dialog-footer.js",
     "components/main/zonos-controller.js",
+    "components/paypal/zonos-paypal-payment.js",
     "components/stripe/zonos-address/zonos-address.js",
     "components/stripe/zonos-link-authentication/zonos-link-authentication.js",
     "components/stripe/zonos-payment/zonos-payment.js"
   ],
   "compiler": {
     "name": "@stencil/core",
-    "version": "4.18.0",
+    "version": "4.19.2",
     "typescriptVersion": "5.4.5"
   },
   "collections": [],

package/dist/collection/components/checkout/zonos-checkout/zonos-address-update-dialog/zonos-address-update-dialog.css

@@ -54,6 +54,7 @@
   display: flex;
   flex-direction: column;
   gap: 8px;
+  overscroll-behavior: contain;
 }
 :host .zonos--group::-webkit-scrollbar {
   width: 10px;

package/dist/collection/components/checkout/zonos-checkout/zonos-checkout-finish/zonos-checkout-finish.js

@@ -1,6 +1,7 @@
 import { Fragment, h, Host, } from "@stencil/core";
 import { cartStore } from "../../../store/checkout/cart";
-import { stripeStore, stripeStoreReset, stripeStoreRetrievePayment, } from "../../../store/checkout/stripe";
+import { paypalStore, paypalStoreReset, } from "../../../store/checkout/paypal";
+import { stripeStore, stripeStoreMessageBasedOnStatus, stripeStoreReset, stripeStoreRetrievePayment, } from "../../../store/checkout/stripe";
 import { translate } from "../../../store/translationStore";
 import { zonosStore } from "../../../store/zonosStore";
 import { trackConversionEvent } from "../../../utils/api/trackConversionEvent";
@@ -102,7 +103,7 @@ export class ZonosCheckoutFinish {
                 this.notificationActionText = successPageActionText;
             }
         };
-        this.checkPaymentStatus = async () => {
+        this.checkStripePaymentStatus = async () => {
             this.isLoading = true;
             const clientSecret = new URLSearchParams(window.location.search).get('payment_intent_client_secret') || stripeStore.clientSecret;
             if (clientSecret || this.storybookForceStatus) {
@@ -115,8 +116,6 @@ export class ZonosCheckoutFinish {
                 this.notificationTitle = error
                     ? translate('Payment failed')
                     : translate("You're all set!");
-                // override title if notification type is success
-                this.useOverrideSuccessNotification();
                 if (error) {
                     submitGtag('zonos-checkout-payment-fail');
                 }
@@ -132,6 +131,8 @@ export class ZonosCheckoutFinish {
                 }
                 // Attempt to pull the order details from the graph every second on 5 attempts. Only pull if checkoutSessionId is available
                 if (this.notificationType === 'success' && cartStore.checkoutSessionId) {
+                    // override title if notification type is success
+                    this.useOverrideSuccessNotification();
                     // wait this to finish before resetting store and checkout session id
                     await this.getPullOrder();
                 }
@@ -145,6 +146,31 @@ export class ZonosCheckoutFinish {
             stripeStoreReset();
             cartStore.checkoutSessionId = null;
         };
+        this.checkPaypalPaymentStatus = async () => {
+            this.isLoading = true;
+            // render error message if there's an error
+            if (paypalStore.paypalErrorMessage) {
+                this.notificationType = 'error';
+                this.notificationTitle = translate('Payment failed');
+                this.notificationMessages = [paypalStore.paypalErrorMessage];
+                this.isLoading = false;
+                return;
+            }
+            if (paypalStore.orderIdCreated) {
+                this.notificationType = 'success';
+                this.notificationTitle = translate("You're all set!");
+                this.notificationMessages =
+                    stripeStoreMessageBasedOnStatus('succeeded').messages;
+                // override title if notification type is success
+                this.useOverrideSuccessNotification();
+                // wait this to finish before resetting store and checkout session id
+                await this.getPullOrder();
+            }
+            this.isLoading = false;
+            stripeStoreReset();
+            paypalStoreReset();
+            cartStore.checkoutSessionId = null;
+        };
         this.closeClickHandler = () => {
             this.closeClick.emit();
         };
@@ -167,17 +193,22 @@ export class ZonosCheckoutFinish {
             this.isLoading = false;
             return;
         }
-        void this.checkPaymentStatus();
+        if (paypalStore.orderIdCreated) {
+            void this.checkPaypalPaymentStatus();
+        }
+        else {
+            void this.checkStripePaymentStatus();
+        }
     }
     render() {
         var _a, _b;
         const orderId = ((_a = this.order) === null || _a === void 0 ? void 0 : _a.accountOrderNumber) || ((_b = this.order) === null || _b === void 0 ? void 0 : _b.id);
         const isTestMode = getIsTestMode();
-        return (h(Host, { key: 'd36ab5e23e09a467b2616ade463baec9626c0157', class: "zonos--checkout-finish zonos--elements", style: {
+        return (h(Host, { key: '4e00e5d3d8de136e4161fdea6afba86616748d66', class: "zonos--checkout-finish zonos--elements", style: {
                 '--border-radius': getBorderRadius({
                     overrideBorderStyle: this.borderRadius,
                 }),
-            } }, this.isLoading && (h("div", { key: '58181470e5a3e75655bde5bf91ac4a857a8144f8', class: "loading-wrapper" }, h("zonos-spinner", { key: 'b1aba8ef89c9fbce271d6c3226f32e0a0dd1561d' }))), !this.isLoading && (h("div", { key: 'd02576373b5a3affc73906e125d443ce12e6c8d6', class: "zonos--finish-details" }, h("div", { key: 'ba06598ed291e565663c5b321e9419215cd2832a', class: "zonos--group" }, this.notificationType === 'success' ? (h("zonos-icon", { "aria-label": "Order success", content: SuccessIcon, iconColor: 'blue-800', size: 50 })) : (h("zonos-icon", { "aria-label": "Order failed", content: RemoveIcon, iconColor: 'red-800', size: 50 })), h("zonos-text", { key: '55c453a319a693280518a4b2c2f502a1cc90dc2a', class: "zonos--title", type: "semiBoldSubheader" }, this.notificationTitle), orderId && (h("zonos-badge", { key: '31042753fb3a1ef5155314c1d55abc067c6a6d31', badgeColor: "transparent" }, orderId)), h("zonos-text", { key: 'e9eceec74357986169f829a1c650f1e4b1605245', textColor: "gray-600" }, this.notificationMessages.map(message => (h(Fragment, null, message, h("br", null))))), h("zonos-button", { key: '7c6e8b61be1bf7cc3c84ed369f438af7b1ad60c0', onClick: () => this.closeClickHandler(), size: "md", variant: "primary" }, this.notificationActionText)), isTestMode && cartStore.step === 'finish' && (h("div", { key: 'bb567e9a67e6895b7f3c97e6d02584ba9f279acd', class: "zonos--finish-button-wrapper" }, h("zonos-button", { key: '50afe47a9e5d25759b4f82bb619f5de7fc56f260', backgroundColor: "gray-0", buttonColor: "gray-1200", onClick: () => this.closeClickHandler(), size: "lg", variant: "outline" }, "New test cart"), h("zonos-button", { key: '6cf9d0d670aa07ade295aa5ef3781dcd65e4d812', onClick: () => this.redirectToUrl(`/orders/all`), size: "lg", variant: "primary" }, "View order in Dashboard")))))));
+            } }, this.isLoading && (h("div", { key: '6b4f755402951c5fd0e5150ccd05542b85ca2121', class: "loading-wrapper" }, h("zonos-spinner", { key: 'a3e6b561c6796891b33d273b9729d0f8fab4a308' }))), !this.isLoading && (h("div", { key: '798bfa6f1ee9f7b682e0d7389654f5b3d1549ba6', class: "zonos--finish-details" }, h("div", { key: 'cd7a52c193aa3bb5ef2e49e6027bf0448de14046', class: "zonos--group" }, this.notificationType === 'success' ? (h("zonos-icon", { "aria-label": "Order success", content: SuccessIcon, iconColor: 'blue-800', size: 50 })) : (h("zonos-icon", { "aria-label": "Order failed", content: RemoveIcon, iconColor: 'red-800', size: 50 })), h("zonos-text", { key: 'b4c5751d55a3ef5d06e68a1065dc017b455a9d1f', class: "zonos--title", type: "semiBoldSubheader" }, this.notificationTitle), orderId && (h("zonos-badge", { key: 'd8c13fb55fe83d1caf26efbd037da866b26af108', badgeColor: "transparent" }, orderId)), h("zonos-text", { key: '5ae6e0d1b42e7d0ab578229d8c9eebcd660b78db', textColor: "gray-600" }, this.notificationMessages.map(message => (h(Fragment, null, message, h("br", null))))), h("zonos-button", { key: '0a3447480fe0ddcff91579602621b9ee70ae2a64', onClick: () => this.closeClickHandler(), size: "md", variant: "primary" }, this.notificationActionText)), isTestMode && cartStore.step === 'finish' && (h("div", { key: 'c3374a72c1e2d9350f152c7e2016463bf0a7f02e', class: "zonos--finish-button-wrapper" }, h("zonos-button", { key: '7d34001e6798162cbcb1d9ef8949d15617c64362', backgroundColor: "gray-0", buttonColor: "gray-1200", onClick: () => this.closeClickHandler(), size: "lg", variant: "outline" }, "New test cart"), h("zonos-button", { key: 'e217f0bde5d4b0df0220983a32ae8853469d1d23', onClick: () => this.redirectToUrl(`/orders/all`), size: "lg", variant: "primary" }, "View order in Dashboard")))))));
     }
     static get is() { return "zonos-checkout-finish"; }
     static get encapsulation() { return "shadow"; }
@@ -228,7 +259,7 @@ export class ZonosCheckoutFinish {
                         "PaymentIntent": {
                             "location": "import",
                             "path": "@stripe/stripe-js",
-                            "id": ""
+                            "id": "node_modules::PaymentIntent"
                         }
                     }
                 },

package/dist/collection/components/checkout/zonos-checkout/zonos-checkout-footer/zonos-checkout-footer.css

@@ -96,6 +96,7 @@
   transform-origin: bottom left;
   opacity: 0;
   transition: transform 0.3s ease-out, opacity 0.3s ease-out;
+  overscroll-behavior: contain;
 }
 :host .zonos--checkout-footer .zonos--checkout-footer-dialog::-webkit-scrollbar {
   width: 10px;

package/dist/collection/components/checkout/zonos-checkout/zonos-checkout-payment/zonos-checkout-payment.css

@@ -47,6 +47,7 @@
   display: flex;
   flex-direction: column;
   flex: 1;
+  overscroll-behavior: contain;
 }
 :host .zonos--group::-webkit-scrollbar {
   width: 10px;
@@ -79,10 +80,15 @@
   position: sticky;
   display: flex;
   justify-content: center;
+  flex-direction: column;
+  gap: 12px;
   bottom: 0;
-  margin-top: 12px;
+  padding-top: 12px;
   background: var(--primary-color, var(--zonos-elements-gray-0));
 }
+:host .zonos--group-btn zonos-text {
+  text-align: center;
+}
 :host .zonos--group-btn zonos-button {
   width: 100%;
 }

package/dist/collection/components/checkout/zonos-checkout/zonos-checkout-payment/zonos-checkout-payment.js

@@ -1,5 +1,6 @@
 import { h, Host, } from "@stencil/core";
 import { cartStore } from "../../../store/checkout/cart";
+import { paypalStore, paypalStoreHasPaypalEnabled, } from "../../../store/checkout/paypal";
 import { stripeStore } from "../../../store/checkout/stripe";
 import { translate } from "../../../store/translationStore";
 import { getIsTestMode } from "../../../utils/checkout/getIsTestMode";
@@ -23,9 +24,9 @@ export class ZonosCheckoutPayment {
                 this.showErrorBanner = true;
                 return;
             }
-            this.continueClicked.emit();
             // submit google tag when the form is complete
             submitGtag('zonos-checkout-payment-info');
+            this.continueClicked.emit();
         };
         this.copyCardToClipboard = (cardNumber) => {
             void navigator.clipboard.writeText(cardNumber);
@@ -35,7 +36,6 @@ export class ZonosCheckoutPayment {
                 type: 'success',
             });
         };
-        this.paymentError = false;
         this.submitBtnType = undefined;
         this.continueLoading = false;
         this.submitBtnColor = undefined;
@@ -50,14 +50,17 @@ export class ZonosCheckoutPayment {
             this.showErrorBanner = !this.handleValidate();
         }
         const isTestMode = getIsTestMode();
-        return (h(Host, { class: "zonos--checkout-payment zonos--elements" }, h("div", { class: "zonos--group" }, h("zonos-text", { class: "zonos--title", type: "semiBoldSubheader" }, translate('Payment method')), this.showErrorBanner && (h("zonos-banner", { class: "zonos--error-banner", intent: "error" }, translate('Missing required fields. Make sure all fields are completed.'))), this.paymentError && (h("zonos-banner", { class: "zonos--payment-error-banner", intent: "error" }, translate("We couldn't complete your payment. Please verify the payment details and try again."))), h("zonos-payment", null), h("div", { class: "zonos--group-btn" }, h("zonos-button", { backgroundColor: this.submitBtnColor, loading: this.continueLoading, onClick: () => this.continueClickHandler(), size: "lg",
+        const hasPaypalEnabled = paypalStoreHasPaypalEnabled();
+        return (h(Host, { class: "zonos--checkout-payment zonos--elements" }, h("div", { class: "zonos--group" }, h("zonos-text", { class: "zonos--title", type: "semiBoldSubheader" }, translate('Payment method')), this.showErrorBanner && (h("zonos-banner", { class: "zonos--error-banner", intent: "error" }, translate('Missing required fields. Make sure all fields are completed.'))), stripeStore.hasPaymentError && (h("zonos-banner", { class: "zonos--payment-error-banner", intent: "error" }, translate("We couldn't complete your payment. Please verify the payment details and try again."))), paypalStore.paypalErrorMessage && (h("zonos-banner", { class: "zonos--payment-error-banner", intent: "error" }, paypalStore.paypalErrorMessage)), h("zonos-payment", null), h("div", { class: "zonos--group-btn" }, h("zonos-button", { backgroundColor: this.submitBtnColor, loading: this.continueLoading, onClick: () => this.continueClickHandler(), size: "lg",
             // use primary type when on mobile mode
             variant: this.submitBtnType }, translate('Pay [orderTotal]', {
             orderTotal: currencyFormat({
                 amount: cartStore.total,
                 currency: cartStore.currency,
             }),
-        }))), isTestMode && (h("zonos-card", { backgroundColor: "gray-100", borderRadius: 12, class: "zonos--test-cards" }, h("zonos-v-stack", { spacing: 16 }, h("div", null, h("zonos-text", { type: "semiBoldLabel" }, translate('Test cards')), h("zonos-text", { textColor: "gray-700" }, translate('Click to copy the card number. Use any future expiration date and three number CVC.'))), h("zonos-button", { icon: h("zonos-icon", { content: CheckmarkLineIcon }), justifyContent: "flex-start", onClick: () => this.copyCardToClipboard('4242424242424242') }, translate('Success'), " (****4242)"), h("zonos-button", { icon: h("zonos-icon", { content: RemoveLineIcon }), justifyContent: "flex-start", onClick: () => this.copyCardToClipboard('4000000000000002') }, translate('Failure'), " (****0002)")), h("zonos-notification", null))))));
+        })), hasPaypalEnabled && (h("zonos-text", { type: "smallHeader" }, translate('or'))), h("zonos-paypal-payment", { onPaypalSessionDone: ({ detail: { orderId } }) => {
+                this.paypalSessionDone.emit(orderId);
+            }, onPaypalSessionFail: () => this.paypalSessionFailed.emit() })), isTestMode && (h("zonos-card", { backgroundColor: "gray-100", borderRadius: 12, class: "zonos--test-cards" }, h("zonos-v-stack", { spacing: 16 }, h("div", null, h("zonos-text", { type: "semiBoldLabel" }, translate('Test cards')), h("zonos-text", { textColor: "gray-700" }, translate('Click to copy the card number. Use any future expiration date and three number CVC.'))), h("zonos-button", { icon: h("zonos-icon", { content: CheckmarkLineIcon }), justifyContent: "flex-start", onClick: () => this.copyCardToClipboard('4242424242424242') }, translate('Success'), " (****4242)"), h("zonos-button", { icon: h("zonos-icon", { content: RemoveLineIcon }), justifyContent: "flex-start", onClick: () => this.copyCardToClipboard('4000000000000002') }, translate('Failure'), " (****0002)")), h("zonos-notification", null))))));
     }
     static get is() { return "zonos-checkout-payment"; }
     static get encapsulation() { return "scoped"; }
@@ -73,24 +76,6 @@ export class ZonosCheckoutPayment {
     }
     static get properties() {
         return {
-            "paymentError": {
-                "type": "boolean",
-                "mutable": false,
-                "complexType": {
-                    "original": "boolean",
-                    "resolved": "boolean",
-                    "references": {}
-                },
-                "required": false,
-                "optional": false,
-                "docs": {
-                    "tags": [],
-                    "text": "Error occurred during payment"
-                },
-                "attribute": "payment-error",
-                "reflect": false,
-                "defaultValue": "false"
-            },
             "submitBtnType": {
                 "type": "string",
                 "mutable": false,
@@ -171,6 +156,36 @@ export class ZonosCheckoutPayment {
                     "resolved": "void",
                     "references": {}
                 }
+            }, {
+                "method": "paypalSessionFailed",
+                "name": "paypalSessionFailed",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Event to emit when the paypal session failed"
+                },
+                "complexType": {
+                    "original": "void",
+                    "resolved": "void",
+                    "references": {}
+                }
+            }, {
+                "method": "paypalSessionDone",
+                "name": "paypalSessionDone",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Event to emit when the paypal session is done"
+                },
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                }
             }];
     }
 }

package/dist/collection/components/checkout/zonos-checkout/zonos-checkout.css

@@ -31,6 +31,9 @@
   -webkit-font-smoothing: antialiased;
 }
 
+:host * {
+  overscroll-behavior: contain;
+}
 :host *::-webkit-scrollbar {
   width: 10px;
 }