@funnelsgrove/payments 0.27.0 → 0.28.0

package/dist/generated/package-version.d.ts

@@ -1 +1 @@
-export declare const PAYMENTS_PACKAGE_VERSION = "0.27.0";
+export declare const PAYMENTS_PACKAGE_VERSION = "0.28.0";

package/dist/generated/package-version.js

@@ -1,2 +1,2 @@
 // Generated by scripts/generate-package-version.mjs.
-export const PAYMENTS_PACKAGE_VERSION = "0.27.0";
+export const PAYMENTS_PACKAGE_VERSION = "0.28.0";

package/dist/providers/solidgate/components/SolidgateCheckoutDialog.d.ts

@@ -1,3 +1,3 @@
 import type { SolidgateCheckoutDialogProps } from './SolidgateCheckoutDialog.types.js';
 export type { SolidgateCheckoutDialogState, SolidgateCheckoutDialogContent, SolidgateCheckoutDialogPresentation, SolidgateCheckoutDialogProps, SolidgateCheckoutAnalyticsContext, } from './SolidgateCheckoutDialog.types.js';
-export declare function SolidgateCheckoutDialog({ open, request, customerEmail, checkoutAnalytics, content, presentation, onClose, onCustomerEmailCommit, onSuccess, onRetry, onError, onPreparationStart, onStateChange, }: SolidgateCheckoutDialogProps): import("react/jsx-runtime").JSX.Element | null;
+export declare function SolidgateCheckoutDialog({ open, layout, request, customerEmail, checkoutAnalytics, content, presentation, onClose, onCustomerEmailCommit, onSuccess, onRetry, onError, onPreparationStart, onStateChange, onPaymentPendingChange, }: SolidgateCheckoutDialogProps): import("react/jsx-runtime").JSX.Element | null;

package/dist/providers/solidgate/components/SolidgateCheckoutDialog.js

@@ -1,5 +1,5 @@
 'use client';
-import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 import { completePaywallCheckout } from '@funnelsgrove/runtime';
 import { publicAnalyticsSdk } from '@funnelsgrove/analytics';
 import { useCallback, useEffect, useMemo, useRef, useState, } from 'react';
@@ -65,7 +65,7 @@ const trackSolidgateCheckoutEvent = async (eventName, attemptId, context) => {
     }
 };
 const isAbortError = (error) => (error instanceof DOMException && error.name === 'AbortError');
