@funnelfox/billing 0.10.0 → 0.11.0

package/dist/chunk-index.cjs.js

@@ -357,6 +357,32 @@ function getVisibleHostedInputError(input) {
     return input.touched ? input.error : null;
 }
 function resolveTaxDisplay(source) {
+    return {
+        ...resolveTaxAmount(source),
+        ...resolveTaxBreakdown(source.tax_breakdown),
+    };
+}
+function resolveTaxBreakdown(breakdown) {
+    if (!Array.isArray(breakdown)) {
+        return {};
+    }
+    const taxBreakdown = breakdown.map(entry => ({
+        amount: entry.amount,
+        percentage: entry.percentage,
+        inclusive: entry.inclusive,
+        taxType: entry.tax_type,
+        country: entry.country,
+        subdivision: entry.subdivision,
+        taxabilityReason: entry.taxability_reason,
+    }));
+    const percentages = taxBreakdown.map(entry => Number(entry.percentage));
+    if (!percentages.length || !percentages.every(Number.isFinite)) {
+        return { taxBreakdown };
+    }
+    const taxRate = Number(percentages.reduce((sum, percentage) => sum + percentage, 0).toFixed(6));
+    return { taxBreakdown, taxRate };
+}
+function resolveTaxAmount(source) {
     const taxBehavior = source.tax_behavior ??
         ((source.tax_amount ?? 0) > 0 ? 'exclusive' : undefined);
     if (taxBehavior === 'inclusive') {
@@ -535,7 +561,7 @@ exports.PaymentMethod = void 0;
 /**
  * @fileoverview Constants for Funnefox SDK
  */
-const SDK_VERSION = '0.10.0';
+const SDK_VERSION = '0.11.0';
 const DEFAULTS = {
     BASE_URL: 'https://billing.funnelfox.com',
     REGION: 'default',
@@ -672,6 +698,117 @@ function requireString(value, fieldName) {
     return true;
 }
 
+/**
+ * @fileoverview Support for Apple's official <apple-pay-button> custom element.
+ *
+ * Primer's checkout-web v2 renders the Apple Pay button through the CSS
+ * approach (-webkit-appearance: -apple-pay-button), and WebKit only accepts
+ * the 7 legacy values for -apple-pay-button-type. Newer types such as
+ * 'continue' are silently dropped and fall back to 'plain' (verified in
+ * Safari 26 on macOS and iOS, see PRD-1426).
+ *
+ * Apple's official custom element supports the full set of button types, so
+ * for "native-only" types we overlay it on top of the (visually hidden)
+ * Primer button and forward clicks, keeping Primer's payment flow untouched.
+ */
+const APPLE_PAY_SDK_URL = 'https://applepay.cdn-apple.com/jsapi/v1/apple-pay-sdk.js';
+/** How long to wait for the <apple-pay-button> element definition before
+ * giving up and falling back to Primer's own button. */
+const ELEMENT_DEFINITION_TIMEOUT_MS = 4000;
+/**
+ * Button types WebKit can render through Primer's CSS approach.
+ * Everything outside this list requires the native <apple-pay-button> element.
+ */
+const CSS_RENDERABLE_APPLE_PAY_TYPES = [
+    'plain',
+    'buy',
+    'set-up',
+    'donate',
+    'check-out',
+    'book',
+    'subscribe',
+];
+/**
+ * Returns true when the requested Apple Pay buttonType can only be rendered
+ * with Apple's native <apple-pay-button> element.
+ */
+function isNativeOnlyApplePayButtonType(type) {
+    return !!type && !CSS_RENDERABLE_APPLE_PAY_TYPES.includes(type);
+}
+/**
+ * Loads Apple's apple-pay-sdk.js (defines the <apple-pay-button> custom
+ * element). Resolves to true when the element is available.
+ */
+async function loadApplePayButtonElement() {
+    if (typeof window === 'undefined' || !window.customElements) {
+        return false;
+    }
+    if (window.customElements.get('apple-pay-button')) {
+        return true;
+    }
+    try {
+        await loadScript$1({
+            src: APPLE_PAY_SDK_URL,
+            crossOrigin: 'anonymous',
+            appendTo: 'head',
+        });
+        // Never hang on a script that loaded but did not define the element;
+        // fall back to Primer's own button instead.
+        const defined = window.customElements
+            .whenDefined('apple-pay-button')
+            .then(() => true);
+        const timeout = new Promise(resolve => {
+            setTimeout(() => resolve(false), ELEMENT_DEFINITION_TIMEOUT_MS);
+        });
+        return await Promise.race([defined, timeout]);
+    }
+    catch {
+        return false;
+    }
+}
+/**
+ * Renders Apple's native <apple-pay-button> stretched over `wrapper` and
+ * forwards clicks to the Primer-rendered <button> inside it. The synchronous
+ * forwarded click preserves the user activation required by ApplePaySession.
+ *
+ * Returns the overlay element, or null when the Apple Pay SDK could not be
+ * loaded (callers should keep Primer's own button visible as a fallback).
+ */
+async function overlayNativeApplePayButton(wrapper, options) {
+    const available = await loadApplePayButtonElement();
+    if (!available) {
+        return null;
+    }
+    // The overlay is only safe when Primer's own clickable button is present;
+    // otherwise there is nothing to forward the click to.
+    if (!wrapper.querySelector('button')) {
+        return null;
+    }
+    const native = document.createElement('apple-pay-button');
+    native.setAttribute('type', options.buttonType);
+    native.setAttribute('buttonstyle', options.buttonStyle || 'black');
+    native.setAttribute('locale', (typeof navigator !== 'undefined' && navigator.language) || 'en-US');
+    native.style.cssText = [
+        'position:absolute',
+        'inset:0',
+        'width:100%',
+        'height:100%',
+        '--apple-pay-button-width:100%',
+        '--apple-pay-button-height:100%',
+        '--apple-pay-button-border-radius:28px',
+        'display:block',
+        'cursor:pointer',
+        'z-index:1',
+    ].join(';');
+    wrapper.style.position = 'relative';
+    native.addEventListener('click', () => {
+        const primerButton = wrapper.querySelector('button');
+        primerButton?.click();
+    });
+    wrapper.appendChild(native);
+    return native;
+}
+
 /**
  * @fileoverview Primer SDK integration wrapper
  */
@@ -710,6 +847,7 @@ class PrimerWrapper {
     }
     async createHeadlessCheckout(clientToken, options, method) {
         await this.ensurePrimerLoaded();
+        this.applePayOptions = options.applePay;
         this.currentHeadless = PrimerWrapper.headlessManager.getOrCreate(clientToken, options, method);
         return this.currentHeadless;
     }
@@ -756,16 +894,56 @@ class PrimerWrapper {
             }
             htmlNode.appendChild(wrapper);
             /* end hack */
+            /* PRD-1426: WebKit cannot render newer Apple Pay button types (e.g.
+             * 'continue') through the CSS approach Primer v2 uses. For those types
+             * we overlay Apple's official <apple-pay-button> element on top of the
+             * visually hidden Primer button and forward clicks, keeping Primer's
+             * payment flow untouched. The Primer button is hidden BEFORE it renders
+             * to avoid a flash of the plain button; if the Apple SDK fails to load,
+             * the rule is removed and Primer's own button stays visible (graceful
+             * fallback to 'plain'). */
+            const applePayConfig = this.applePayOptions;
+            const nativeButtonType = allowedPaymentMethod === exports.PaymentMethod.APPLE_PAY &&
+                applePayConfig?.buttonType &&
+                isNativeOnlyApplePayButtonType(applePayConfig.buttonType)
+                ? applePayConfig.buttonType
+                : null;
+            let hideRuleIndex = null;
+            if (nativeButtonType && sheet) {
+                hideRuleIndex = sheet.insertRule(`
+          .${wrapper.className} > button {
+            opacity: 0 !important;
+          }
+        `);
+            }
             button = pmManager.createButton();
             await button.render(wrapper, {});
-            this.destroyCallbacks.push(() => button.clean());
+            let nativeOverlay = null;
+            if (nativeButtonType) {
+                nativeOverlay = await overlayNativeApplePayButton(wrapper, {
+                    buttonType: nativeButtonType,
+                    buttonStyle: applePayConfig?.buttonStyle,
+                });
+                if (!nativeOverlay && sheet && hideRuleIndex !== null) {
+                    sheet.deleteRule(hideRuleIndex);
+                }
+            }
+            this.destroyCallbacks.push(() => {
+                nativeOverlay?.remove();
+                button.clean();
+            });
             onMethodRender(allowedPaymentMethod);
             return {
                 setDisabled: (disabled) => {
                     button.setDisabled(disabled);
+                    if (nativeOverlay) {
+                        nativeOverlay.style.pointerEvents = disabled ? 'none' : '';
+                        nativeOverlay.style.opacity = disabled ? '0.5' : '';
+                    }
                 },
                 destroy: () => {
                     styleEl.remove();
+                    nativeOverlay?.remove();
                     button.clean();
                 },
             };

package/dist/chunk-index.es.js

@@ -355,6 +355,32 @@ function getVisibleHostedInputError(input) {
     return input.touched ? input.error : null;
 }
 function resolveTaxDisplay(source) {
+    return {
+        ...resolveTaxAmount(source),
+        ...resolveTaxBreakdown(source.tax_breakdown),
+    };
+}
+function resolveTaxBreakdown(breakdown) {
+    if (!Array.isArray(breakdown)) {
+        return {};
+    }
+    const taxBreakdown = breakdown.map(entry => ({
+        amount: entry.amount,
+        percentage: entry.percentage,
+        inclusive: entry.inclusive,
+        taxType: entry.tax_type,
+        country: entry.country,
+        subdivision: entry.subdivision,
+        taxabilityReason: entry.taxability_reason,
+    }));
+    const percentages = taxBreakdown.map(entry => Number(entry.percentage));
+    if (!percentages.length || !percentages.every(Number.isFinite)) {
+        return { taxBreakdown };
+    }
+    const taxRate = Number(percentages.reduce((sum, percentage) => sum + percentage, 0).toFixed(6));
+    return { taxBreakdown, taxRate };
+}
+function resolveTaxAmount(source) {
     const taxBehavior = source.tax_behavior ??
         ((source.tax_amount ?? 0) > 0 ? 'exclusive' : undefined);
     if (taxBehavior === 'inclusive') {
@@ -533,7 +559,7 @@ var PaymentMethod;
 /**
  * @fileoverview Constants for Funnefox SDK
  */
-const SDK_VERSION = '0.10.0';
+const SDK_VERSION = '0.11.0';
 const DEFAULTS = {
     BASE_URL: 'https://billing.funnelfox.com',
     REGION: 'default',
@@ -670,6 +696,117 @@ function requireString(value, fieldName) {
     return true;
 }
 
+/**
+ * @fileoverview Support for Apple's official <apple-pay-button> custom element.
+ *
+ * Primer's checkout-web v2 renders the Apple Pay button through the CSS
+ * approach (-webkit-appearance: -apple-pay-button), and WebKit only accepts
+ * the 7 legacy values for -apple-pay-button-type. Newer types such as
+ * 'continue' are silently dropped and fall back to 'plain' (verified in
+ * Safari 26 on macOS and iOS, see PRD-1426).
+ *
+ * Apple's official custom element supports the full set of button types, so
+ * for "native-only" types we overlay it on top of the (visually hidden)
+ * Primer button and forward clicks, keeping Primer's payment flow untouched.
+ */
+const APPLE_PAY_SDK_URL = 'https://applepay.cdn-apple.com/jsapi/v1/apple-pay-sdk.js';
+/** How long to wait for the <apple-pay-button> element definition before
+ * giving up and falling back to Primer's own button. */
+const ELEMENT_DEFINITION_TIMEOUT_MS = 4000;
+/**
+ * Button types WebKit can render through Primer's CSS approach.
+ * Everything outside this list requires the native <apple-pay-button> element.
+ */
+const CSS_RENDERABLE_APPLE_PAY_TYPES = [
+    'plain',
+    'buy',
+    'set-up',
+    'donate',
+    'check-out',
+    'book',
+    'subscribe',
+];
+/**
+ * Returns true when the requested Apple Pay buttonType can only be rendered
+ * with Apple's native <apple-pay-button> element.
+ */
+function isNativeOnlyApplePayButtonType(type) {
+    return !!type && !CSS_RENDERABLE_APPLE_PAY_TYPES.includes(type);
+}
+/**
+ * Loads Apple's apple-pay-sdk.js (defines the <apple-pay-button> custom
+ * element). Resolves to true when the element is available.
+ */
+async function loadApplePayButtonElement() {
+    if (typeof window === 'undefined' || !window.customElements) {
+        return false;
+    }
+    if (window.customElements.get('apple-pay-button')) {
+        return true;
+    }
+    try {
+        await loadScript$1({
+            src: APPLE_PAY_SDK_URL,
+            crossOrigin: 'anonymous',
+            appendTo: 'head',
+        });
+        // Never hang on a script that loaded but did not define the element;
+        // fall back to Primer's own button instead.
+        const defined = window.customElements
+            .whenDefined('apple-pay-button')
+            .then(() => true);
+        const timeout = new Promise(resolve => {
+            setTimeout(() => resolve(false), ELEMENT_DEFINITION_TIMEOUT_MS);
+        });
+        return await Promise.race([defined, timeout]);
+    }
+    catch {
+        return false;
+    }
+}
+/**
+ * Renders Apple's native <apple-pay-button> stretched over `wrapper` and
+ * forwards clicks to the Primer-rendered <button> inside it. The synchronous
+ * forwarded click preserves the user activation required by ApplePaySession.
+ *
+ * Returns the overlay element, or null when the Apple Pay SDK could not be
+ * loaded (callers should keep Primer's own button visible as a fallback).
+ */
+async function overlayNativeApplePayButton(wrapper, options) {
+    const available = await loadApplePayButtonElement();
+    if (!available) {
+        return null;
+    }
+    // The overlay is only safe when Primer's own clickable button is present;
+    // otherwise there is nothing to forward the click to.
+    if (!wrapper.querySelector('button')) {
+        return null;
+    }
+    const native = document.createElement('apple-pay-button');
+    native.setAttribute('type', options.buttonType);
+    native.setAttribute('buttonstyle', options.buttonStyle || 'black');
+    native.setAttribute('locale', (typeof navigator !== 'undefined' && navigator.language) || 'en-US');
+    native.style.cssText = [
+        'position:absolute',
+        'inset:0',
+        'width:100%',
+        'height:100%',
+        '--apple-pay-button-width:100%',
+        '--apple-pay-button-height:100%',
+        '--apple-pay-button-border-radius:28px',
+        'display:block',
+        'cursor:pointer',
+        'z-index:1',
+    ].join(';');
+    wrapper.style.position = 'relative';
+    native.addEventListener('click', () => {
+        const primerButton = wrapper.querySelector('button');
+        primerButton?.click();
+    });
+    wrapper.appendChild(native);
+    return native;
+}
+
 /**
  * @fileoverview Primer SDK integration wrapper
  */
@@ -708,6 +845,7 @@ class PrimerWrapper {
     }
     async createHeadlessCheckout(clientToken, options, method) {
         await this.ensurePrimerLoaded();
+        this.applePayOptions = options.applePay;
         this.currentHeadless = PrimerWrapper.headlessManager.getOrCreate(clientToken, options, method);
         return this.currentHeadless;
     }
@@ -754,16 +892,56 @@ class PrimerWrapper {
             }
             htmlNode.appendChild(wrapper);
             /* end hack */
+            /* PRD-1426: WebKit cannot render newer Apple Pay button types (e.g.
+             * 'continue') through the CSS approach Primer v2 uses. For those types
+             * we overlay Apple's official <apple-pay-button> element on top of the
+             * visually hidden Primer button and forward clicks, keeping Primer's
+             * payment flow untouched. The Primer button is hidden BEFORE it renders
+             * to avoid a flash of the plain button; if the Apple SDK fails to load,
+             * the rule is removed and Primer's own button stays visible (graceful
+             * fallback to 'plain'). */
+            const applePayConfig = this.applePayOptions;
+            const nativeButtonType = allowedPaymentMethod === PaymentMethod.APPLE_PAY &&
+                applePayConfig?.buttonType &&
+                isNativeOnlyApplePayButtonType(applePayConfig.buttonType)
+                ? applePayConfig.buttonType
+                : null;
+            let hideRuleIndex = null;
+            if (nativeButtonType && sheet) {
+                hideRuleIndex = sheet.insertRule(`
+          .${wrapper.className} > button {
+            opacity: 0 !important;
+          }
+        `);
+            }
             button = pmManager.createButton();
             await button.render(wrapper, {});
-            this.destroyCallbacks.push(() => button.clean());
+            let nativeOverlay = null;
+            if (nativeButtonType) {
+                nativeOverlay = await overlayNativeApplePayButton(wrapper, {
+                    buttonType: nativeButtonType,
+                    buttonStyle: applePayConfig?.buttonStyle,
+                });
+                if (!nativeOverlay && sheet && hideRuleIndex !== null) {
+                    sheet.deleteRule(hideRuleIndex);
+                }
+            }
+            this.destroyCallbacks.push(() => {
+                nativeOverlay?.remove();
+                button.clean();
+            });
             onMethodRender(allowedPaymentMethod);
             return {
                 setDisabled: (disabled) => {
                     button.setDisabled(disabled);
+                    if (nativeOverlay) {
+                        nativeOverlay.style.pointerEvents = disabled ? 'none' : '';
+                        nativeOverlay.style.opacity = disabled ? '0.5' : '';
+                    }
                 },
                 destroy: () => {
                     styleEl.remove();
+                    nativeOverlay?.remove();
                     button.clean();
                 },
             };

package/dist/funnelfox-billing.js

@@ -361,6 +361,32 @@
         return input.touched ? input.error : null;
     }
     function resolveTaxDisplay(source) {
+        return {
+            ...resolveTaxAmount(source),
+            ...resolveTaxBreakdown(source.tax_breakdown),
+        };
+    }
+    function resolveTaxBreakdown(breakdown) {
+        if (!Array.isArray(breakdown)) {
+            return {};
+        }
+        const taxBreakdown = breakdown.map(entry => ({
+            amount: entry.amount,
+            percentage: entry.percentage,
+            inclusive: entry.inclusive,
+            taxType: entry.tax_type,
+            country: entry.country,
+            subdivision: entry.subdivision,
+            taxabilityReason: entry.taxability_reason,
+        }));
+        const percentages = taxBreakdown.map(entry => Number(entry.percentage));
+        if (!percentages.length || !percentages.every(Number.isFinite)) {
+            return { taxBreakdown };
+        }
+        const taxRate = Number(percentages.reduce((sum, percentage) => sum + percentage, 0).toFixed(6));
+        return { taxBreakdown, taxRate };
+    }
+    function resolveTaxAmount(source) {
         const taxBehavior = source.tax_behavior ??
             ((source.tax_amount ?? 0) > 0 ? 'exclusive' : undefined);
         if (taxBehavior === 'inclusive') {
@@ -539,7 +565,7 @@
     /**
      * @fileoverview Constants for Funnefox SDK
      */
-    const SDK_VERSION = '0.10.0';
+    const SDK_VERSION = '0.11.0';
     const DEFAULTS = {
         BASE_URL: 'https://billing.funnelfox.com',
         REGION: 'default',
@@ -676,6 +702,117 @@
         return true;
     }
 
+    /**
+     * @fileoverview Support for Apple's official <apple-pay-button> custom element.
+     *
+     * Primer's checkout-web v2 renders the Apple Pay button through the CSS
+     * approach (-webkit-appearance: -apple-pay-button), and WebKit only accepts
+     * the 7 legacy values for -apple-pay-button-type. Newer types such as
+     * 'continue' are silently dropped and fall back to 'plain' (verified in
+     * Safari 26 on macOS and iOS, see PRD-1426).
+     *
+     * Apple's official custom element supports the full set of button types, so
+     * for "native-only" types we overlay it on top of the (visually hidden)
+     * Primer button and forward clicks, keeping Primer's payment flow untouched.
+     */
+    const APPLE_PAY_SDK_URL = 'https://applepay.cdn-apple.com/jsapi/v1/apple-pay-sdk.js';
+    /** How long to wait for the <apple-pay-button> element definition before
+     * giving up and falling back to Primer's own button. */
+    const ELEMENT_DEFINITION_TIMEOUT_MS = 4000;
+    /**
+     * Button types WebKit can render through Primer's CSS approach.
+     * Everything outside this list requires the native <apple-pay-button> element.
+     */
+    const CSS_RENDERABLE_APPLE_PAY_TYPES = [
+        'plain',
+        'buy',
+        'set-up',
+        'donate',
+        'check-out',
+        'book',
+        'subscribe',
+    ];
+    /**
+     * Returns true when the requested Apple Pay buttonType can only be rendered
+     * with Apple's native <apple-pay-button> element.
+     */
+    function isNativeOnlyApplePayButtonType(type) {
+        return !!type && !CSS_RENDERABLE_APPLE_PAY_TYPES.includes(type);
+    }
+    /**
+     * Loads Apple's apple-pay-sdk.js (defines the <apple-pay-button> custom
+     * element). Resolves to true when the element is available.
+     */
+    async function loadApplePayButtonElement() {
+        if (typeof window === 'undefined' || !window.customElements) {
+            return false;
+        }
+        if (window.customElements.get('apple-pay-button')) {
+            return true;
+        }
+        try {
+            await loadScript$1({
+                src: APPLE_PAY_SDK_URL,
+                crossOrigin: 'anonymous',
+                appendTo: 'head',
+            });
+            // Never hang on a script that loaded but did not define the element;
+            // fall back to Primer's own button instead.
+            const defined = window.customElements
+                .whenDefined('apple-pay-button')
+                .then(() => true);
+            const timeout = new Promise(resolve => {
+                setTimeout(() => resolve(false), ELEMENT_DEFINITION_TIMEOUT_MS);
+            });
+            return await Promise.race([defined, timeout]);
+        }
+        catch {
+            return false;
+        }
+    }
+    /**
+     * Renders Apple's native <apple-pay-button> stretched over `wrapper` and
+     * forwards clicks to the Primer-rendered <button> inside it. The synchronous
+     * forwarded click preserves the user activation required by ApplePaySession.
+     *
+     * Returns the overlay element, or null when the Apple Pay SDK could not be
+     * loaded (callers should keep Primer's own button visible as a fallback).
+     */
+    async function overlayNativeApplePayButton(wrapper, options) {
+        const available = await loadApplePayButtonElement();
+        if (!available) {
+            return null;
+        }
+        // The overlay is only safe when Primer's own clickable button is present;
+        // otherwise there is nothing to forward the click to.
+        if (!wrapper.querySelector('button')) {
+            return null;
+        }
+        const native = document.createElement('apple-pay-button');
+        native.setAttribute('type', options.buttonType);
+        native.setAttribute('buttonstyle', options.buttonStyle || 'black');
+        native.setAttribute('locale', (typeof navigator !== 'undefined' && navigator.language) || 'en-US');
+        native.style.cssText = [
+            'position:absolute',
+            'inset:0',
+            'width:100%',
+            'height:100%',
+            '--apple-pay-button-width:100%',
+            '--apple-pay-button-height:100%',
+            '--apple-pay-button-border-radius:28px',
+            'display:block',
+            'cursor:pointer',
+            'z-index:1',
+        ].join(';');
+        wrapper.style.position = 'relative';
+        native.addEventListener('click', () => {
+            const primerButton = wrapper.querySelector('button');
+            primerButton?.click();
+        });
+        wrapper.appendChild(native);
+        return native;
+    }
+
     /**
      * @fileoverview Primer SDK integration wrapper
      */
@@ -714,6 +851,7 @@
         }
         async createHeadlessCheckout(clientToken, options, method) {
             await this.ensurePrimerLoaded();
+            this.applePayOptions = options.applePay;
             this.currentHeadless = PrimerWrapper.headlessManager.getOrCreate(clientToken, options, method);
             return this.currentHeadless;
         }
@@ -760,16 +898,56 @@
                 }
                 htmlNode.appendChild(wrapper);
                 /* end hack */
+                /* PRD-1426: WebKit cannot render newer Apple Pay button types (e.g.
+                 * 'continue') through the CSS approach Primer v2 uses. For those types
+                 * we overlay Apple's official <apple-pay-button> element on top of the
+                 * visually hidden Primer button and forward clicks, keeping Primer's
+                 * payment flow untouched. The Primer button is hidden BEFORE it renders
+                 * to avoid a flash of the plain button; if the Apple SDK fails to load,
+                 * the rule is removed and Primer's own button stays visible (graceful
+                 * fallback to 'plain'). */
+                const applePayConfig = this.applePayOptions;
+                const nativeButtonType = allowedPaymentMethod === exports.PaymentMethod.APPLE_PAY &&
+                    applePayConfig?.buttonType &&
+                    isNativeOnlyApplePayButtonType(applePayConfig.buttonType)
+                    ? applePayConfig.buttonType
+                    : null;
+                let hideRuleIndex = null;
+                if (nativeButtonType && sheet) {
+                    hideRuleIndex = sheet.insertRule(`
+          .${wrapper.className} > button {
+            opacity: 0 !important;
+          }
+        `);
+                }
                 button = pmManager.createButton();
                 await button.render(wrapper, {});
-                this.destroyCallbacks.push(() => button.clean());
+                let nativeOverlay = null;
+                if (nativeButtonType) {
+                    nativeOverlay = await overlayNativeApplePayButton(wrapper, {
+                        buttonType: nativeButtonType,
+                        buttonStyle: applePayConfig?.buttonStyle,
+                    });
+                    if (!nativeOverlay && sheet && hideRuleIndex !== null) {
+                        sheet.deleteRule(hideRuleIndex);
+                    }
+                }
+                this.destroyCallbacks.push(() => {
+                    nativeOverlay?.remove();
+                    button.clean();
+                });
                 onMethodRender(allowedPaymentMethod);
                 return {
                     setDisabled: (disabled) => {
                         button.setDisabled(disabled);
+                        if (nativeOverlay) {
+                            nativeOverlay.style.pointerEvents = disabled ? 'none' : '';
+                            nativeOverlay.style.opacity = disabled ? '0.5' : '';
+                        }
                     },
                     destroy: () => {
                         styleEl.remove();
+                        nativeOverlay?.remove();
                         button.clean();
                     },
                 };