@funnelsgrove/payments 0.11.7 → 0.11.9

package/dist/providers/stripe/components/SharedStripeCheckoutDialog.js

@@ -142,7 +142,7 @@ function SharedStripeCheckoutForm({ amountCents, checkoutAnalytics, checkoutSess
         !submitting;
     const walletCheckoutAllowed = allowApplePayExpressCheckout || allowApplePayQrFallback;
     const walletFallbackDisabled = !walletCheckoutAllowed || walletAvailable === false;
-    const setSharedError = (message, alreadyTracked = false) => {
+    const setSharedError = (message, alreadyTracked = false, providerError) => {
         if (message && checkoutAnalytics && !alreadyTracked) {
             trackCheckoutFailureShown({
                 analytics: checkoutAnalytics,
@@ -151,6 +151,9 @@ function SharedStripeCheckoutForm({ amountCents, checkoutAnalytics, checkoutSess
                 failureStage: 'card_form',
                 paymentMethod: 'card',
                 provider: 'stripe',
+                providerDeclineCode: providerError === null || providerError === void 0 ? void 0 : providerError.decline_code,
+                providerErrorCode: providerError === null || providerError === void 0 ? void 0 : providerError.code,
+                providerErrorType: providerError === null || providerError === void 0 ? void 0 : providerError.type,
             });
         }
         setError(message);
@@ -216,7 +219,7 @@ function SharedStripeCheckoutForm({ amountCents, checkoutAnalytics, checkoutSess
                 return_url: returnUrl,
             });
             if (result.error) {
-                setSharedError(result.error.message || 'Payment failed.');
+                setSharedError(result.error.message || 'Payment failed.', false, result.error);
                 setSubmitting(false);
                 return;
             }

package/dist/providers/stripe/components/SharedStripeCheckoutV2Dialog.js

@@ -70,6 +70,7 @@ function SharedStripeCheckoutV2CheckoutSessionForm({ amountCents, buttonColor, c
         ? true
         : walletAvailable;
     const [submitting, setSubmitting] = useState(false);
+    const [paymentElementReady, setPaymentElementReady] = useState(false);
     const [error, setError] = useState(null);
     const [billingCountry, setBillingCountry] = useState(null);
     const initialCustomerEmail = (customerEmail === null || customerEmail === void 0 ? void 0 : customerEmail.trim()) || '';
@@ -152,7 +153,7 @@ function SharedStripeCheckoutV2CheckoutSessionForm({ amountCents, buttonColor, c
         setError(null);
         onInactiveCheckoutSession === null || onInactiveCheckoutSession === void 0 ? void 0 : onInactiveCheckoutSession();
     };
-    const setSharedError = (message, alreadyTracked = false) => {
+    const setSharedError = (message, alreadyTracked = false, providerError) => {
         if (isInactiveCheckoutSessionError(message)) {
             handleInactiveCheckoutSession();
             return;
@@ -165,6 +166,9 @@ function SharedStripeCheckoutV2CheckoutSessionForm({ amountCents, buttonColor, c
                 failureStage: 'card_form',
                 paymentMethod: 'card',
                 provider: 'stripe',
+                providerDeclineCode: providerError === null || providerError === void 0 ? void 0 : providerError.decline_code,
+                providerErrorCode: providerError === null || providerError === void 0 ? void 0 : providerError.code,
+                providerErrorType: providerError === null || providerError === void 0 ? void 0 : providerError.type,
             });
         }
         setError(message);
@@ -260,6 +264,10 @@ function SharedStripeCheckoutV2CheckoutSessionForm({ amountCents, buttonColor, c
                 : 'Payment form is not ready yet.');
             return;
         }
+        if (!paymentElementReady) {
+            setSharedError('Payment form is not ready yet.', true);
+            return;
+        }
         setSubmitting(true);
         setSharedError(null);
         try {
@@ -274,7 +282,7 @@ function SharedStripeCheckoutV2CheckoutSessionForm({ amountCents, buttonColor, c
             });
             if (result.type === 'error') {
                 const message = result.error.message || 'Payment failed.';
-                setSharedError(message);
+                setSharedError(message, false, result.error);
                 setSubmitting(false);
                 return;
             }
@@ -322,7 +330,7 @@ function SharedStripeCheckoutV2CheckoutSessionForm({ amountCents, buttonColor, c
                                                         }
                                                         setEmailDraft(event.target.value);
                                                         onCustomerEmailChange === null || onCustomerEmailChange === void 0 ? void 0 : onCustomerEmailChange(event.target.value);
-                                                    } }) })] }), _jsx(PaymentElement, { options: paymentElementOptions, onChange: handlePaymentElementChange }), fixedBillingCountry && fixedBillingCountryLabel ? (_jsxs("label", { className: 'shared-checkout-v2-country-field', children: [_jsx("span", { className: 'shared-checkout-v2-country-label', children: "Country" }), _jsx("span", { className: 'shared-checkout-v2-country-control', children: _jsx("select", { "aria-label": 'Country', className: 'shared-checkout-v2-country-select', value: fixedBillingCountry, onChange: () => setBillingCountry(fixedBillingCountry), children: _jsx("option", { value: fixedBillingCountry, children: fixedBillingCountryLabel }) }) })] })) : null] }), visibleError ? _jsx("p", { className: 'shared-checkout-v2-error', children: visibleError }) : null, _jsxs("button", { type: 'submit', className: 'shared-checkout-v2-card-submit', disabled: submitting, children: [_jsx(SecurityLockIcon, { className: 'shared-checkout-v2-card-submit-icon' }), submitting ? processingLabel : cardSubmitLabel] }), _jsx("div", { className: 'shared-checkout-v2-card-brands', "aria-hidden": 'true', children: cardBrandLabels.map((label) => (_jsx(PaymentBrandMark, { label: label, className: 'shared-checkout-v2-card-brand' }, label))) }), _jsxs("p", { className: 'shared-checkout-v2-secure-pill shared-checkout-v2-secure-pill--card', children: [_jsx(SecurityLockIcon, { className: 'shared-checkout-v2-secure-pill-icon' }), secureLabel] })] })] })] }));
+                                                    } }) })] }), _jsx(PaymentElement, { options: paymentElementOptions, onChange: handlePaymentElementChange, onReady: () => setPaymentElementReady(true) }), fixedBillingCountry && fixedBillingCountryLabel ? (_jsxs("label", { className: 'shared-checkout-v2-country-field', children: [_jsx("span", { className: 'shared-checkout-v2-country-label', children: "Country" }), _jsx("span", { className: 'shared-checkout-v2-country-control', children: _jsx("select", { "aria-label": 'Country', className: 'shared-checkout-v2-country-select', value: fixedBillingCountry, onChange: () => setBillingCountry(fixedBillingCountry), children: _jsx("option", { value: fixedBillingCountry, children: fixedBillingCountryLabel }) }) })] })) : null] }), visibleError ? _jsx("p", { className: 'shared-checkout-v2-error', children: visibleError }) : null, _jsxs("button", { type: 'submit', className: 'shared-checkout-v2-card-submit', disabled: submitting || !paymentElementReady, children: [_jsx(SecurityLockIcon, { className: 'shared-checkout-v2-card-submit-icon' }), submitting ? processingLabel : cardSubmitLabel] }), _jsx("div", { className: 'shared-checkout-v2-card-brands', "aria-hidden": 'true', children: cardBrandLabels.map((label) => (_jsx(PaymentBrandMark, { label: label, className: 'shared-checkout-v2-card-brand' }, label))) }), _jsxs("p", { className: 'shared-checkout-v2-secure-pill shared-checkout-v2-secure-pill--card', children: [_jsx(SecurityLockIcon, { className: 'shared-checkout-v2-secure-pill-icon' }), secureLabel] })] })] })] }));
 }
 function CheckoutSessionProvider({ children, clientSecret, fixedBillingCountry, stripePromise, variant, }) {
     const providerChildren = children;

package/dist/providers/stripe/components/StripeCheckoutExpressCheckoutButton.js

@@ -120,7 +120,7 @@ export function StripeCheckoutExpressCheckoutButton({ beforeConfirm, checkoutAna
             checkoutStartSource,
             paymentMethod }));
     };
