@funnelfox/billing 0.8.0-ffb-550.38 → 0.8.0-ffb-631.40

package/README.md

@@ -421,6 +421,8 @@ try {
     console.log('Error Code:', error.errorCode); // e.g., 'double_purchase'
     console.log('Error Type:', error.errorType); // e.g., 'api_exception'
     console.log('Request ID:', error.requestId); // For support
+    console.log('Decline Code:', error.declineCode); // e.g., 'INSUFFICIENT_FUNDS', set on failed payments
+    console.log('Decline Source:', error.declineCodeSource); // 'primer' | 'stripe' | 'adyen', when the provider reports one
     console.log('Message:', error.message);
   } else if (error instanceof PrimerError) {
     // Primer SDK error
@@ -634,6 +636,8 @@ const paymentMethod = await Billing.initMethod(
     },
     onPaymentFail: error => {
       console.error('Payment failed:', error.message);
+      console.log('Decline code:', error.declineCode); // e.g., 'INSUFFICIENT_FUNDS', when the provider reports one
+      console.log('Decline source:', error.declineCodeSource); // 'primer' | 'stripe' | 'adyen'
     },
     onPaymentCancel: () => {
       console.log('Payment was cancelled');

package/dist/chunk-index.cjs.js

@@ -119,6 +119,8 @@ class APIError extends FunnefoxSDKError {
         this.errorType = options.errorType || null;
         this.requestId = options.requestId || null;
         this.response = options.response || null;
+        this.declineCode = options.declineCode || null;
+        this.declineCodeSource = options.declineCodeSource || null;
     }
 }
 class PrimerError extends FunnefoxSDKError {
@@ -355,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') {
@@ -533,7 +561,7 @@ exports.PaymentMethod = void 0;
 /**
  * @fileoverview Constants for Funnefox SDK
  */
-const SDK_VERSION = '0.8.0-ffb-550.38';
+const SDK_VERSION = '0.8.0-ffb-631.40';
 const DEFAULTS = {
     BASE_URL: 'https://billing.funnelfox.com',
     REGION: 'default',
@@ -626,6 +654,7 @@ const DEFAULT_PAYMENT_METHOD_ORDER = [
 const DEFAULT_BUTTONS_OPTIONS = {
     [exports.PaymentMethod.APPLE_PAY]: {
         buttonStyle: 'black',
+        buttonType: 'continue',
     },
     [exports.PaymentMethod.PAYPAL]: {
         buttonColor: 'gold',
@@ -670,6 +699,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 +848,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 +895,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();
                 },
             };
@@ -1121,6 +1302,37 @@ class PrimerWrapper {
 }
 PrimerWrapper.headlessManager = new HeadlessManager();
 
+/**
+ * @fileoverview Normalization of payment failure errors
+ */
+const STRIPE_CARD_ERROR = 'card_error';
+function declineCodeFromStripeError(error) {
+    const { type, code } = error;
+    if (type !== STRIPE_CARD_ERROR || typeof code !== 'string' || !code) {
+        return null;
+    }
+    return code.toUpperCase();
+}
+function toPaymentFailure(error) {
+    const failure = new Error(error?.message || 'Payment processing failed');
+    if (error instanceof APIError) {
+        if (error.declineCode) {
+            failure.declineCode = error.declineCode;
+        }
+        if (error.declineCodeSource) {
+            failure.declineCodeSource = error.declineCodeSource;
+        }
+    }
+    else if (error instanceof Error) {
+        const declineCode = declineCodeFromStripeError(error);
+        if (declineCode) {
+            failure.declineCode = declineCode;
+            failure.declineCodeSource = 'stripe';
+        }
+    }
+    return failure;
+}
+
 /**
  * @fileoverview API client for Funnefox backend integration
  */
@@ -1318,7 +1530,11 @@ class APIClient {
                         status: 'succeeded',
                     };
                 case 'failed':
-                    throw new APIError(data.failed_message_for_user || 'Payment failed', null, { response });
+                    throw new APIError(data.failed_message_for_user || 'Payment failed', null, {
+                        response,
+                        declineCode: data.decline_code,
+                        declineCodeSource: data.decline_code_source,
+                    });
                 case 'cancelled':
                     throw new APIError('Payment was cancelled by user', null, {
                         response,
@@ -1869,6 +2085,9 @@ class CheckoutInstance extends EventEmitter {
         this.counter = 0;
         this.cachedSessionResponse = null;
         this.taxRecalcSeq = 0;
+        // WebKit allows one ApplePaySession per page: a second tap while the sheet is
+        // still opening throws InvalidAccessError, but Primer asks to start first.
+        this.isApplePaySheetOpen = false;
         this.cardSessionFieldConfig = {};
         this.isTelemetryEnabled = false;
         this.telemetryCleanup = null;
@@ -2031,10 +2250,11 @@ class CheckoutInstance extends EventEmitter {
             }
             catch (error) {
                 this._setState('error');
-                this.emit(EVENTS.PURCHASE_FAILURE, new Error(error.message || 'Payment processing failed'));
-                primerHandler.handleFailure(error.message || 'Payment processing failed');
+                this.emit(EVENTS.PURCHASE_FAILURE, toPaymentFailure(error));
+                primerHandler.handleFailure(error?.message || 'Payment processing failed');
             }
             finally {
+                this.isApplePaySheetOpen = false;
                 this.onLoaderChangeWithRace(false);
                 this._setState('ready');
             }
@@ -2056,10 +2276,11 @@ class CheckoutInstance extends EventEmitter {
             }
             catch (error) {
                 this._setState('error');
-                this.emit(EVENTS.PURCHASE_FAILURE, new Error(error.message || 'Payment processing failed'));
-                primerHandler.handleFailure(error.message || 'Payment processing failed');
+                this.emit(EVENTS.PURCHASE_FAILURE, toPaymentFailure(error));
+                primerHandler.handleFailure(error?.message || 'Payment processing failed');
             }
             finally {
+                this.isApplePaySheetOpen = false;
                 this.emit(EVENTS.PURCHASE_COMPLETED);
                 this.onLoaderChangeWithRace(false);
                 this._setState('ready');
@@ -2384,10 +2605,11 @@ class CheckoutInstance extends EventEmitter {
             ...checkoutConfig,
             ...options,
             card: merge(this.getPrimerCardConfig() || {}, options.card || {}),
-            applePay: merge(this.checkoutConfig.applePay || {}, options.applePay || {}),
+            applePay: merge(DEFAULT_BUTTONS_OPTIONS[exports.PaymentMethod.APPLE_PAY], options.applePay || {}, this.checkoutConfig.applePay || {}),
             onTokenizeSuccess: this.handleTokenizeSuccess,
             onResumeSuccess: this.handleResumeSuccess,
             onResumeError: error => {
+                this.isApplePaySheetOpen = false;
                 if (error.stack?.includes('PROCESSOR_3DS') &&
                     error.code === 'RESUME_ERROR' &&
                     error.message?.includes('fetch resume key')) {
@@ -2397,15 +2619,23 @@ class CheckoutInstance extends EventEmitter {
                 this.emit(EVENTS.PURCHASE_FAILURE, error);
             },
             onCheckoutFail: error => {
+                this.isApplePaySheetOpen = false;
                 this.emit(EVENTS.PURCHASE_FAILURE, error);
             },
             onTokenizeError: error => {
+                this.isApplePaySheetOpen = false;
                 this.emit(EVENTS.PURCHASE_FAILURE, error);
             },
             onTokenizeStart: () => {
                 wasPaymentProcessedStarted = true;
             },
             onTokenizeShouldStart: data => {
+                if (data.paymentMethodType === exports.PaymentMethod.APPLE_PAY) {
+                    if (this.isApplePaySheetOpen) {
+                        return false;
+                    }
+                    this.isApplePaySheetOpen = true;
+                }
                 this.activePaymentMethodType = data.paymentMethodType;
                 this.emit(EVENTS.ERROR, undefined);
                 this.emit(EVENTS.START_PURCHASE, data.paymentMethodType);
@@ -2417,6 +2647,7 @@ class CheckoutInstance extends EventEmitter {
                         this.emit(EVENTS.ERROR, undefined);
                         break;
                     case 'PAYMENT_METHOD_UNSELECTED':
+                        this.isApplePaySheetOpen = false;
                         if (!wasPaymentProcessedStarted) {
                             this.emit(EVENTS.PURCHASE_CANCELLED);
                         }
@@ -3011,3 +3242,4 @@ exports.createClientSession = createClientSession;
 exports.getAvailablePaymentMethods = getAvailablePaymentMethods;
 exports.loadStripe = loadStripe;
 exports.resolveTaxDisplay = resolveTaxDisplay;
+exports.toPaymentFailure = toPaymentFailure;