-export function SolidgateCheckoutDialog({ open, request, customerEmail, checkoutAnalytics, content, presentation, onClose, onCustomerEmailCommit, onSuccess, onRetry, onError, onPreparationStart, onStateChange, }) {
+export function SolidgateCheckoutDialog({ open, layout = 'dialog', request, customerEmail, checkoutAnalytics, content, presentation, onClose, onCustomerEmailCommit, onSuccess, onRetry, onError, onPreparationStart, onStateChange, onPaymentPendingChange, }) {
     const copy = useMemo(() => (Object.assign(Object.assign({}, defaultContent), content)), [content]);
     const [view, setView] = useState(initialView);
     const [retryRequest, setRetryRequest] = useState(null);
@@ -85,6 +85,7 @@ export function SolidgateCheckoutDialog({ open, request, customerEmail, checkout
     const copyRef = useRef(copy);
     const onCloseRef = useRef(onClose);
     const onErrorRef = useRef(onError);
+    const onPaymentPendingChangeRef = useRef(onPaymentPendingChange);
     const onStateChangeRef = useRef(onStateChange);
     const onSuccessRef = useRef(onSuccess);
     useEffect(() => {
@@ -93,8 +94,9 @@ export function SolidgateCheckoutDialog({ open, request, customerEmail, checkout
         onCloseRef.current = onClose;
         onErrorRef.current = onError;
         onStateChangeRef.current = onStateChange;
+        onPaymentPendingChangeRef.current = onPaymentPendingChange;
         onSuccessRef.current = onSuccess;
-    }, [checkoutAnalytics, copy, onClose, onError, onStateChange, onSuccess]);
+    }, [checkoutAnalytics, copy, onClose, onError, onStateChange, onSuccess, onPaymentPendingChange]);
     useEffect(() => {
         setEmailInput((customerEmail === null || customerEmail === void 0 ? void 0 : customerEmail.trim()) || '');
         setCommittedEmail(normalizedCustomerEmail);
@@ -150,9 +152,11 @@ export function SolidgateCheckoutDialog({ open, request, customerEmail, checkout
     const latestRequestRef = useRef(normalizedRequest);
     latestRequestRef.current = normalizedRequest;
     const setState = useCallback((nextView) => {
-        var _a;
+        var _a, _b;
         setView(nextView);
         (_a = onStateChangeRef.current) === null || _a === void 0 ? void 0 : _a.call(onStateChangeRef, nextView.state);
+        (_b = onPaymentPendingChangeRef.current) === null || _b === void 0 ? void 0 : _b.call(onPaymentPendingChangeRef, nextView.state === 'submitting'
+            || nextView.state === 'verifying' || nextView.state === 'success' || nextView.canResumeVerification);
     }, []);
     const trackFailure = useCallback((message, failureStage, attemptId) => {
         const analytics = checkoutAnalyticsRef.current;
@@ -169,9 +173,11 @@ export function SolidgateCheckoutDialog({ open, request, customerEmail, checkout
         });
     }, []);
     const requiresEmailCommit = Boolean(onCustomerEmailCommit);
+    const startedAttemptRef = useRef(null);
+    const active = open && (layout !== 'wallet' || Boolean(normalizedCustomerEmail));
     useEffect(() => {
         var _a, _b, _c, _d, _e, _f, _g;
-        if (!open) {
+        if (!active) {
             preparedRequestRef.current = null;
             (_a = prepareAbortRef.current) === null || _a === void 0 ? void 0 : _a.abort();
             (_b = statusAbortRef.current) === null || _b === void 0 ? void 0 : _b.abort();
@@ -205,7 +211,9 @@ export function SolidgateCheckoutDialog({ open, request, customerEmail, checkout
             .then((checkout) => {
             if (!controller.signal.aborted) {
                 setState({ state: 'ready', checkout, canResumeVerification: false });
-                void trackSolidgateCheckoutEvent('checkout_started', checkout.attemptId, checkoutAnalyticsRef.current);
+                if (layout !== 'wallet') {
+                    void trackSolidgateCheckoutEvent('checkout_started', checkout.attemptId, checkoutAnalyticsRef.current);
+                }
             }
         })
             .catch((error) => {
@@ -217,13 +225,13 @@ export function SolidgateCheckoutDialog({ open, request, customerEmail, checkout
             }
         });
         return () => controller.abort();
-    }, [checkoutKey, committedEmail, onPreparationStart, open, requiresEmailCommit, setState, trackFailure]);
+    }, [checkoutKey, committedEmail, layout, onPreparationStart, active, requiresEmailCommit, setState, trackFailure]);
     const paymentFormMounted = Boolean(view.checkout && mountedPaymentAttemptId === view.checkout.attemptId);
     const showPreparingLoader = view.state === 'loading'
         || (view.state === 'ready' && !paymentFormMounted);
     useEffect(() => {
         var _a;
-        if (!open) {
+        if (!open || layout === 'wallet') {
             return;
         }
         const previouslyFocused = document.activeElement instanceof HTMLElement
@@ -253,7 +261,7 @@ export function SolidgateCheckoutDialog({ open, request, customerEmail, checkout
             window.removeEventListener('keydown', handleKeyDown);
             previouslyFocused === null || previouslyFocused === void 0 ? void 0 : previouslyFocused.focus();
         };
-    }, [open, showPreparingLoader, view.checkout]);
+    }, [layout, open, showPreparingLoader, view.checkout]);
     useEffect(() => () => {
         var _a, _b;
         (_a = prepareAbortRef.current) === null || _a === void 0 ? void 0 : _a.abort();
@@ -356,7 +364,7 @@ export function SolidgateCheckoutDialog({ open, request, customerEmail, checkout
         }
         onCloseRef.current();
     };
-    if (!open) {
+    if (!active) {
         return null;
     }
     const showForm = view.state === 'ready'
@@ -379,6 +387,40 @@ export function SolidgateCheckoutDialog({ open, request, customerEmail, checkout
             '--solidgate-checkout-theme-color': presentation.themeColor,
         }
         : undefined;
+    const recoveryActions = (_jsxs(_Fragment, { children: [view.canResumeVerification ? (_jsx("button", { type: 'button', onClick: () => void verifyCanonicalStatus(), className: 'solidgate-checkout-action solidgate-checkout-action--spaced', children: copy.resumeVerification })) : null, (view.state === 'recoverable_error' || view.state === 'expired') && !view.canResumeVerification ? (_jsx("button", { type: 'button', onClick: onRetry || (() => {
+                    preparedRequestRef.current = null;
+                    setRetryRequest({
+                        originalKey: idempotencyKey,
+                        key: crypto.randomUUID(),
+                    });
+                }), className: 'solidgate-checkout-action solidgate-checkout-action--spaced', children: copy.retry })) : null] }));
+    const paymentForm = view.checkout ? (_jsx(SolidgatePaymentForm, { walletOnly: layout === 'wallet', secureLabel: presentation === null || presentation === void 0 ? void 0 : presentation.secureLabel, cardLabel: presentation === null || presentation === void 0 ? void 0 : presentation.cardLabel, paymentMethodLabel: presentation === null || presentation === void 0 ? void 0 : presentation.paymentMethodLabel, buttonColor: (presentation === null || presentation === void 0 ? void 0 : presentation.buttonColor) || '#3f51b5', cardSubmitLabel: (presentation === null || presentation === void 0 ? void 0 : presentation.cardSubmitLabel) || 'Pay securely', checkout: view.checkout, hidden: !showForm, loadingLabel: copy.loading, onMounted: () => {
+            var _a;
+            setMountedPaymentAttemptId(((_a = view.checkout) === null || _a === void 0 ? void 0 : _a.attemptId) || null);
+        }, onSubmit: () => {
+            var _a, _b, _c;
+            if (paymentInfoAttemptRef.current !== ((_a = view.checkout) === null || _a === void 0 ? void 0 : _a.attemptId)) {
+                paymentInfoAttemptRef.current = ((_b = view.checkout) === null || _b === void 0 ? void 0 : _b.attemptId) || null;
+                void trackSolidgateCheckoutEvent('add_payment_info', ((_c = view.checkout) === null || _c === void 0 ? void 0 : _c.attemptId) || '', checkoutAnalyticsRef.current);
+            }
+            setState(Object.assign(Object.assign({}, view), { state: 'submitting' }));
+        }, onVerify: () => void verifyCanonicalStatus(), onError: () => {
+            var _a, _b;
+            setState(Object.assign(Object.assign({}, view), { state: 'recoverable_error', canResumeVerification: false }));
+            trackFailure(copyRef.current.error, 'payment_form', (_a = view.checkout) === null || _a === void 0 ? void 0 : _a.attemptId);
+            (_b = onErrorRef.current) === null || _b === void 0 ? void 0 : _b.call(onErrorRef, copyRef.current.error);
+        } }, view.checkout.attemptId)) : null;
+    if (layout === 'wallet') {
+        return (_jsxs("div", { className: 'solidgate-inline-wallet', onClick: (event) => {
+                var _a;
+                const attemptId = (_a = view.checkout) === null || _a === void 0 ? void 0 : _a.attemptId;
+                if (attemptId && startedAttemptRef.current !== attemptId
+                    && event.target instanceof Element && event.target.closest('[data-solidgate-wallet]')) {
+                    startedAttemptRef.current = attemptId;
+                    void trackSolidgateCheckoutEvent('checkout_started', attemptId, checkoutAnalyticsRef.current);
+                }
+            }, children: [paymentForm, statusMessage && !showPreparingLoader ? _jsx("p", { role: 'status', children: statusMessage }) : null, recoveryActions, _jsx("style", { children: solidgateCheckoutDialogStyles })] }));
+    }
     return (_jsxs(_Fragment, { children: [_jsxs("div", { className: `solidgate-checkout-overlay${presentation ? ' is-branded' : ''}`, style: presentationStyle, children: [showPreparingLoader ? (_jsxs("div", { className: 'solidgate-checkout-loader', role: 'status', "aria-live": 'polite', children: [_jsx("span", { className: 'solidgate-checkout-spinner', "aria-hidden": 'true' }), _jsx("span", { className: 'solidgate-checkout-visually-hidden', children: copy.loading })] })) : null, view.state !== 'loading' || view.checkout ? (_jsxs("div", { role: 'dialog', "aria-modal": 'true', "aria-hidden": showPreparingLoader || undefined, "aria-labelledby": 'solidgate-checkout-title', "data-checkout-state": view.state, className: [
                             'solidgate-checkout-dialog',
                             showPreparingLoader ? 'is-preparing' : '',
@@ -386,26 +428,5 @@ export function SolidgateCheckoutDialog({ open, request, customerEmail, checkout
                         ].filter(Boolean).join(' '), children: [_jsxs("div", { className: 'solidgate-checkout-header', children: [_jsx("button", { ref: closeButtonRef, type: 'button', onClick: handleClose, "aria-label": copy.closeAriaLabel, className: 'solidgate-checkout-close', children: _jsx("span", { "aria-hidden": 'true' }) }), _jsx("h2", { id: 'solidgate-checkout-title', className: 'solidgate-checkout-title', children: (presentation === null || presentation === void 0 ? void 0 : presentation.title) || copy.title })] }), presentation ? _jsx(SolidgateCheckoutSummary, { presentation: presentation }) : null, view.state === 'collecting_email' ? (_jsxs("form", { className: 'solidgate-checkout-email-form', onSubmit: (event) => void commitCustomerEmail(event), children: [_jsxs("label", { className: 'solidgate-checkout-email-label', children: [copy.customerEmailLabel, _jsx("input", { type: 'email', autoComplete: 'email', inputMode: 'email', maxLength: 320, required: true, value: emailInput, onChange: (event) => {
                                                     setEmailInput(event.target.value);
                                                     setEmailError(null);
-                                                }, placeholder: copy.customerEmailPlaceholder, "aria-invalid": Boolean(emailError), className: 'solidgate-checkout-email-input' })] }), emailError ? (_jsx("p", { role: 'alert', className: 'solidgate-checkout-alert', children: emailError })) : null, _jsx("button", { type: 'submit', disabled: emailSubmitting, className: 'solidgate-checkout-action', children: copy.customerEmailContinue })] })) : null, view.checkout ? (_jsx(SolidgatePaymentForm, { buttonColor: (presentation === null || presentation === void 0 ? void 0 : presentation.buttonColor) || '#3f51b5', cardSubmitLabel: (presentation === null || presentation === void 0 ? void 0 : presentation.cardSubmitLabel) || 'Pay securely', checkout: view.checkout, hidden: !showForm, loadingLabel: copy.loading, onMounted: () => {
-                                    var _a;
-                                    setMountedPaymentAttemptId(((_a = view.checkout) === null || _a === void 0 ? void 0 : _a.attemptId) || null);
-                                }, onSubmit: () => {
-                                    var _a, _b, _c;
-                                    if (paymentInfoAttemptRef.current !== ((_a = view.checkout) === null || _a === void 0 ? void 0 : _a.attemptId)) {
-                                        paymentInfoAttemptRef.current = ((_b = view.checkout) === null || _b === void 0 ? void 0 : _b.attemptId) || null;
-                                        void trackSolidgateCheckoutEvent('add_payment_info', ((_c = view.checkout) === null || _c === void 0 ? void 0 : _c.attemptId) || '', checkoutAnalyticsRef.current);
-                                    }
-                                    setState(Object.assign(Object.assign({}, view), { state: 'submitting' }));
-                                }, onVerify: () => void verifyCanonicalStatus(), onError: () => {
-                                    var _a, _b;
-                                    setState(Object.assign(Object.assign({}, view), { state: 'recoverable_error', canResumeVerification: false }));
-                                    trackFailure(copyRef.current.error, 'payment_form', (_a = view.checkout) === null || _a === void 0 ? void 0 : _a.attemptId);
-                                    (_b = onErrorRef.current) === null || _b === void 0 ? void 0 : _b.call(onErrorRef, copyRef.current.error);
-                                } }, view.checkout.attemptId)) : null, presentation && view.checkout && showForm ? (_jsx("p", { className: 'solidgate-checkout-secure', children: presentation.secureLabel })) : null, statusMessage && view.state !== 'ready' ? (_jsx("div", { className: 'solidgate-checkout-status', children: _jsx("p", { role: 'status', "aria-live": 'polite', children: statusMessage }) })) : null, view.canResumeVerification ? (_jsx("button", { type: 'button', onClick: () => void verifyCanonicalStatus(), className: 'solidgate-checkout-action solidgate-checkout-action--spaced', children: copy.resumeVerification })) : null, (view.state === 'recoverable_error' || view.state === 'expired') && !view.canResumeVerification ? (_jsx("button", { type: 'button', onClick: onRetry || (() => {
-                                    preparedRequestRef.current = null;
-                                    setRetryRequest({
-                                        originalKey: idempotencyKey,
-                                        key: crypto.randomUUID(),
-                                    });
-                                }), className: 'solidgate-checkout-action solidgate-checkout-action--spaced', children: copy.retry })) : null] })) : null] }), _jsx("style", { children: solidgateCheckoutDialogStyles })] }));
+                                                }, placeholder: copy.customerEmailPlaceholder, "aria-invalid": Boolean(emailError), className: 'solidgate-checkout-email-input' })] }), emailError ? (_jsx("p", { role: 'alert', className: 'solidgate-checkout-alert', children: emailError })) : null, _jsx("button", { type: 'submit', disabled: emailSubmitting, className: 'solidgate-checkout-action', children: copy.customerEmailContinue })] })) : null, paymentForm, statusMessage && view.state !== 'ready' ? (_jsx("div", { className: 'solidgate-checkout-status', children: _jsx("p", { role: 'status', "aria-live": 'polite', children: statusMessage }) })) : null, recoveryActions] })) : null] }), _jsx("style", { children: solidgateCheckoutDialogStyles })] }));
 }