-    const reportFailure = (message, failureStage, paymentMethod) => {
+    const reportFailure = (message, failureStage, paymentMethod, providerError) => {
         if (checkoutAnalytics) {
             trackCheckoutFailureShown({
                 analytics: checkoutAnalytics,
@@ -129,6 +129,9 @@ export function StripeCheckoutExpressCheckoutButton({ beforeConfirm, checkoutAna
                 failureStage,
                 paymentMethod,
                 provider: 'stripe',
+                providerDeclineCode: providerError === null || providerError === void 0 ? void 0 : providerError.decline_code,
+                providerErrorCode: providerError === null || providerError === void 0 ? void 0 : providerError.code,
+                providerErrorType: providerError === null || providerError === void 0 ? void 0 : providerError.type,
             });
         }
         onError === null || onError === void 0 ? void 0 : onError(message);
@@ -202,7 +205,7 @@ export function StripeCheckoutExpressCheckoutButton({ beforeConfirm, checkoutAna
             : {})), { expressCheckoutConfirmEvent: event, redirect: 'if_required' }));
         if (result.type === 'error') {
             const message = result.error.message || 'Wallet checkout failed.';
-            reportFailure(message, 'wallet_confirmation', event.expressPaymentType);
+            reportFailure(message, 'wallet_confirmation', event.expressPaymentType, result.error);
             event.paymentFailed({ reason: 'fail', message });
             return;
         }

package/dist/providers/stripe/components/StripeExpressCheckoutButton.js

@@ -70,7 +70,7 @@ export function StripeExpressCheckoutButton({ amountCents, beforeConfirm, checko
         var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k;
         return Object.assign(Object.assign(Object.assign({}, baseOptions), (options !== null && options !== void 0 ? options : {})), { buttonTheme: Object.assign(Object.assign({}, ((_a = baseOptions.buttonTheme) !== null && _a !== void 0 ? _a : {})), ((_b = options === null || options === void 0 ? void 0 : options.buttonTheme) !== null && _b !== void 0 ? _b : {})), buttonType: Object.assign(Object.assign({}, ((_c = baseOptions.buttonType) !== null && _c !== void 0 ? _c : {})), ((_d = options === null || options === void 0 ? void 0 : options.buttonType) !== null && _d !== void 0 ? _d : {})), layout: Object.assign(Object.assign({}, ((_e = baseOptions.layout) !== null && _e !== void 0 ? _e : {})), ((_f = options === null || options === void 0 ? void 0 : options.layout) !== null && _f !== void 0 ? _f : {})), paymentMethods: Object.assign(Object.assign({}, ((_g = baseOptions.paymentMethods) !== null && _g !== void 0 ? _g : {})), ((_h = options === null || options === void 0 ? void 0 : options.paymentMethods) !== null && _h !== void 0 ? _h : {})), lineItems: (_j = options === null || options === void 0 ? void 0 : options.lineItems) !== null && _j !== void 0 ? _j : baseOptions.lineItems, paymentMethodOrder: (_k = options === null || options === void 0 ? void 0 : options.paymentMethodOrder) !== null && _k !== void 0 ? _k : baseOptions.paymentMethodOrder });
     }, [baseOptions, options]);
-    const reportFailure = (message, failureStage, paymentMethod) => {
+    const reportFailure = (message, failureStage, paymentMethod, providerError) => {
         if (checkoutAnalytics) {
             trackCheckoutFailureShown({
                 analytics: checkoutAnalytics,
@@ -79,6 +79,9 @@ export function StripeExpressCheckoutButton({ amountCents, beforeConfirm, checko
                 failureStage,
                 paymentMethod,
                 provider: 'stripe',
+                providerDeclineCode: providerError === null || providerError === void 0 ? void 0 : providerError.decline_code,
+                providerErrorCode: providerError === null || providerError === void 0 ? void 0 : providerError.code,
+                providerErrorType: providerError === null || providerError === void 0 ? void 0 : providerError.type,
             });
         }
         onError === null || onError === void 0 ? void 0 : onError(message);
@@ -150,7 +153,7 @@ export function StripeExpressCheckoutButton({ amountCents, beforeConfirm, checko
         });
         if (result.error) {
             const message = result.error.message || 'Wallet checkout failed.';
-            reportFailure(message, 'wallet_confirmation', event.expressPaymentType);
+            reportFailure(message, 'wallet_confirmation', event.expressPaymentType, result.error);
             event.paymentFailed({ reason: 'fail', message });
             return;
         }

package/dist/services/checkoutObservability.service.d.ts

@@ -25,6 +25,9 @@ type CheckoutObservabilityInput = {
 type CheckoutFailureShownInput = CheckoutObservabilityInput & {
     errorCode?: string | null;
     errorMessage: string;
+    providerDeclineCode?: string | null;
+    providerErrorCode?: string | null;
+    providerErrorType?: string | null;
 };
 export declare const trackCheckoutFailureShown: (input: CheckoutFailureShownInput) => string | null;
 export declare const trackCheckoutCanceled: (input: CheckoutObservabilityInput) => string | null;

package/dist/services/checkoutObservability.service.js

@@ -26,6 +26,18 @@ export const resolveCheckoutObservabilityAnalyticsContext = (input) => {
         stepContractVersion: (_x = (_w = input.analytics) === null || _w === void 0 ? void 0 : _w.stepContractVersion) !== null && _x !== void 0 ? _x : validStepContractVersion,
     };
 };
+const STRIPE_PAYMENT_REJECTION_CODES = new Set([
+    'card_declined',
+    'expired_card',
+    'incorrect_cvc',
+    'incorrect_number',
+    'incorrect_zip',
+    'insufficient_funds',
+    'invalid_cvc',
+    'invalid_expiry_month',
+    'invalid_expiry_year',
+    'payment_intent_authentication_failure',
+]);
 const sanitizeErrorMessage = (value) => value
     .replace(/[\r\n\t]+/g, ' ')
     .replace(/[A-Z0-9._%+-]+@[A-Z0-9.-]+\.[A-Z]{2,}/gi, '[redacted-email]')
@@ -63,6 +75,9 @@ const reportCheckoutObservability = (input) => {
             funnelVersionId: ((_g = runtimeConfig === null || runtimeConfig === void 0 ? void 0 : runtimeConfig.funnelVersionId) === null || _g === void 0 ? void 0 : _g.trim()) || FUNNEL_VERSION_ID.trim() || undefined,
             paymentMethod: input.paymentMethod || undefined,
             provider: input.provider,
+            providerDeclineCode: input.providerDeclineCode,
+            providerErrorCode: input.providerErrorCode,
+            providerErrorType: input.providerErrorType,
         }),
         keepalive: true,
     }).then(() => undefined);
@@ -83,7 +98,7 @@ const resolveErrorCode = (message, requestedCode) => {
 const emitCheckoutObservability = (eventType, input, failure) => {
     var _a, _b;
     const paymentMethod = toAnalyticsPaymentMethod(input.paymentMethod);
-    const metadata = Object.assign(Object.assign({}, ((_a = input.analytics.metadata) !== null && _a !== void 0 ? _a : {})), { checkout_session_id: ((_b = input.checkoutSessionId) === null || _b === void 0 ? void 0 : _b.trim()) || undefined, checkout_failure_stage: input.failureStage, payment_provider: input.provider, payment_method: paymentMethod || undefined, error_code: failure === null || failure === void 0 ? void 0 : failure.errorCode, error_message: failure === null || failure === void 0 ? void 0 : failure.errorMessage });
+    const metadata = Object.assign(Object.assign({}, ((_a = input.analytics.metadata) !== null && _a !== void 0 ? _a : {})), { checkout_session_id: ((_b = input.checkoutSessionId) === null || _b === void 0 ? void 0 : _b.trim()) || undefined, checkout_failure_stage: input.failureStage, payment_provider: input.provider, payment_method: paymentMethod || undefined, error_code: failure === null || failure === void 0 ? void 0 : failure.errorCode, error_message: failure === null || failure === void 0 ? void 0 : failure.errorMessage, provider_decline_code: failure === null || failure === void 0 ? void 0 : failure.providerDeclineCode, provider_error_code: failure === null || failure === void 0 ? void 0 : failure.providerErrorCode, provider_error_type: failure === null || failure === void 0 ? void 0 : failure.providerErrorType });
     const eventId = publicAnalyticsSdk.track({
         eventType,
         environment: input.analytics.environment,
@@ -107,18 +122,33 @@ const emitCheckoutObservability = (eventType, input, failure) => {
         failureStage: input.failureStage,
         paymentMethod,
         provider: input.provider,
+        providerDeclineCode: failure === null || failure === void 0 ? void 0 : failure.providerDeclineCode,
+        providerErrorCode: failure === null || failure === void 0 ? void 0 : failure.providerErrorCode,
+        providerErrorType: failure === null || failure === void 0 ? void 0 : failure.providerErrorType,
     }).catch(() => undefined);
     void publicAnalyticsSdk.flush().catch(() => 0);
     return eventId;
 };
 export const trackCheckoutFailureShown = (input) => {
+    var _a, _b, _c;
     const errorMessage = sanitizeErrorMessage(input.errorMessage);
     if (!errorMessage) {
         return null;
     }
-    return emitCheckoutObservability('checkout_failure_shown', input, {
-        errorCode: resolveErrorCode(errorMessage, input.errorCode),
+    const providerDeclineCode = (_a = asNonEmptyString(input.providerDeclineCode)) === null || _a === void 0 ? void 0 : _a.slice(0, 120);
+    const providerErrorCode = (_b = asNonEmptyString(input.providerErrorCode)) === null || _b === void 0 ? void 0 : _b.slice(0, 120);
+    const providerErrorType = (_c = asNonEmptyString(input.providerErrorType)) === null || _c === void 0 ? void 0 : _c.slice(0, 120);
+    const paymentRejected = input.provider === 'stripe' && (Boolean(providerDeclineCode)
+        || providerErrorType === 'card_error'
+        || (providerErrorCode ? STRIPE_PAYMENT_REJECTION_CODES.has(providerErrorCode) : false));
+    return emitCheckoutObservability(paymentRejected ? 'checkout_payment_rejected' : 'checkout_failure_shown', input, {
+        errorCode: paymentRejected
+            ? providerDeclineCode || providerErrorCode || 'payment_rejected'
+            : resolveErrorCode(errorMessage, input.errorCode),
         errorMessage,
+        providerDeclineCode,
+        providerErrorCode,
+        providerErrorType,
     });
 };
 export const trackCheckoutCanceled = (input) => emitCheckoutObservability('checkout_canceled', input);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@funnelsgrove/payments",
-  "version": "0.11.7",
+  "version": "0.11.9",
   "repository": {
     "type": "git",
     "url": "git+https://github.com/The-Solid-Grove/funnelsgrove.git",