@funnelsgrove/payments 0.7.14 → 0.7.15
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
|
@@ -18,12 +18,35 @@ export type SolidgateCheckoutDialogContent = {
|
|
|
18
18
|
customerEmailUnavailable: string;
|
|
19
19
|
customerEmailContinue: string;
|
|
20
20
|
};
|
|
21
|
+
export type SolidgateCheckoutDialogPresentation = {
|
|
22
|
+
buttonColor: string;
|
|
23
|
+
cardSubmitLabel: string;
|
|
24
|
+
countdownLabel: string;
|
|
25
|
+
discountAmountLabel: string;
|
|
26
|
+
discountLabel: string;
|
|
27
|
+
discountPercent: number;
|
|
28
|
+
originalPriceLabel: string;
|
|
29
|
+
originalPriceValue: string;
|
|
30
|
+
promoActive: boolean;
|
|
31
|
+
promoCode: string;
|
|
32
|
+
promoCodeLabel: string;
|
|
33
|
+
remainingSeconds: number;
|
|
34
|
+
satisfactionLabel: string;
|
|
35
|
+
satisfactionPercent: string;
|
|
36
|
+
savedLabel: string;
|
|
37
|
+
secureLabel: string;
|
|
38
|
+
themeColor: string;
|
|
39
|
+
title: string;
|
|
40
|
+
totalLabel: string;
|
|
41
|
+
totalValue: string;
|
|
42
|
+
};
|
|
21
43
|
export type SolidgateCheckoutDialogProps = {
|
|
22
44
|
open: boolean;
|
|
23
45
|
request: Omit<PrepareSolidgateCheckoutInput, 'signal'>;
|
|
24
46
|
customerEmail?: string | null;
|
|
25
47
|
checkoutAnalytics?: SolidgateCheckoutAnalyticsContext | null;
|
|
26
48
|
content?: Partial<SolidgateCheckoutDialogContent>;
|
|
49
|
+
presentation?: SolidgateCheckoutDialogPresentation;
|
|
27
50
|
onClose: () => void;
|
|
28
51
|
onCustomerEmailCommit?: (email: string) => Promise<string>;
|
|
29
52
|
onSuccess?: (checkout: SolidgateCheckoutPreparation) => void | Promise<void>;
|
|
@@ -41,4 +64,4 @@ export type SolidgateCheckoutAnalyticsContext = {
|
|
|
41
64
|
stepType: Extract<FunnelStepType, 'checkout' | 'paywall_offer' | 'upsell_offer'>;
|
|
42
65
|
stepContractVersion: number;
|
|
43
66
|
};
|
|
44
|
-
export declare function SolidgateCheckoutDialog({ open, request, customerEmail, checkoutAnalytics, content, onClose, onCustomerEmailCommit, onSuccess, onRetry, onError, onStateChange, }: SolidgateCheckoutDialogProps): import("react/jsx-runtime").JSX.Element | null;
|
|
67
|
+
export declare function SolidgateCheckoutDialog({ open, request, customerEmail, checkoutAnalytics, content, presentation, onClose, onCustomerEmailCommit, onSuccess, onRetry, onError, onStateChange, }: SolidgateCheckoutDialogProps): import("react/jsx-runtime").JSX.Element | null;
|
|
@@ -34,6 +34,14 @@ const initialView = {
|
|
|
34
34
|
checkout: null,
|
|
35
35
|
canResumeVerification: false,
|
|
36
36
|
};
|
|
37
|
+
const formatCountdown = (remainingSeconds) => {
|
|
38
|
+
const normalizedSeconds = Number.isFinite(remainingSeconds)
|
|
39
|
+
? Math.max(0, Math.floor(remainingSeconds))
|
|
40
|
+
: 0;
|
|
41
|
+
const minutes = Math.floor(normalizedSeconds / 60);
|
|
42
|
+
const seconds = normalizedSeconds % 60;
|
|
43
|
+
return `${String(minutes).padStart(2, '0')}:${String(seconds).padStart(2, '0')}`;
|
|
44
|
+
};
|
|
37
45
|
const trackSolidgateCheckoutEvent = async (eventName, attemptId, context) => {
|
|
38
46
|
var _a;
|
|
39
47
|
if (!context) {
|
|
@@ -76,7 +84,7 @@ const safeDestroyPaymentForm = (instance) => {
|
|
|
76
84
|
// Cleanup must stay safe when the remote SDK is partially initialized.
|
|
77
85
|
}
|
|
78
86
|
};
|
|
79
|
-
function SolidgatePaymentForm({ checkout, hidden, loadingLabel, onError, onMounted, onSubmit, onVerify, }) {
|
|
87
|
+
function SolidgatePaymentForm({ buttonColor, cardSubmitLabel, checkout, hidden, loadingLabel, onError, onMounted, onSubmit, onVerify, }) {
|
|
80
88
|
const instanceRef = useRef(null);
|
|
81
89
|
const applePayContainerRef = useRef(null);
|
|
82
90
|
const googlePayContainerRef = useRef(null);
|
|
@@ -84,7 +92,38 @@ function SolidgatePaymentForm({ checkout, hidden, loadingLabel, onError, onMount
|
|
|
84
92
|
safeDestroyPaymentForm(instanceRef.current);
|
|
85
93
|
instanceRef.current = null;
|
|
86
94
|
}, [checkout.attemptId]);
|
|
87
|
-
|
|
95
|
+
const walletButtonType = checkout.display.billingInterval ? 'subscribe' : 'buy';
|
|
96
|
+
return (_jsxs("div", { 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: {
|
|
97
|
+
autoFocus: false,
|
|
98
|
+
isSolidLogoVisible: true,
|
|
99
|
+
submitButtonText: cardSubmitLabel,
|
|
100
|
+
}, styles: {
|
|
101
|
+
form_body: {
|
|
102
|
+
'font-family': 'Inter, Arial, sans-serif',
|
|
103
|
+
},
|
|
104
|
+
input_group: {
|
|
105
|
+
input: {
|
|
106
|
+
'border-color': '#d8d9dd',
|
|
107
|
+
'border-radius': '10px',
|
|
108
|
+
},
|
|
109
|
+
},
|
|
110
|
+
submit_button: {
|
|
111
|
+
'background-color': buttonColor,
|
|
112
|
+
'border-radius': '10px',
|
|
113
|
+
'font-size': '16px',
|
|
114
|
+
'font-weight': '800',
|
|
115
|
+
height: '52px',
|
|
116
|
+
},
|
|
117
|
+
}, applePayButtonParams: {
|
|
118
|
+
color: 'black',
|
|
119
|
+
enabled: true,
|
|
120
|
+
integrationType: 'js',
|
|
121
|
+
type: walletButtonType,
|
|
122
|
+
}, googlePayButtonParams: {
|
|
123
|
+
color: 'black',
|
|
124
|
+
enabled: true,
|
|
125
|
+
type: walletButtonType,
|
|
126
|
+
}, applePayContainerRef: applePayContainerRef, googlePayContainerRef: googlePayContainerRef, onReadyPaymentInstance: (instance) => {
|
|
88
127
|
if (instanceRef.current && instanceRef.current !== instance) {
|
|
89
128
|
try {
|
|
90
129
|
instanceRef.current.unsubscribeAll();
|
|
@@ -96,7 +135,7 @@ function SolidgatePaymentForm({ checkout, hidden, loadingLabel, onError, onMount
|
|
|
96
135
|
instanceRef.current = instance;
|
|
97
136
|
}, onMounted: onMounted, onSubmit: onSubmit, onVerify: onVerify, onSuccess: onVerify, onFail: onVerify, onError: onError }, checkout.attemptId) })] }));
|
|
98
137
|
}
|
|
99
|
-
export function SolidgateCheckoutDialog({ open, request, customerEmail, checkoutAnalytics, content, onClose, onCustomerEmailCommit, onSuccess, onRetry, onError, onStateChange, }) {
|
|
138
|
+
export function SolidgateCheckoutDialog({ open, request, customerEmail, checkoutAnalytics, content, presentation, onClose, onCustomerEmailCommit, onSuccess, onRetry, onError, onStateChange, }) {
|
|
100
139
|
const copy = useMemo(() => (Object.assign(Object.assign({}, defaultContent), content)), [content]);
|
|
101
140
|
const [view, setView] = useState(initialView);
|
|
102
141
|
const normalizedCustomerEmail = normalizeValidEmail(customerEmail);
|
|
@@ -337,10 +376,22 @@ export function SolidgateCheckoutDialog({ open, request, customerEmail, checkout
|
|
|
337
376
|
: view.state === 'recoverable_error'
|
|
338
377
|
? copy.error
|
|
339
378
|
: null;
|
|
340
|
-
|
|
379
|
+
const showPromo = Boolean((presentation === null || presentation === void 0 ? void 0 : presentation.promoActive) &&
|
|
380
|
+
presentation.discountPercent > 0 &&
|
|
381
|
+
presentation.promoCode.trim());
|
|
382
|
+
const presentationStyle = presentation
|
|
383
|
+
? {
|
|
384
|
+
'--solidgate-checkout-theme-color': presentation.themeColor,
|
|
385
|
+
}
|
|
386
|
+
: undefined;
|
|
387
|
+
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: [
|
|
388
|
+
'solidgate-checkout-dialog',
|
|
389
|
+
showPreparingLoader ? 'is-preparing' : '',
|
|
390
|
+
presentation ? 'is-branded' : '',
|
|
391
|
+
].filter(Boolean).join(' '), children: [_jsxs("div", { className: 'solidgate-checkout-header', children: [_jsx("button", { ref: closeButtonRef, type: 'button', onClick: onClose, "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 ? (_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] })) : 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) => {
|
|
341
392
|
setEmailInput(event.target.value);
|
|
342
393
|
setEmailError(null);
|
|
343
|
-
}, 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, { checkout: view.checkout, hidden: !showForm, loadingLabel: copy.loading, onMounted: () => {
|
|
394
|
+
}, 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: () => {
|
|
344
395
|
var _a;
|
|
345
396
|
setMountedPaymentAttemptId(((_a = view.checkout) === null || _a === void 0 ? void 0 : _a.attemptId) || null);
|
|
346
397
|
}, onSubmit: () => {
|
|
@@ -354,7 +405,7 @@ export function SolidgateCheckoutDialog({ open, request, customerEmail, checkout
|
|
|
354
405
|
var _a;
|
|
355
406
|
setState(Object.assign(Object.assign({}, view), { state: 'recoverable_error', canResumeVerification: false }));
|
|
356
407
|
(_a = onErrorRef.current) === null || _a === void 0 ? void 0 : _a.call(onErrorRef, copyRef.current.error);
|
|
357
|
-
} }, view.checkout.attemptId)) : null, statusMessage && view.state !== 'ready' ? (_jsx("div", { className: 'solidgate-checkout-status', children: _jsx("p", { role: 'status', "aria-live": 'polite', children: statusMessage }) })) : null, view.state === 'verifying' && 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') && onRetry ? (_jsx("button", { type: 'button', onClick: onRetry, className: 'solidgate-checkout-action solidgate-checkout-action--spaced', children: copy.retry })) : null] })) : null] }), _jsx("style", { children: solidgateCheckoutDialogStyles })] }));
|
|
408
|
+
} }, 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.state === 'verifying' && 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') && onRetry ? (_jsx("button", { type: 'button', onClick: onRetry, className: 'solidgate-checkout-action solidgate-checkout-action--spaced', children: copy.retry })) : null] })) : null] }), _jsx("style", { children: solidgateCheckoutDialogStyles })] }));
|
|
358
409
|
}
|
|
359
410
|
const solidgateCheckoutDialogStyles = `
|
|
360
411
|
.solidgate-checkout-overlay {
|
|
@@ -371,6 +422,14 @@ const solidgateCheckoutDialogStyles = `
|
|
|
371
422
|
backdrop-filter: blur(4px);
|
|
372
423
|
}
|
|
373
424
|
|
|
425
|
+
.solidgate-checkout-overlay.is-branded {
|
|
426
|
+
z-index: 110;
|
|
427
|
+
align-items: stretch;
|
|
428
|
+
padding: 0;
|
|
429
|
+
background: #fff;
|
|
430
|
+
backdrop-filter: none;
|
|
431
|
+
}
|
|
432
|
+
|
|
374
433
|
.solidgate-checkout-dialog {
|
|
375
434
|
box-sizing: border-box;
|
|
376
435
|
width: min(100%, 512px);
|
|
@@ -384,6 +443,19 @@ const solidgateCheckoutDialogStyles = `
|
|
|
384
443
|
box-shadow: 0 24px 80px rgb(17 24 39 / 22%);
|
|
385
444
|
}
|
|
386
445
|
|
|
446
|
+
.solidgate-checkout-dialog.is-branded {
|
|
447
|
+
width: min(100%, 430px);
|
|
448
|
+
height: 100svh;
|
|
449
|
+
max-height: 100svh;
|
|
450
|
+
border: 0;
|
|
451
|
+
border-radius: 0;
|
|
452
|
+
background: #fff;
|
|
453
|
+
padding: 0 17px 28px;
|
|
454
|
+
color: #303136;
|
|
455
|
+
box-shadow: none;
|
|
456
|
+
font-family: Inter, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
|
|
457
|
+
}
|
|
458
|
+
|
|
387
459
|
.solidgate-checkout-dialog.is-preparing {
|
|
388
460
|
position: absolute;
|
|
389
461
|
visibility: hidden;
|
|
@@ -428,13 +500,20 @@ const solidgateCheckoutDialogStyles = `
|
|
|
428
500
|
}
|
|
429
501
|
|
|
430
502
|
.solidgate-checkout-header {
|
|
503
|
+
position: relative;
|
|
431
504
|
display: flex;
|
|
432
505
|
align-items: center;
|
|
433
|
-
justify-content:
|
|
506
|
+
justify-content: center;
|
|
434
507
|
gap: 16px;
|
|
435
508
|
margin-bottom: 16px;
|
|
436
509
|
}
|
|
437
510
|
|
|
511
|
+
.solidgate-checkout-dialog.is-branded .solidgate-checkout-header {
|
|
512
|
+
min-height: 70px;
|
|
513
|
+
margin: 0 -17px;
|
|
514
|
+
padding: 0 56px;
|
|
515
|
+
}
|
|
516
|
+
|
|
438
517
|
.solidgate-checkout-title {
|
|
439
518
|
margin: 0;
|
|
440
519
|
color: var(--color-text, #111827);
|
|
@@ -443,7 +522,18 @@ const solidgateCheckoutDialogStyles = `
|
|
|
443
522
|
line-height: 1.3;
|
|
444
523
|
}
|
|
445
524
|
|
|
525
|
+
.solidgate-checkout-dialog.is-branded .solidgate-checkout-title {
|
|
526
|
+
color: #020203;
|
|
527
|
+
font-size: 24px;
|
|
528
|
+
font-weight: 900;
|
|
529
|
+
line-height: 1.15;
|
|
530
|
+
text-align: center;
|
|
531
|
+
}
|
|
532
|
+
|
|
446
533
|
.solidgate-checkout-close {
|
|
534
|
+
position: absolute;
|
|
535
|
+
left: 0;
|
|
536
|
+
top: 50%;
|
|
447
537
|
width: 36px;
|
|
448
538
|
height: 36px;
|
|
449
539
|
flex: none;
|
|
@@ -452,14 +542,158 @@ const solidgateCheckoutDialogStyles = `
|
|
|
452
542
|
background: var(--color-bg, #f9fafb);
|
|
453
543
|
color: var(--color-text, #111827);
|
|
454
544
|
font-size: 22px;
|
|
455
|
-
|
|
545
|
+
transform: translateY(-50%);
|
|
456
546
|
cursor: pointer;
|
|
457
547
|
}
|
|
458
548
|
|
|
549
|
+
.solidgate-checkout-dialog.is-branded .solidgate-checkout-close {
|
|
550
|
+
left: 16px;
|
|
551
|
+
width: 40px;
|
|
552
|
+
height: 40px;
|
|
553
|
+
border: 0;
|
|
554
|
+
border-radius: 999px;
|
|
555
|
+
background: #f2f2f3;
|
|
556
|
+
color: #aaa;
|
|
557
|
+
}
|
|
558
|
+
|
|
559
|
+
.solidgate-checkout-close span,
|
|
560
|
+
.solidgate-checkout-close span::after {
|
|
561
|
+
position: absolute;
|
|
562
|
+
left: 50%;
|
|
563
|
+
top: 50%;
|
|
564
|
+
width: 22px;
|
|
565
|
+
height: 3px;
|
|
566
|
+
border-radius: 999px;
|
|
567
|
+
background: currentColor;
|
|
568
|
+
content: '';
|
|
569
|
+
}
|
|
570
|
+
|
|
571
|
+
.solidgate-checkout-close span {
|
|
572
|
+
transform: translate(-50%, -50%) rotate(45deg);
|
|
573
|
+
}
|
|
574
|
+
|
|
575
|
+
.solidgate-checkout-close span::after {
|
|
576
|
+
transform: translate(-50%, -50%) rotate(90deg);
|
|
577
|
+
}
|
|
578
|
+
|
|
459
579
|
.solidgate-checkout-close:hover {
|
|
460
580
|
background: var(--color-accent-soft, #eef2ff);
|
|
461
581
|
}
|
|
462
582
|
|
|
583
|
+
.solidgate-checkout-summary {
|
|
584
|
+
color: #303136;
|
|
585
|
+
}
|
|
586
|
+
|
|
587
|
+
.solidgate-checkout-countdown {
|
|
588
|
+
min-height: 37px;
|
|
589
|
+
display: flex;
|
|
590
|
+
align-items: center;
|
|
591
|
+
justify-content: center;
|
|
592
|
+
margin: 0;
|
|
593
|
+
border-radius: 12px;
|
|
594
|
+
background: color-mix(in srgb, var(--solidgate-checkout-theme-color) 10%, #fff);
|
|
595
|
+
color: var(--solidgate-checkout-theme-color);
|
|
596
|
+
font-size: 16px;
|
|
597
|
+
font-weight: 900;
|
|
598
|
+
text-align: center;
|
|
599
|
+
}
|
|
600
|
+
|
|
601
|
+
.solidgate-checkout-satisfaction {
|
|
602
|
+
margin: 17px 0 21px;
|
|
603
|
+
color: #2f3034;
|
|
604
|
+
font-size: 19px;
|
|
605
|
+
font-weight: 800;
|
|
606
|
+
line-height: 1.15;
|
|
607
|
+
text-align: center;
|
|
608
|
+
}
|
|
609
|
+
|
|
610
|
+
.solidgate-checkout-satisfaction strong {
|
|
611
|
+
color: var(--solidgate-checkout-theme-color);
|
|
612
|
+
}
|
|
613
|
+
|
|
614
|
+
.solidgate-checkout-price-stack {
|
|
615
|
+
display: flex;
|
|
616
|
+
flex-direction: column;
|
|
617
|
+
gap: 8px;
|
|
618
|
+
}
|
|
619
|
+
|
|
620
|
+
.solidgate-checkout-price-row,
|
|
621
|
+
.solidgate-checkout-promo,
|
|
622
|
+
.solidgate-checkout-total {
|
|
623
|
+
display: flex;
|
|
624
|
+
align-items: center;
|
|
625
|
+
justify-content: space-between;
|
|
626
|
+
gap: 12px;
|
|
627
|
+
}
|
|
628
|
+
|
|
629
|
+
.solidgate-checkout-price-row {
|
|
630
|
+
font-size: 17px;
|
|
631
|
+
}
|
|
632
|
+
|
|
633
|
+
.solidgate-checkout-price-row.is-muted {
|
|
634
|
+
color: #9d9d9f;
|
|
635
|
+
font-weight: 500;
|
|
636
|
+
}
|
|
637
|
+
|
|
638
|
+
.solidgate-checkout-strike {
|
|
639
|
+
text-decoration: line-through 2px;
|
|
640
|
+
}
|
|
641
|
+
|
|
642
|
+
.solidgate-checkout-price-row.is-discount {
|
|
643
|
+
color: #040508;
|
|
644
|
+
font-weight: 900;
|
|
645
|
+
}
|
|
646
|
+
|
|
647
|
+
.solidgate-checkout-price-row.is-discount strong:last-child {
|
|
648
|
+
color: #ff2544;
|
|
649
|
+
}
|
|
650
|
+
|
|
651
|
+
.solidgate-checkout-promo {
|
|
652
|
+
min-height: 42px;
|
|
653
|
+
border-radius: 13px;
|
|
654
|
+
background: #f0f0f0;
|
|
655
|
+
padding: 0 14px;
|
|
656
|
+
color: #8d8d90;
|
|
657
|
+
font-size: 16px;
|
|
658
|
+
}
|
|
659
|
+
|
|
660
|
+
.solidgate-checkout-promo strong {
|
|
661
|
+
color: #050609;
|
|
662
|
+
font-weight: 900;
|
|
663
|
+
}
|
|
664
|
+
|
|
665
|
+
.solidgate-checkout-total {
|
|
666
|
+
min-height: 76px;
|
|
667
|
+
margin-top: 20px;
|
|
668
|
+
border-top: 1px solid #dedede;
|
|
669
|
+
font-size: 23px;
|
|
670
|
+
font-weight: 800;
|
|
671
|
+
}
|
|
672
|
+
|
|
673
|
+
.solidgate-checkout-total.is-plain {
|
|
674
|
+
margin-top: 0;
|
|
675
|
+
}
|
|
676
|
+
|
|
677
|
+
.solidgate-checkout-total strong {
|
|
678
|
+
font-size: 25px;
|
|
679
|
+
font-weight: 900;
|
|
680
|
+
}
|
|
681
|
+
|
|
682
|
+
.solidgate-checkout-saved {
|
|
683
|
+
width: fit-content;
|
|
684
|
+
min-height: 36px;
|
|
685
|
+
display: flex;
|
|
686
|
+
align-items: center;
|
|
687
|
+
gap: 7px;
|
|
688
|
+
margin: 0 auto 12px;
|
|
689
|
+
border-radius: 999px;
|
|
690
|
+
background: #fff3cf;
|
|
691
|
+
padding: 0 13px;
|
|
692
|
+
color: #2e3034;
|
|
693
|
+
font-size: 14px;
|
|
694
|
+
font-weight: 800;
|
|
695
|
+
}
|
|
696
|
+
|
|
463
697
|
.solidgate-checkout-email-form,
|
|
464
698
|
.solidgate-checkout-email-label,
|
|
465
699
|
.solidgate-checkout-wallets {
|
|
@@ -536,6 +770,25 @@ const solidgateCheckoutDialogStyles = `
|
|
|
536
770
|
margin-bottom: 12px;
|
|
537
771
|
}
|
|
538
772
|
|
|
773
|
+
.solidgate-checkout-dialog.is-branded .solidgate-checkout-wallets {
|
|
774
|
+
margin-top: 4px;
|
|
775
|
+
}
|
|
776
|
+
|
|
777
|
+
.solidgate-checkout-dialog.is-branded .solidgate-checkout-wallets > div:not(:empty) {
|
|
778
|
+
min-height: 48px;
|
|
779
|
+
}
|
|
780
|
+
|
|
781
|
+
.solidgate-checkout-secure {
|
|
782
|
+
width: fit-content;
|
|
783
|
+
margin: 14px auto 0;
|
|
784
|
+
border-radius: 999px;
|
|
785
|
+
background: #edfff4;
|
|
786
|
+
padding: 8px 14px;
|
|
787
|
+
color: #2b2d31;
|
|
788
|
+
font-size: 13px;
|
|
789
|
+
font-weight: 700;
|
|
790
|
+
}
|
|
791
|
+
|
|
539
792
|
.solidgate-checkout-payment[hidden] {
|
|
540
793
|
display: none;
|
|
541
794
|
}
|