package/dist/providers/solidgate/components/SolidgateCheckoutDialog.styles.d.ts

@@ -1 +1 @@
-export declare const solidgateCheckoutDialogStyles = "\n.solidgate-checkout-overlay {\n  position: fixed;\n  inset: 0;\n  z-index: 100;\n  box-sizing: border-box;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  overflow: hidden;\n  padding: 16px;\n  background: rgb(17 24 39 / 60%);\n  backdrop-filter: blur(4px);\n}\n\n.solidgate-checkout-overlay.is-branded {\n  z-index: 110;\n  align-items: stretch;\n  padding: 0;\n  background: #fff;\n  backdrop-filter: none;\n}\n\n.solidgate-checkout-dialog {\n  box-sizing: border-box;\n  width: min(100%, 512px);\n  max-height: calc(100svh - 32px);\n  overflow-y: auto;\n  border: 1px solid var(--color-border, #d1d5db);\n  border-radius: 16px;\n  background: var(--color-surface, #fff);\n  padding: 20px;\n  color: var(--color-text, #111827);\n  box-shadow: 0 24px 80px rgb(17 24 39 / 22%);\n}\n\n.solidgate-checkout-dialog.is-branded {\n  width: min(100%, 430px);\n  height: 100svh;\n  max-height: 100svh;\n  border: 0;\n  border-radius: 0;\n  background: #fff;\n  padding: 0 17px 28px;\n  color: #303136;\n  box-shadow: none;\n  font-family: Inter, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;\n}\n\n.solidgate-checkout-dialog.is-preparing {\n  position: absolute;\n  opacity: 0;\n  pointer-events: none;\n}\n\n.solidgate-checkout-loader {\n  display: grid;\n  place-items: center;\n}\n\n.solidgate-checkout-spinner {\n  box-sizing: border-box;\n  width: 44px;\n  height: 44px;\n  border: 4px solid var(--color-border, #d1d5db);\n  border-top-color: var(--color-primary, #22c55e);\n  border-radius: 50%;\n  animation: solidgate-checkout-spin 720ms linear infinite;\n}\n\n.solidgate-checkout-visually-hidden {\n  position: absolute;\n  width: 1px;\n  height: 1px;\n  overflow: hidden;\n  clip: rect(0 0 0 0);\n  clip-path: inset(50%);\n  white-space: nowrap;\n}\n\n@keyframes solidgate-checkout-spin {\n  to {\n    transform: rotate(360deg);\n  }\n}\n\n@media (prefers-reduced-motion: reduce) {\n  .solidgate-checkout-spinner {\n    animation-duration: 1.6s;\n  }\n}\n\n.solidgate-checkout-header {\n  position: relative;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  gap: 16px;\n  margin-bottom: 16px;\n}\n\n.solidgate-checkout-dialog.is-branded .solidgate-checkout-header {\n  min-height: 70px;\n  margin: 0 -17px;\n  padding: 0 56px;\n}\n\n.solidgate-checkout-title {\n  margin: 0;\n  color: var(--color-text, #111827);\n  font-size: 18px;\n  font-weight: 600;\n  line-height: 1.3;\n}\n\n.solidgate-checkout-dialog.is-branded .solidgate-checkout-title {\n  color: #020203;\n  font-size: 24px;\n  font-weight: 900;\n  line-height: 1.15;\n  text-align: center;\n}\n\n.solidgate-checkout-close {\n  position: absolute;\n  left: 0;\n  top: 50%;\n  width: 36px;\n  height: 36px;\n  flex: none;\n  border: 1px solid var(--color-border, #d1d5db);\n  border-radius: 8px;\n  background: var(--color-bg, #f9fafb);\n  color: var(--color-text, #111827);\n  font-size: 22px;\n  transform: translateY(-50%);\n  cursor: pointer;\n}\n\n.solidgate-checkout-dialog.is-branded .solidgate-checkout-close {\n  left: 16px;\n  width: 40px;\n  height: 40px;\n  border: 0;\n  border-radius: 999px;\n  background: #f2f2f3;\n  color: #aaa;\n}\n\n.solidgate-checkout-close span,\n.solidgate-checkout-close span::after {\n  position: absolute;\n  left: 50%;\n  top: 50%;\n  width: 22px;\n  height: 3px;\n  border-radius: 999px;\n  background: currentColor;\n  content: '';\n}\n\n.solidgate-checkout-close span {\n  transform: translate(-50%, -50%) rotate(45deg);\n}\n\n.solidgate-checkout-close span::after {\n  transform: translate(-50%, -50%) rotate(90deg);\n}\n\n.solidgate-checkout-close:hover {\n  background: var(--color-accent-soft, #eef2ff);\n}\n\n.solidgate-checkout-summary {\n  color: #303136;\n}\n\n.solidgate-checkout-countdown {\n  min-height: 37px;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  margin: 0;\n  border-radius: 12px;\n  background: color-mix(in srgb, var(--solidgate-checkout-theme-color) 10%, #fff);\n  color: var(--solidgate-checkout-theme-color);\n  font-size: 16px;\n  font-weight: 900;\n  text-align: center;\n}\n\n.solidgate-checkout-satisfaction {\n  margin: 17px 0 21px;\n  color: #2f3034;\n  font-size: 19px;\n  font-weight: 800;\n  line-height: 1.15;\n  text-align: center;\n}\n\n.solidgate-checkout-satisfaction strong {\n  color: var(--solidgate-checkout-theme-color);\n}\n\n.solidgate-checkout-price-stack {\n  display: flex;\n  flex-direction: column;\n  gap: 8px;\n}\n\n.solidgate-checkout-price-row,\n.solidgate-checkout-promo,\n.solidgate-checkout-total {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  gap: 12px;\n}\n\n.solidgate-checkout-price-row {\n  font-size: 17px;\n}\n\n.solidgate-checkout-price-row.is-muted {\n  color: #9d9d9f;\n  font-weight: 500;\n}\n\n.solidgate-checkout-strike {\n  text-decoration: line-through 2px;\n}\n\n.solidgate-checkout-price-row.is-discount {\n  color: #040508;\n  font-weight: 900;\n}\n\n.solidgate-checkout-price-row.is-discount strong:last-child {\n  color: #ff2544;\n}\n\n.solidgate-checkout-promo {\n  min-height: 42px;\n  border-radius: 13px;\n  background: #f0f0f0;\n  padding: 0 14px;\n  color: #8d8d90;\n  font-size: 16px;\n}\n\n.solidgate-checkout-promo strong {\n  color: #050609;\n  font-weight: 900;\n}\n\n.solidgate-checkout-total {\n  min-height: 76px;\n  margin-top: 20px;\n  border-top: 1px solid #dedede;\n  font-size: 23px;\n  font-weight: 800;\n}\n\n.solidgate-checkout-total.is-plain {\n  margin-top: 0;\n}\n\n.solidgate-checkout-total strong {\n  font-size: 25px;\n  font-weight: 900;\n}\n\n.solidgate-checkout-saved {\n  width: fit-content;\n  min-height: 36px;\n  display: flex;\n  align-items: center;\n  gap: 7px;\n  margin: 0 auto 12px;\n  border-radius: 999px;\n  background: #fff3cf;\n  padding: 0 13px;\n  color: #2e3034;\n  font-size: 14px;\n  font-weight: 800;\n}\n\n.solidgate-checkout-email-form,\n.solidgate-checkout-email-label,\n.solidgate-checkout-wallets {\n  display: grid;\n}\n\n.solidgate-checkout-email-form {\n  gap: 16px;\n}\n\n.solidgate-checkout-email-label {\n  gap: 8px;\n  color: var(--color-text, #111827);\n  font-size: 14px;\n  font-weight: 500;\n}\n\n.solidgate-checkout-email-input {\n  box-sizing: border-box;\n  width: 100%;\n  min-height: 44px;\n  border: 1px solid var(--color-border, #d1d5db);\n  border-radius: 8px;\n  background: var(--color-bg, #fff);\n  padding: 8px 12px;\n  color: var(--color-text, #111827);\n  font: inherit;\n}\n\n.solidgate-checkout-email-input::placeholder,\n.solidgate-checkout-status,\n.solidgate-checkout-status-text {\n  color: var(--color-text-muted, #6b7280);\n}\n\n.solidgate-checkout-email-input:focus-visible,\n.solidgate-checkout-close:focus-visible,\n.solidgate-checkout-action:focus-visible {\n  outline: 2px solid var(--color-accent, #3f51b5);\n  outline-offset: 2px;\n}\n\n.solidgate-checkout-alert {\n  margin: 0;\n  color: var(--color-danger, #b91c1c);\n  font-size: 14px;\n}\n\n.solidgate-checkout-action {\n  box-sizing: border-box;\n  width: 100%;\n  min-height: 44px;\n  border: 1px solid var(--color-accent, #3f51b5);\n  border-radius: 8px;\n  background: var(--color-accent, #3f51b5);\n  padding: 8px 16px;\n  color: var(--color-primary-text, #fff);\n  font: inherit;\n  font-weight: 600;\n  cursor: pointer;\n}\n\n.solidgate-checkout-action:disabled {\n  cursor: not-allowed;\n  opacity: 0.6;\n}\n\n.solidgate-checkout-action--spaced {\n  margin-top: 16px;\n}\n\n.solidgate-checkout-wallets {\n  gap: 12px;\n  margin-bottom: 12px;\n}\n\n.solidgate-checkout-dialog.is-branded .solidgate-checkout-wallets {\n  margin-top: 4px;\n}\n\n.solidgate-checkout-dialog.is-branded .solidgate-checkout-wallets > div:not(:empty) {\n  min-height: 48px;\n}\n\n.solidgate-checkout-secure {\n  width: fit-content;\n  margin: 14px auto 0;\n  border-radius: 999px;\n  background: #edfff4;\n  padding: 8px 14px;\n  color: #2b2d31;\n  font-size: 13px;\n  font-weight: 700;\n}\n\n.solidgate-checkout-payment[hidden] {\n  display: none;\n}\n\n.solidgate-checkout-status {\n  margin-top: 12px;\n  border: 1px solid var(--color-border, #d1d5db);\n  border-radius: 12px;\n  background: var(--color-bg, #f9fafb);\n  padding: 16px;\n  font-size: 14px;\n}\n\n.solidgate-checkout-status p,\n.solidgate-checkout-status-text {\n  margin: 0;\n}\n";
+export declare const solidgateCheckoutDialogStyles = "\n.solidgate-checkout-overlay {\n  position: fixed;\n  inset: 0;\n  z-index: 100;\n  box-sizing: border-box;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  overflow: hidden;\n  padding: 16px;\n  background: rgb(17 24 39 / 60%);\n  backdrop-filter: blur(4px);\n}\n\n.solidgate-checkout-overlay.is-branded {\n  z-index: 110;\n  align-items: stretch;\n  padding: 0;\n  background: #fff;\n  backdrop-filter: none;\n}\n\n.solidgate-checkout-dialog {\n  box-sizing: border-box;\n  width: min(100%, 512px);\n  max-height: calc(100svh - 32px);\n  overflow-y: auto;\n  border: 1px solid var(--color-border, #d1d5db);\n  border-radius: 16px;\n  background: var(--color-surface, #fff);\n  padding: 20px;\n  color: var(--color-text, #111827);\n  box-shadow: 0 24px 80px rgb(17 24 39 / 22%);\n}\n\n.solidgate-checkout-dialog.is-branded {\n  width: min(100%, 430px);\n  height: 100svh;\n  max-height: 100svh;\n  border: 0;\n  border-radius: 0;\n  background: #fff;\n  padding: 0 17px 28px;\n  color: #303136;\n  box-shadow: none;\n  font-family: Inter, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;\n}\n\n.solidgate-checkout-dialog.is-preparing {\n  position: absolute;\n  opacity: 0;\n  pointer-events: none;\n}\n\n.solidgate-checkout-loader {\n  display: grid;\n  place-items: center;\n}\n\n.solidgate-checkout-spinner {\n  box-sizing: border-box;\n  width: 44px;\n  height: 44px;\n  border: 4px solid var(--color-border, #d1d5db);\n  border-top-color: var(--color-primary, #22c55e);\n  border-radius: 50%;\n  animation: solidgate-checkout-spin 720ms linear infinite;\n}\n\n.solidgate-checkout-visually-hidden {\n  position: absolute;\n  width: 1px;\n  height: 1px;\n  overflow: hidden;\n  clip: rect(0 0 0 0);\n  clip-path: inset(50%);\n  white-space: nowrap;\n}\n\n@keyframes solidgate-checkout-spin {\n  to {\n    transform: rotate(360deg);\n  }\n}\n\n@media (prefers-reduced-motion: reduce) {\n  .solidgate-checkout-spinner {\n    animation-duration: 1.6s;\n  }\n}\n\n.solidgate-checkout-header {\n  position: relative;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  gap: 16px;\n  margin-bottom: 16px;\n}\n\n.solidgate-checkout-dialog.is-branded .solidgate-checkout-header {\n  min-height: 70px;\n  margin: 0 -17px;\n  padding: 0 56px;\n}\n\n.solidgate-checkout-title {\n  margin: 0;\n  color: var(--color-text, #111827);\n  font-size: 18px;\n  font-weight: 600;\n  line-height: 1.3;\n}\n\n.solidgate-checkout-dialog.is-branded .solidgate-checkout-title {\n  color: #020203;\n  font-size: 24px;\n  font-weight: 900;\n  line-height: 1.15;\n  text-align: center;\n}\n\n.solidgate-checkout-close {\n  position: absolute;\n  left: 0;\n  top: 50%;\n  width: 36px;\n  height: 36px;\n  flex: none;\n  border: 1px solid var(--color-border, #d1d5db);\n  border-radius: 8px;\n  background: var(--color-bg, #f9fafb);\n  color: var(--color-text, #111827);\n  font-size: 22px;\n  transform: translateY(-50%);\n  cursor: pointer;\n}\n\n.solidgate-checkout-dialog.is-branded .solidgate-checkout-close {\n  left: 16px;\n  width: 40px;\n  height: 40px;\n  border: 0;\n  border-radius: 999px;\n  background: #f2f2f3;\n  color: #aaa;\n}\n\n.solidgate-checkout-close span,\n.solidgate-checkout-close span::after {\n  position: absolute;\n  left: 50%;\n  top: 50%;\n  width: 22px;\n  height: 3px;\n  border-radius: 999px;\n  background: currentColor;\n  content: '';\n}\n\n.solidgate-checkout-close span {\n  transform: translate(-50%, -50%) rotate(45deg);\n}\n\n.solidgate-checkout-close span::after {\n  transform: translate(-50%, -50%) rotate(90deg);\n}\n\n.solidgate-checkout-close:hover {\n  background: var(--color-accent-soft, #eef2ff);\n}\n\n.solidgate-checkout-summary {\n  color: #303136;\n}\n\n.solidgate-checkout-countdown {\n  min-height: 37px;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  margin: 0;\n  border-radius: 12px;\n  background: color-mix(in srgb, var(--solidgate-checkout-theme-color) 10%, #fff);\n  color: var(--solidgate-checkout-theme-color);\n  font-size: 16px;\n  font-weight: 900;\n  text-align: center;\n}\n\n.solidgate-checkout-satisfaction {\n  margin: 17px 0 21px;\n  color: #2f3034;\n  font-size: 19px;\n  font-weight: 800;\n  line-height: 1.15;\n  text-align: center;\n}\n\n.solidgate-checkout-satisfaction strong {\n  color: var(--solidgate-checkout-theme-color);\n}\n\n.solidgate-checkout-price-stack {\n  display: flex;\n  flex-direction: column;\n  gap: 8px;\n}\n\n.solidgate-checkout-price-row,\n.solidgate-checkout-promo,\n.solidgate-checkout-total {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  gap: 12px;\n}\n\n.solidgate-checkout-price-row {\n  font-size: 17px;\n}\n\n.solidgate-checkout-price-row.is-muted {\n  color: #9d9d9f;\n  font-weight: 500;\n}\n\n.solidgate-checkout-strike {\n  text-decoration: line-through 2px;\n}\n\n.solidgate-checkout-price-row.is-discount {\n  color: #040508;\n  font-weight: 900;\n}\n\n.solidgate-checkout-price-row.is-discount strong:last-child {\n  color: #ff2544;\n}\n\n.solidgate-checkout-promo {\n  min-height: 42px;\n  border-radius: 13px;\n  background: #f0f0f0;\n  padding: 0 14px;\n  color: #8d8d90;\n  font-size: 16px;\n}\n\n.solidgate-checkout-promo strong {\n  color: #050609;\n  font-weight: 900;\n}\n\n.solidgate-checkout-total {\n  min-height: 76px;\n  margin-top: 20px;\n  border-top: 1px solid #dedede;\n  font-size: 23px;\n  font-weight: 800;\n}\n\n.solidgate-checkout-total.is-plain {\n  margin-top: 0;\n}\n\n.solidgate-checkout-total strong {\n  font-size: 25px;\n  font-weight: 900;\n}\n\n.solidgate-checkout-total strong {\n  display: inline-flex;\n  align-items: center;\n  gap: 7px;\n}\n.solidgate-checkout-total svg {\n  width: 25px;\n  height: 25px;\n  fill: none;\n  stroke: currentColor;\n  stroke-width: 2;\n  stroke-linejoin: round;\n}\n.solidgate-checkout-saved {\n  width: fit-content;\n  min-height: 36px;\n  box-sizing: border-box;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  gap: 8px;\n  margin: -8px 0 9px auto;\n  border-radius: 12px;\n  background: #ffdce3;\n  padding: 0 14px;\n  color: #ff2544;\n  font-size: 14px;\n  font-weight: 900;\n  line-height: 1.1;\n}\n\n.solidgate-checkout-email-form,\n.solidgate-checkout-email-label,\n.solidgate-checkout-wallets {\n  display: grid;\n}\n\n.solidgate-checkout-email-form {\n  gap: 16px;\n}\n\n.solidgate-checkout-email-label {\n  gap: 8px;\n  color: var(--color-text, #111827);\n  font-size: 14px;\n  font-weight: 500;\n}\n\n.solidgate-checkout-email-input {\n  box-sizing: border-box;\n  width: 100%;\n  min-height: 44px;\n  border: 1px solid var(--color-border, #d1d5db);\n  border-radius: 8px;\n  background: var(--color-bg, #fff);\n  padding: 8px 12px;\n  color: var(--color-text, #111827);\n  font: inherit;\n}\n\n.solidgate-checkout-email-input::placeholder,\n.solidgate-checkout-status,\n.solidgate-checkout-status-text {\n  color: var(--color-text-muted, #6b7280);\n}\n\n.solidgate-checkout-email-input:focus-visible,\n.solidgate-checkout-close:focus-visible,\n.solidgate-checkout-action:focus-visible {\n  outline: 2px solid var(--color-accent, #3f51b5);\n  outline-offset: 2px;\n}\n\n.solidgate-checkout-alert {\n  margin: 0;\n  color: var(--color-danger, #b91c1c);\n  font-size: 14px;\n}\n\n.solidgate-checkout-action {\n  box-sizing: border-box;\n  width: 100%;\n  min-height: 44px;\n  border: 1px solid var(--color-accent, #3f51b5);\n  border-radius: 8px;\n  background: var(--color-accent, #3f51b5);\n  padding: 8px 16px;\n  color: var(--color-primary-text, #fff);\n  font: inherit;\n  font-weight: 600;\n  cursor: pointer;\n}\n\n.solidgate-checkout-action:disabled {\n  cursor: not-allowed;\n  opacity: 0.6;\n}\n\n.solidgate-checkout-action--spaced {\n  margin-top: 16px;\n}\n\n.solidgate-checkout-wallets {\n  gap: 12px;\n}\n.solidgate-checkout-wallets > div:empty,\n.solidgate-checkout-wallets:not(:has(> div:not(:empty))) { display: none; }\n.solidgate-checkout-wallets > div:not(:empty) {\n  width: 100%;\n  height: 54px;\n}\n.solidgate-checkout-wallets apple-pay-button {\n  --apple-pay-button-width: 100%;\n  --apple-pay-button-height: 54px;\n  --apple-pay-button-border-radius: 0;\n  width: 100%;\n  height: 54px;\n}\n.solidgate-checkout-payment.is-branded {\n  display: flex;\n  flex-direction: column;\n  gap: 12px;\n  margin: 0 -17px;\n  padding: 9px 17px 32px;\n  background: #f2f2f3;\n}\n.solidgate-checkout-methods {\n  display: grid;\n  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);\n  gap: 42px;\n}\n.solidgate-checkout-method {\n  min-height: 74px;\n  border: 2px solid #e6e7eb;\n  border-radius: 13px;\n  background: #fff;\n  color: #303136;\n  padding: 9px 8px;\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  justify-content: center;\n  gap: 6px;\n  font: inherit;\n  cursor: pointer;\n}\n.solidgate-checkout-method[aria-selected='true'] { border: 3px solid #050609; }\n.solidgate-checkout-method:focus-visible { outline: 2px solid var(--solidgate-checkout-theme-color, #3f51b5); outline-offset: 2px; }\n.solidgate-checkout-method strong { font-size: 20px; font-weight: 800; line-height: 1.1; }\n.solidgate-checkout-tab-wallet { width: 58px; height: 36px; }\n.solidgate-checkout-tab-brands { display: flex; align-items: center; gap: 4px; }\n.solidgate-checkout-tab-brand { width: 24px; height: 15px; }\n.solidgate-checkout-tab-wallet svg, .solidgate-checkout-tab-brand svg { width: 100%; height: 100%; }\n.solidgate-checkout-secure {\n  min-height: 47px;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  gap: 9px;\n  margin: 0;\n  border-radius: 12px;\n  background: #dcffd0;\n  color: #207733;\n  font-size: 18px;\n  font-weight: 800;\n}\n.solidgate-checkout-secure svg { width: 23px; height: 23px; }\n.solidgate-checkout-payment.is-branded .solidgate-checkout-card { padding: 10px 14px 0; }\n.solidgate-checkout-secure.is-card { width: fit-content; margin: 14px auto 0; padding: 0 14px; }\n.solidgate-sdk-card-container iframe { border: 0; }\n.solidgate-checkout-payment[hidden],\n.solidgate-checkout-wallets[hidden],\n.solidgate-checkout-card[hidden] { display: none; }\n.solidgate-inline-wallet { width: 100%; }\n.solidgate-inline-wallet .solidgate-checkout-wallets:has(> div:not(:empty)) { margin-bottom: 12px; }\n\n.solidgate-checkout-status {\n  margin-top: 12px;\n  border: 1px solid var(--color-border, #d1d5db);\n  border-radius: 12px;\n  background: var(--color-bg, #f9fafb);\n  padding: 16px;\n  font-size: 14px;\n}\n\n.solidgate-checkout-status p,\n.solidgate-checkout-status-text {\n  margin: 0;\n}\n";

package/dist/providers/solidgate/components/SolidgateCheckoutDialog.styles.js

@@ -270,19 +270,35 @@ export const solidgateCheckoutDialogStyles = `
   font-weight: 900;
 }
 
+.solidgate-checkout-total strong {
+  display: inline-flex;
+  align-items: center;
+  gap: 7px;
+}
+.solidgate-checkout-total svg {
+  width: 25px;
+  height: 25px;
+  fill: none;
+  stroke: currentColor;
+  stroke-width: 2;
+  stroke-linejoin: round;
+}
 .solidgate-checkout-saved {
   width: fit-content;
   min-height: 36px;
+  box-sizing: border-box;
   display: flex;
   align-items: center;
-  gap: 7px;
-  margin: 0 auto 12px;
-  border-radius: 999px;
-  background: #fff3cf;
-  padding: 0 13px;
-  color: #2e3034;
+  justify-content: center;
+  gap: 8px;
+  margin: -8px 0 9px auto;
+  border-radius: 12px;
+  background: #ffdce3;
+  padding: 0 14px;
+  color: #ff2544;
   font-size: 14px;
-  font-weight: 800;
+  font-weight: 900;
+  line-height: 1.1;
 }
 
 .solidgate-checkout-email-form,
@@ -358,31 +374,77 @@ export const solidgateCheckoutDialogStyles = `
 
 .solidgate-checkout-wallets {
   gap: 12px;
-  margin-bottom: 12px;
 }
-
-.solidgate-checkout-dialog.is-branded .solidgate-checkout-wallets {
-  margin-top: 4px;
+.solidgate-checkout-wallets > div:empty,
+.solidgate-checkout-wallets:not(:has(> div:not(:empty))) { display: none; }
+.solidgate-checkout-wallets > div:not(:empty) {
+  width: 100%;
+  height: 54px;
 }
-
-.solidgate-checkout-dialog.is-branded .solidgate-checkout-wallets > div:not(:empty) {
-  min-height: 48px;
+.solidgate-checkout-wallets apple-pay-button {
+  --apple-pay-button-width: 100%;
+  --apple-pay-button-height: 54px;
+  --apple-pay-button-border-radius: 0;
+  width: 100%;
+  height: 54px;
 }
-
-.solidgate-checkout-secure {
-  width: fit-content;
-  margin: 14px auto 0;
-  border-radius: 999px;
-  background: #edfff4;
-  padding: 8px 14px;
-  color: #2b2d31;
-  font-size: 13px;
-  font-weight: 700;
+.solidgate-checkout-payment.is-branded {
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+  margin: 0 -17px;
+  padding: 9px 17px 32px;
+  background: #f2f2f3;
 }
-
-.solidgate-checkout-payment[hidden] {
-  display: none;
+.solidgate-checkout-methods {
+  display: grid;
+  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
+  gap: 42px;
+}
+.solidgate-checkout-method {
+  min-height: 74px;
+  border: 2px solid #e6e7eb;
+  border-radius: 13px;
+  background: #fff;
+  color: #303136;
+  padding: 9px 8px;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  gap: 6px;
+  font: inherit;
+  cursor: pointer;
+}
+.solidgate-checkout-method[aria-selected='true'] { border: 3px solid #050609; }
+.solidgate-checkout-method:focus-visible { outline: 2px solid var(--solidgate-checkout-theme-color, #3f51b5); outline-offset: 2px; }
+.solidgate-checkout-method strong { font-size: 20px; font-weight: 800; line-height: 1.1; }
+.solidgate-checkout-tab-wallet { width: 58px; height: 36px; }
+.solidgate-checkout-tab-brands { display: flex; align-items: center; gap: 4px; }
+.solidgate-checkout-tab-brand { width: 24px; height: 15px; }
+.solidgate-checkout-tab-wallet svg, .solidgate-checkout-tab-brand svg { width: 100%; height: 100%; }
+.solidgate-checkout-secure {
+  min-height: 47px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 9px;
+  margin: 0;
+  border-radius: 12px;
+  background: #dcffd0;
+  color: #207733;
+  font-size: 18px;
+  font-weight: 800;
 }
+.solidgate-checkout-secure svg { width: 23px; height: 23px; }
+.solidgate-checkout-payment.is-branded .solidgate-checkout-card { padding: 10px 14px 0; }
+.solidgate-checkout-secure.is-card { width: fit-content; margin: 14px auto 0; padding: 0 14px; }
+.solidgate-sdk-card-container iframe { border: 0; }
+.solidgate-checkout-payment[hidden],
+.solidgate-checkout-wallets[hidden],
+.solidgate-checkout-card[hidden] { display: none; }
+.solidgate-inline-wallet { width: 100%; }
+.solidgate-inline-wallet .solidgate-checkout-wallets:has(> div:not(:empty)) { margin-bottom: 12px; }
 
 .solidgate-checkout-status {
   margin-top: 12px;

package/dist/providers/solidgate/components/SolidgateCheckoutDialog.types.d.ts

@@ -22,6 +22,8 @@ export type SolidgateCheckoutDialogContent = {
 export type SolidgateCheckoutDialogPresentation = {
     buttonColor: string;
     cardSubmitLabel: string;
+    cardLabel?: string;
+    paymentMethodLabel?: string;
     countdownLabel: string;
     discountAmountLabel: string;
     discountLabel: string;
@@ -43,6 +45,8 @@ export type SolidgateCheckoutDialogPresentation = {
 };
 export type SolidgateCheckoutDialogProps = {
     open: boolean;
+    /** Wallet-only paywall placement; mount only one Solidgate surface at a time. */
+    layout?: 'dialog' | 'wallet';
     request: Omit<PrepareSolidgateCheckoutInput, 'signal'>;
     customerEmail?: string | null;
     checkoutAnalytics?: SolidgateCheckoutAnalyticsContext | null;
@@ -54,6 +58,8 @@ export type SolidgateCheckoutDialogProps = {
     onRetry?: () => void;
     onError?: (message: string) => void;
     onPreparationStart?: () => void;
+    /** True while a submitted payment still needs verification (including resumable errors). */
+    onPaymentPendingChange?: (pending: boolean) => void;
     onStateChange?: (state: SolidgateCheckoutDialogState) => void;
 };
 export type SolidgateCheckoutAnalyticsContext = {

package/dist/providers/solidgate/components/SolidgateCheckoutSummary.js

@@ -11,5 +11,5 @@ export function SolidgateCheckoutSummary({ presentation }) {
     const showPromo = Boolean((presentation === null || presentation === void 0 ? void 0 : presentation.promoActive) &&
         presentation.discountPercent > 0 &&
         presentation.promoCode.trim());
-    return (_jsxs("section", { className: 'solidgate-checkout-summary', children: [showPromo ? (_jsxs("p", { className: 'solidgate-checkout-countdown', children: [presentation.discountPercent, "% ", presentation.countdownLabel, ' ', formatCountdown(presentation.remainingSeconds), " min"] })) : null, _jsxs("p", { className: 'solidgate-checkout-satisfaction', children: [_jsx("strong", { children: presentation.satisfactionPercent }), ' ', presentation.satisfactionLabel] }), showPromo ? (_jsxs("div", { className: 'solidgate-checkout-price-stack', children: [_jsxs("div", { className: 'solidgate-checkout-price-row is-muted', children: [_jsx("span", { children: presentation.originalPriceLabel }), _jsx("span", { className: 'solidgate-checkout-strike', children: presentation.originalPriceValue })] }), _jsxs("div", { className: 'solidgate-checkout-price-row is-discount', children: [_jsx("strong", { children: presentation.discountLabel }), _jsx("strong", { children: presentation.discountAmountLabel })] }), _jsxs("div", { className: 'solidgate-checkout-promo', children: [_jsx("span", { children: presentation.promoCodeLabel }), _jsx("strong", { children: presentation.promoCode.trim() })] })] })) : null, _jsxs("div", { className: `solidgate-checkout-total${showPromo ? '' : ' is-plain'}`, children: [_jsx("span", { children: presentation.totalLabel }), _jsx("strong", { children: presentation.totalValue })] }), showPromo ? (_jsxs("p", { className: 'solidgate-checkout-saved', children: [_jsx("span", { "aria-hidden": 'true', children: "\uD83D\uDD25" }), presentation.savedLabel] })) : null] }));
+    return (_jsxs("section", { className: 'solidgate-checkout-summary', children: [showPromo ? (_jsxs("p", { className: 'solidgate-checkout-countdown', children: [presentation.discountPercent, "% ", presentation.countdownLabel, ' ', formatCountdown(presentation.remainingSeconds), " min"] })) : null, _jsxs("p", { className: 'solidgate-checkout-satisfaction', children: [_jsx("strong", { children: presentation.satisfactionPercent }), ' ', presentation.satisfactionLabel] }), showPromo ? (_jsxs("div", { className: 'solidgate-checkout-price-stack', children: [_jsxs("div", { className: 'solidgate-checkout-price-row is-muted', children: [_jsx("span", { children: presentation.originalPriceLabel }), _jsx("span", { className: 'solidgate-checkout-strike', children: presentation.originalPriceValue })] }), _jsxs("div", { className: 'solidgate-checkout-price-row is-discount', children: [_jsx("strong", { children: presentation.discountLabel }), _jsx("strong", { children: presentation.discountAmountLabel })] }), _jsxs("div", { className: 'solidgate-checkout-promo', children: [_jsx("span", { children: presentation.promoCodeLabel }), _jsx("strong", { children: presentation.promoCode.trim() })] })] })) : null, _jsxs("div", { className: `solidgate-checkout-total${showPromo ? '' : ' is-plain'}`, children: [_jsx("span", { children: presentation.totalLabel }), _jsxs("strong", { children: [_jsxs("svg", { viewBox: '0 0 24 24', "aria-hidden": 'true', children: [_jsx("path", { d: 'M20 13 11 22 2 13V2h11l9 9-2 2Z' }), _jsx("circle", { cx: '7', cy: '7', r: '1' })] }), presentation.totalValue] })] }), showPromo ? (_jsxs("p", { className: 'solidgate-checkout-saved', children: [_jsx("span", { "aria-hidden": 'true', children: "\uD83D\uDD25" }), presentation.savedLabel] })) : null] }));
 }

package/dist/providers/solidgate/components/SolidgatePaymentForm.d.ts

@@ -1,7 +1,11 @@
 import type { SolidgateCheckoutPreparation } from '../services/solidgate.service.js';
-export declare function SolidgatePaymentForm({ buttonColor, cardSubmitLabel, checkout, hidden, loadingLabel, onError, onMounted, onSubmit, onVerify, }: {
+export declare function SolidgatePaymentForm({ buttonColor, walletOnly, cardSubmitLabel, secureLabel, cardLabel, paymentMethodLabel, checkout, hidden, onError, onMounted, onSubmit, onVerify, }: {
     buttonColor: string;
+    walletOnly?: boolean;
     cardSubmitLabel: string;
+    secureLabel?: string;
+    cardLabel?: string;
+    paymentMethodLabel?: string;
     checkout: SolidgateCheckoutPreparation;
     hidden: boolean;
     loadingLabel: string;

package/dist/providers/solidgate/components/SolidgatePaymentForm.js

@@ -1,26 +1,15 @@
 'use client';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { Suspense, lazy, useEffect, useRef } from 'react';
-const SolidgatePayment = lazy(async () => ({
-    default: (await import('@solidgate/react-sdk')).default,
-}));
-const safeDestroyPaymentForm = (instance) => {
-    var _a;
-    try {
-        instance === null || instance === void 0 ? void 0 : instance.unsubscribeAll();
-    }
-    catch (_b) {
-        // The global destroy below is the final cleanup boundary.
-    }
-    try {
-        (_a = window.PaymentFormSdk) === null || _a === void 0 ? void 0 : _a.destroy();
-    }
-    catch (_c) {
-        // Cleanup must stay safe when the remote SDK is partially initialized.
-    }
-};
-export function SolidgatePaymentForm({ buttonColor, cardSubmitLabel, checkout, hidden, loadingLabel, onError, onMounted, onSubmit, onVerify, }) {
-    const instanceRef = useRef(null);
+import { useEffect, useId, useRef, useState } from 'react';
+import { PaymentBrandMark, SecurityLockIcon } from '../../stripe/components/CheckoutBrandAssets.js';
+import { SolidgateSdkPayment } from './SolidgateSdkPayment.js';
+export function SolidgatePaymentForm({ buttonColor, walletOnly = false, cardSubmitLabel, secureLabel, cardLabel = 'Credit card', paymentMethodLabel = 'Payment method', checkout, hidden, onError, onMounted, onSubmit, onVerify, }) {
+    const panelId = useId();
+    const [wallets, setWallets] = useState([]);
+    const [selectedMethod, setSelectedMethod] = useState('wallet');
+    const showTabs = !walletOnly && Boolean(secureLabel) && wallets.length > 0;
+    const showWallet = walletOnly || !showTabs || selectedMethod === 'wallet';
+    const showCard = !walletOnly && (!showTabs || selectedMethod === 'card');
     const submittedRef = useRef(false);
     const paymentBoundaryRef = useRef(null);
     const mountedReportedRef = useRef(false);
@@ -37,6 +26,12 @@ export function SolidgatePaymentForm({ buttonColor, cardSubmitLabel, checkout, h
             return;
         }
         const reportIframeMounted = () => {
+            var _a, _b;
+            const available = [
+                ((_a = applePayContainerRef.current) === null || _a === void 0 ? void 0 : _a.querySelector('apple-pay-button')) ? 'Apple Pay' : null,
+                ((_b = googlePayContainerRef.current) === null || _b === void 0 ? void 0 : _b.querySelector('button')) ? 'Google Pay' : null,
+            ].filter((method) => Boolean(method));
+            setWallets((previous) => previous.join() === available.join() ? previous : available);
             if (!mountedReportedRef.current
                 && boundary.querySelector('iframe#solid-payment-form-iframe, iframe[name="solid-payment-form-iframe"]')) {
                 mountedReportedRef.current = true;
@@ -48,34 +43,19 @@ export function SolidgatePaymentForm({ buttonColor, cardSubmitLabel, checkout, h
         observer.observe(boundary, { childList: true, subtree: true });
         return () => observer.disconnect();
     }, [checkout.attemptId]);
-    useEffect(() => {
-        submittedRef.current = false;
-        return () => {
-            safeDestroyPaymentForm(instanceRef.current);
-            instanceRef.current = null;
-        };
-    }, [checkout.attemptId]);
     const walletButtonType = checkout.display.billingInterval ? 'subscribe' : 'buy';
-    return (_jsxs("div", { ref: paymentBoundaryRef, className: 'solidgate-checkout-payment', "data-solidgate-attempt-id": checkout.attemptId, hidden: hidden, "aria-hidden": hidden || undefined, children: [_jsxs("div", { className: 'solidgate-checkout-wallets', children: [_jsx("div", { ref: applePayContainerRef, "data-solidgate-wallet": 'apple-pay' }), _jsx("div", { ref: googlePayContainerRef, "data-solidgate-wallet": 'google-pay' })] }), _jsx(Suspense, { fallback: (_jsx("p", { role: 'status', className: 'solidgate-checkout-status-text', children: loadingLabel })), children: _jsx(SolidgatePayment, { merchantData: checkout.initialization.merchantData, width: '100%', formParams: {
-                        autoFocus: false,
-                        isSolidLogoVisible: true,
-                        submitButtonText: cardSubmitLabel,
-                    }, styles: {
+    return (_jsxs("div", { ref: paymentBoundaryRef, className: `solidgate-checkout-payment${secureLabel && !walletOnly ? ' is-branded' : ''}`, "data-solidgate-attempt-id": checkout.attemptId, hidden: hidden, "aria-hidden": hidden || undefined, children: [showTabs ? (_jsxs("div", { className: 'solidgate-checkout-methods', role: 'tablist', "aria-label": paymentMethodLabel, children: [_jsx("button", { type: 'button', role: 'tab', id: `${panelId}-wallet-tab`, "aria-label": wallets.join(' / '), "aria-selected": selectedMethod === 'wallet', "aria-controls": `${panelId}-wallet`, className: 'solidgate-checkout-method', onClick: () => setSelectedMethod('wallet'), children: wallets.map((label) => _jsx(PaymentBrandMark, { label: label, className: 'solidgate-checkout-tab-wallet' }, label)) }), _jsxs("button", { type: 'button', role: 'tab', id: `${panelId}-card-tab`, "aria-selected": selectedMethod === 'card', "aria-controls": `${panelId}-card`, className: 'solidgate-checkout-method', onClick: () => setSelectedMethod('card'), children: [_jsx("strong", { children: cardLabel }), _jsx("span", { className: 'solidgate-checkout-tab-brands', "aria-hidden": 'true', children: ['Visa', 'Mastercard', 'Maestro', 'Discover'].map((label) => (_jsx(PaymentBrandMark, { label: label, className: 'solidgate-checkout-tab-brand' }, label))) })] })] })) : null, !walletOnly && secureLabel && wallets.length > 0 && showWallet ? (_jsxs("p", { className: 'solidgate-checkout-secure', children: [_jsx(SecurityLockIcon, {}), secureLabel] })) : null, _jsxs("div", { className: 'solidgate-checkout-wallets', id: `${panelId}-wallet`, role: showTabs ? 'tabpanel' : undefined, "aria-labelledby": showTabs ? `${panelId}-wallet-tab` : undefined, hidden: !showWallet, children: [_jsx("div", { ref: applePayContainerRef, "data-solidgate-wallet": 'apple-pay' }), _jsx("div", { ref: googlePayContainerRef, "data-solidgate-wallet": 'google-pay' })] }), _jsx("div", { className: 'solidgate-checkout-card', id: `${panelId}-card`, role: showTabs ? 'tabpanel' : undefined, "aria-labelledby": showTabs ? `${panelId}-card-tab` : undefined, hidden: !showCard, children: _jsx(SolidgateSdkPayment, { onInitializationError: onError, merchantData: checkout.initialization.merchantData, width: '100%', formParams: Object.assign({ autoFocus: false, enabled: !walletOnly, isSolidLogoVisible: true, submitButtonText: cardSubmitLabel }, (secureLabel ? { cardNumberLabel: 'Card number', cardExpiryDateLabel: 'Expiration date', cardCvvLabel: 'Security code' } : {})), styles: {
                         form_body: {
                             'font-family': 'Inter, Arial, sans-serif',
                         },
-                        input_group: {
-                            input: {
-                                'border-color': '#d8d9dd',
-                                'border-radius': '10px',
-                            },
-                        },
+                        input_group: Object.assign({ input: Object.assign({ 'border-color': '#d8d9dd', 'border-radius': secureLabel ? '0' : '10px' }, (secureLabel ? { 'background-color': '#fff', 'font-size': '16px', height: '50px' } : {})) }, (secureLabel ? { '.label': { 'font-size': '14px', 'font-weight': '400', color: '#303136' } } : {})),
                         submit_button: {
                             'background-color': buttonColor,
                             'border-radius': '10px',
-                            'font-size': '16px',
+                            'font-size': secureLabel ? '21px' : '16px',
                             'font-weight': '800',
-                            height: '52px',
+                            height: secureLabel ? '60px' : '52px',
+                            'text-transform': 'none',
                         },
                     }, applePayButtonParams: {
                         color: 'black',
@@ -86,17 +66,7 @@ export function SolidgatePaymentForm({ buttonColor, cardSubmitLabel, checkout, h
                         color: 'black',
                         enabled: true,
                         type: walletButtonType,
-                    }, applePayContainerRef: applePayContainerRef, googlePayContainerRef: googlePayContainerRef, onReadyPaymentInstance: (instance) => {
-                        if (instanceRef.current && instanceRef.current !== instance) {
-                            try {
-                                instanceRef.current.unsubscribeAll();
-                            }
-                            catch (_a) {
-                                // The active instance remains usable even if stale-listener cleanup fails.
-                            }
-                        }
-                        instanceRef.current = instance;
-                    }, onMounted: () => {
+                    }, applePayContainerRef: applePayContainerRef, googlePayContainerRef: googlePayContainerRef, onMounted: () => {
                         if (!mountedReportedRef.current) {
                             mountedReportedRef.current = true;
                             onMountedRef.current();
@@ -110,5 +80,5 @@ export function SolidgatePaymentForm({ buttonColor, cardSubmitLabel, checkout, h
                             return;
                         }
                         onError();
-                    } }, checkout.attemptId) })] }));
+                    } }, checkout.attemptId) }), !walletOnly && secureLabel && (wallets.length === 0 || !showWallet) ? (_jsxs("p", { className: 'solidgate-checkout-secure is-card', children: [_jsx(SecurityLockIcon, {}), secureLabel] })) : null] }));
 }

package/dist/providers/solidgate/components/SolidgateSdkPayment.d.ts

@@ -0,0 +1,8 @@
+import type Payment from '@solidgate/react-sdk';
+import { type ComponentProps } from 'react';
+type Props = ComponentProps<typeof Payment> & {
+    onInitializationError: () => void;
+};
+/** Own container IDs and cancel pending initialization when a placement goes away. */
+export declare function SolidgateSdkPayment(props: Props): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/providers/solidgate/components/SolidgateSdkPayment.js

@@ -0,0 +1,66 @@
+'use client';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useEffect, useId, useRef } from 'react';
+let activeOwner = null;
+/** Own container IDs and cancel pending initialization when a placement goes away. */
+export function SolidgateSdkPayment(props) {
+    const id = `solidgate-${useId().replace(/[^a-zA-Z0-9]/g, '')}`;
+    const initialProps = useRef(props);
+    const callbacks = useRef(props);
+    useEffect(() => { callbacks.current = props; });
+    useEffect(() => {
+        var _a, _b;
+        let active = true;
+        let client = null;
+        let instance = null;
+        const owner = Symbol(id);
+        const config = initialProps.current;
+        const apple = (_a = config.applePayContainerRef) === null || _a === void 0 ? void 0 : _a.current;
+        const google = (_b = config.googlePayContainerRef) === null || _b === void 0 ? void 0 : _b.current;
+        if (apple)
+            apple.id = `${id}-apple`;
+        if (google)
+            google.id = `${id}-google`;
+        void import('@solidgate/react-sdk').then(async (sdk) => {
+            var _a, _b;
+            const loaded = await sdk.SdkLoader.load();
+            if (!active || !loaded)
+                return;
+            client = loaded;
+            activeOwner = owner;
+            instance = client.init({
+                merchantData: config.merchantData,
+                iframeParams: { containerId: id, width: config.width || '100%' },
+                formParams: config.formParams,
+                styles: config.styles,
+                applePayButtonParams: Object.assign(Object.assign({}, config.applePayButtonParams), { containerId: apple === null || apple === void 0 ? void 0 : apple.id }),
+                googlePayButtonParams: Object.assign(Object.assign({}, config.googlePayButtonParams), { containerId: google === null || google === void 0 ? void 0 : google.id }),
+            });
+            instance.on(sdk.MessageType.Mounted, (event) => { var _a, _b; return (_b = (_a = callbacks.current).onMounted) === null || _b === void 0 ? void 0 : _b.call(_a, event.data); });
+            instance.on(sdk.MessageType.Submit, (event) => { var _a, _b; return (_b = (_a = callbacks.current).onSubmit) === null || _b === void 0 ? void 0 : _b.call(_a, event.data); });
+            instance.on(sdk.MessageType.Verify, (event) => { var _a, _b; return (_b = (_a = callbacks.current).onVerify) === null || _b === void 0 ? void 0 : _b.call(_a, event.data); });
+            instance.on(sdk.MessageType.Success, (event) => { var _a, _b; return (_b = (_a = callbacks.current).onSuccess) === null || _b === void 0 ? void 0 : _b.call(_a, event.data); });
+            instance.on(sdk.MessageType.Fail, (event) => { var _a, _b; return (_b = (_a = callbacks.current).onFail) === null || _b === void 0 ? void 0 : _b.call(_a, event.data); });
+            instance.on(sdk.MessageType.Error, (event) => { var _a, _b; return (_b = (_a = callbacks.current).onError) === null || _b === void 0 ? void 0 : _b.call(_a, event.data); });
+            (_b = (_a = callbacks.current).onReadyPaymentInstance) === null || _b === void 0 ? void 0 : _b.call(_a, instance);
+        }).catch(() => {
+            if (active)
+                callbacks.current.onInitializationError();
+        });
+        return () => {
+            active = false;
+            if (activeOwner !== owner)
+                return;
+            activeOwner = null;
+            try {
+                instance === null || instance === void 0 ? void 0 : instance.unsubscribeAll();
+            }
+            catch ( /* Remote SDK may be partially initialized. */_a) { /* Remote SDK may be partially initialized. */ }
+            try {
+                client === null || client === void 0 ? void 0 : client.destroy();
+            }
+            catch ( /* Cleanup must not interrupt navigation. */_b) { /* Cleanup must not interrupt navigation. */ }
+        };
+    }, [id]);
+    return _jsx("div", { id: id, className: 'solidgate-sdk-card-container' });
+}

package/package.json

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