@funnelsgrove/payments 0.1.13 → 0.1.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.
Files changed (3) hide show
  1. package/dist/components/shared/SharedStripeCheckoutV2Dialog.js +67 -55
  2. package/dist/providers/stripe/ApplePaySubscriptionCheckoutSlot.js +1 -3
  3. package/package.json +1 -1
package/dist/components/shared/SharedStripeCheckoutV2Dialog.js CHANGED
@@ -26,27 +26,15 @@ const stripeCheckoutV2Appearance = {
26
26
  colorBackground: '#fff',
27
27
  colorText: '#303136',
28
28
  colorTextPlaceholder: '#8c909a',
29
- focusBoxShadow: 'none',
30
- focusOutline: 'none',
31
29
  gridColumnSpacing: '12px',
32
30
  gridRowSpacing: '14px',
33
31
  spacingUnit: '5px',
34
32
  },
35
33
  rules: {
36
- '.Input': {
37
- backgroundColor: '#fff',
38
- border: '0',
39
- boxShadow: 'none',
34
+ '.Label': {
40
35
  paddingLeft: '14px',
41
36
  paddingRight: '14px',
42
- },
43
- '.Input:focus': {
44
- border: '0',
45
- boxShadow: 'none',
46
- outline: 'none',
47
- },
48
- '.Input--invalid': {
49
- boxShadow: 'none',
37
+ marginBottom: '6px',
50
38
  },
51
39
  },
52
40
  };
@@ -178,12 +166,7 @@ function SharedStripeCheckoutV2Form({ amountCents, buttonColor, cardSubmitLabel,
178
166
  }, 0);
179
167
  return () => window.clearTimeout(resizeTimer);
180
168
  }, [effectiveSelectedMethod]);
181
- const ensureCustomerEmail = async () => {
182
- const normalizedEmail = resolvedCustomerEmail.trim();
183
- if (!normalizedEmail || !isValidEmail(normalizedEmail)) {
184
- setSharedError(customerEmailInvalidMessage);
185
- return null;
186
- }
169
+ const commitCustomerEmail = async (normalizedEmail) => {
187
170
  if (!customerEmailEditable || !onCustomerEmailCommit) {
188
171
  return normalizedEmail;
189
172
  }
@@ -195,6 +178,26 @@ function SharedStripeCheckoutV2Form({ amountCents, buttonColor, cardSubmitLabel,
195
178
  onCustomerEmailChange === null || onCustomerEmailChange === void 0 ? void 0 : onCustomerEmailChange(nextEmail);
196
179
  return nextEmail;
197
180
  };
181
+ const commitEmailDraftIfValid = (value) => {
182
+ const normalizedEmail = value.trim();
183
+ if (!customerEmailEditable || !onCustomerEmailCommit) {
184
+ return;
185
+ }
186
+ if (!normalizedEmail || !isValidEmail(normalizedEmail)) {
187
+ return;
188
+ }
189
+ void commitCustomerEmail(normalizedEmail).catch((commitError) => {
190
+ setSharedError(getFriendlyCardErrorMessage(commitError));
191
+ });
192
+ };
193
+ const ensureCustomerEmail = async () => {
194
+ const normalizedEmail = resolvedCustomerEmail.trim();
195
+ if (!normalizedEmail || !isValidEmail(normalizedEmail)) {
196
+ setSharedError(customerEmailInvalidMessage);
197
+ return null;
198
+ }
199
+ return commitCustomerEmail(normalizedEmail);
200
+ };
198
201
  const handleSubmit = async (event) => {
199
202
  event.preventDefault();
200
203
  if (submitting) {
@@ -243,22 +246,17 @@ function SharedStripeCheckoutV2Form({ amountCents, buttonColor, cardSubmitLabel,
243
246
  showPromo ? '' : 'is-plain',
244
247
  ]
245
248
  .filter(Boolean)
246
- .join(' '), children: [_jsx("span", { children: totalLabel }), _jsxs("strong", { children: [_jsx("svg", { viewBox: '0 0 24 24', "aria-hidden": 'true', children: _jsx("path", { d: 'M20.6 13.4 12.4 21.6a2.2 2.2 0 0 1-3.1 0L2.4 14.7a2.2 2.2 0 0 1-.6-1.6V5.4a2 2 0 0 1 2-2h7.7a2.2 2.2 0 0 1 1.6.6l7.5 7.5a1.4 1.4 0 0 1 0 1.9ZM7.2 8.1a1.2 1.2 0 1 0 0-2.4 1.2 1.2 0 0 0 0 2.4Z' }) }), totalValue] })] }), showPromo ? (_jsxs("p", { className: 'shared-checkout-v2-saved', children: [_jsx("span", { "aria-hidden": 'true', children: "\uD83D\uDD25" }), savedLabel] })) : null] }), _jsxs("form", { className: 'shared-checkout-v2-payment', onSubmit: (event) => void handleSubmit(event), children: [_jsxs("div", { className: [
247
- 'shared-checkout-v2-methods',
248
- showWalletMethod ? '' : 'has-card-only',
249
- ]
250
- .filter(Boolean)
251
- .join(' '), role: 'tablist', "aria-label": 'Payment method', children: [showWalletMethod ? (_jsxs("button", { type: 'button', className: [
249
+ .join(' '), children: [_jsx("span", { children: totalLabel }), _jsxs("strong", { children: [_jsx("svg", { viewBox: '0 0 24 24', "aria-hidden": 'true', children: _jsx("path", { d: 'M20.6 13.4 12.4 21.6a2.2 2.2 0 0 1-3.1 0L2.4 14.7a2.2 2.2 0 0 1-.6-1.6V5.4a2 2 0 0 1 2-2h7.7a2.2 2.2 0 0 1 1.6.6l7.5 7.5a1.4 1.4 0 0 1 0 1.9ZM7.2 8.1a1.2 1.2 0 1 0 0-2.4 1.2 1.2 0 0 0 0 2.4Z' }) }), totalValue] })] }), showPromo ? (_jsxs("p", { className: 'shared-checkout-v2-saved', children: [_jsx("span", { "aria-hidden": 'true', children: "\uD83D\uDD25" }), savedLabel] })) : null] }), _jsxs("form", { className: 'shared-checkout-v2-payment', onSubmit: (event) => void handleSubmit(event), children: [showWalletMethod ? (_jsxs("div", { className: 'shared-checkout-v2-methods', role: 'tablist', "aria-label": 'Payment method', children: [_jsxs("button", { type: 'button', className: [
252
250
  'shared-checkout-v2-method',
253
251
  effectiveSelectedMethod === 'wallet' ? 'is-selected' : '',
254
252
  ]
255
253
  .filter(Boolean)
256
- .join(' '), onClick: selectWalletMethod, role: 'tab', "aria-selected": effectiveSelectedMethod === 'wallet', children: [_jsxs("span", { className: 'shared-checkout-v2-tab-wallets', "aria-hidden": 'true', children: [walletPaymentMethods.includes('applePay') ? (_jsx(PaymentBrandMark, { label: 'Apple Pay', className: 'shared-checkout-v2-tab-wallet' })) : null, walletPaymentMethods.includes('googlePay') ? (_jsx(PaymentBrandMark, { label: 'Google Pay', className: 'shared-checkout-v2-tab-wallet' })) : null] }), _jsx("span", { className: 'shared-checkout-v2-sr-only', children: walletAriaLabel })] })) : null, _jsxs("button", { type: 'button', className: [
254
+ .join(' '), onClick: selectWalletMethod, role: 'tab', "aria-selected": effectiveSelectedMethod === 'wallet', children: [_jsxs("span", { className: 'shared-checkout-v2-tab-wallets', "aria-hidden": 'true', children: [walletPaymentMethods.includes('applePay') ? (_jsx(PaymentBrandMark, { label: 'Apple Pay', className: 'shared-checkout-v2-tab-wallet' })) : null, walletPaymentMethods.includes('googlePay') ? (_jsx(PaymentBrandMark, { label: 'Google Pay', className: 'shared-checkout-v2-tab-wallet' })) : null] }), _jsx("span", { className: 'shared-checkout-v2-sr-only', children: walletAriaLabel })] }), _jsxs("button", { type: 'button', className: [
257
255
  'shared-checkout-v2-method',
258
256
  effectiveSelectedMethod === 'card' ? 'is-selected' : '',
259
257
  ]
260
258
  .filter(Boolean)
261
- .join(' '), onClick: selectCardMethod, role: 'tab', "aria-selected": effectiveSelectedMethod === 'card', children: [_jsx("strong", { children: "Credit card" }), _jsx("span", { className: 'shared-checkout-v2-tab-brands', "aria-hidden": 'true', children: cardBrandLabels.slice(0, 4).map((label) => (_jsx(PaymentBrandMark, { label: label, className: 'shared-checkout-v2-tab-brand' }, label))) })] })] }), _jsxs("div", { hidden: effectiveSelectedMethod !== 'wallet', className: [
259
+ .join(' '), onClick: selectCardMethod, role: 'tab', "aria-selected": effectiveSelectedMethod === 'card', children: [_jsx("strong", { children: "Credit card" }), _jsx("span", { className: 'shared-checkout-v2-tab-brands', "aria-hidden": 'true', children: cardBrandLabels.slice(0, 4).map((label) => (_jsx(PaymentBrandMark, { label: label, className: 'shared-checkout-v2-tab-brand' }, label))) })] })] })) : null, _jsxs("div", { hidden: effectiveSelectedMethod !== 'wallet', className: [
262
260
  'shared-checkout-v2-wallet-panel',
263
261
  effectiveSelectedMethod === 'wallet' ? 'is-visible' : '',
264
262
  ]
@@ -268,13 +266,13 @@ function SharedStripeCheckoutV2Form({ amountCents, buttonColor, cardSubmitLabel,
268
266
  effectiveSelectedMethod === 'card' ? 'is-visible' : '',
269
267
  ]
270
268
  .filter(Boolean)
271
- .join(' '), children: [_jsxs("div", { className: 'shared-checkout-v2-card-box', children: [_jsxs("label", { className: emailFieldClassName, children: [_jsx("span", { children: customerEmailLabel }), _jsx("input", { type: 'email', autoComplete: 'email', className: 'shared-checkout-v2-email-input', disabled: !customerEmailEditable, inputMode: 'email', readOnly: !customerEmailEditable, value: customerEmailEditable ? emailDraft : initialCustomerEmail, placeholder: customerEmailPlaceholder, onChange: (event) => {
272
- if (!customerEmailEditable) {
273
- return;
274
- }
275
- setEmailDraft(event.target.value);
276
- onCustomerEmailChange === null || onCustomerEmailChange === void 0 ? void 0 : onCustomerEmailChange(event.target.value);
277
- } })] }), _jsx(PaymentElement, { options: paymentElementOptions })] }), 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] })] })] })] }));
269
+ .join(' '), children: [_jsxs("div", { className: 'shared-checkout-v2-card-box', children: [_jsxs("label", { className: emailFieldClassName, children: [_jsx("span", { className: 'shared-checkout-v2-email-label', children: customerEmailLabel }), _jsx("span", { className: 'shared-checkout-v2-email-control', children: _jsx("input", { type: 'email', autoComplete: 'email', className: 'shared-checkout-v2-email-input', disabled: !customerEmailEditable, inputMode: 'email', readOnly: !customerEmailEditable, value: customerEmailEditable ? emailDraft : initialCustomerEmail, placeholder: customerEmailPlaceholder, onBlur: (event) => commitEmailDraftIfValid(event.currentTarget.value), onChange: (event) => {
270
+ if (!customerEmailEditable) {
271
+ return;
272
+ }
273
+ setEmailDraft(event.target.value);
274
+ onCustomerEmailChange === null || onCustomerEmailChange === void 0 ? void 0 : onCustomerEmailChange(event.target.value);
275
+ } }) })] }), _jsx(PaymentElement, { options: paymentElementOptions })] }), 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] })] })] })] }));
278
276
  }
279
277
  export function SharedStripeCheckoutV2Dialog(_a) {
280
278
  var { clientSecret, onClose, stripePromise } = _a, props = __rest(_a, ["clientSecret", "onClose", "stripePromise"]);
@@ -563,11 +561,6 @@ const sharedStripeCheckoutV2Styles = `
563
561
  gap: 42px;
564
562
  }
565
563
 
566
- .shared-checkout-v2-methods.has-card-only {
567
- grid-template-columns: minmax(0, 1fr);
568
- gap: 0;
569
- }
570
-
571
564
  .shared-checkout-v2-method {
572
565
  min-width: 0;
573
566
  min-height: 74px;
@@ -689,8 +682,9 @@ const sharedStripeCheckoutV2Styles = `
689
682
  .shared-checkout-v2-card-panel {
690
683
  position: relative;
691
684
  gap: 10px;
685
+ margin-inline: -17px;
692
686
  background: #f2f2f3;
693
- padding: 16px 15px 92px;
687
+ padding: 16px 32px 92px;
694
688
  }
695
689
 
696
690
  .shared-checkout-v2-wallet-panel.is-visible,
@@ -708,36 +702,54 @@ const sharedStripeCheckoutV2Styles = `
708
702
  }
709
703
 
710
704
  .shared-checkout-v2-email-field {
711
- min-height: 64px;
712
705
  box-sizing: border-box;
713
706
  display: flex;
714
707
  flex-direction: column;
715
- justify-content: center;
708
+ gap: 7px;
716
709
  border: 0;
717
710
  border-radius: 0;
718
- background: #fff;
711
+ background: transparent;
719
712
  margin-bottom: 14px;
720
- padding: 8px 14px;
721
- color: #647087;
713
+ padding: 0;
714
+ color: #303136;
722
715
  font-size: 14px;
723
- font-weight: 500;
724
- line-height: 1;
716
+ font-weight: 400;
717
+ line-height: 1.2;
725
718
  }
726
719
 
727
720
  .shared-checkout-v2-email-field.is-disabled {
728
721
  cursor: default;
729
722
  }
730
723
 
724
+ .shared-checkout-v2-email-label {
725
+ padding: 0 14px;
726
+ color: #303136;
727
+ font-size: 14px;
728
+ font-weight: 400;
729
+ line-height: 1.2;
730
+ }
731
+
732
+ .shared-checkout-v2-email-control {
733
+ min-height: 50px;
734
+ box-sizing: border-box;
735
+ display: flex;
736
+ align-items: center;
737
+ border: 1px solid #dedede;
738
+ background: #fff;
739
+ box-shadow: 0 1px 2px rgb(16 24 40 / 8%);
740
+ padding: 0 14px;
741
+ }
742
+
731
743
  .shared-checkout-v2-email-input {
732
744
  width: 100%;
733
- min-height: 30px;
745
+ min-height: 48px;
734
746
  box-sizing: border-box;
735
747
  border: 0;
736
748
  background: transparent;
737
749
  padding: 0;
738
750
  color: #303136;
739
751
  font: inherit;
740
- font-size: 20px;
752
+ font-size: 18px;
741
753
  font-weight: 400;
742
754
  line-height: 1.2;
743
755
  outline: none;
@@ -754,11 +766,11 @@ const sharedStripeCheckoutV2Styles = `
754
766
  }
755
767
 
756
768
  .shared-checkout-v2-card-box {
757
- overflow: hidden;
758
- border: 1px solid #dadde4;
769
+ overflow: visible;
770
+ border: 0;
759
771
  border-radius: 6px;
760
- background: #fff;
761
- box-shadow: 0 1px 2px rgb(16 24 40 / 10%);
772
+ background: transparent;
773
+ box-shadow: none;
762
774
  }
763
775
 
764
776
  .shared-checkout-v2-error {
@@ -948,7 +960,7 @@ const sharedStripeCheckoutV2Styles = `
948
960
  }
949
961
 
950
962
  .shared-checkout-v2-card-panel {
951
- padding-inline: 15px;
963
+ padding-inline: 32px;
952
964
  }
953
965
  }
954
966
  `;
package/dist/providers/stripe/ApplePaySubscriptionCheckoutSlot.js CHANGED
@@ -12,10 +12,8 @@ var __rest = (this && this.__rest) || function (s, e) {
12
12
  };
13
13
  import { jsx as _jsx } from "react/jsx-runtime";
14
14
  import { ApplePaySubscribeButton } from '../../components/shared/ApplePaySubscribeButton.js';
15
- import { useApplePayExpressCheckoutAllowed } from '../../components/shared/SharedStripeCheckoutDialog.js';
16
15
  import { WalletSubscriptionCheckoutLoadingPlaceholder, WalletSubscriptionCheckoutSlot, } from './WalletSubscriptionCheckoutSlot.js';
17
16
  export function ApplePaySubscriptionCheckoutSlot(_a) {
18
17
  var { placeholderLabel = 'Subscribe with Apple Pay' } = _a, slotProps = __rest(_a, ["placeholderLabel"]);
19
- const allowApplePayExpressCheckout = useApplePayExpressCheckoutAllowed();
20
- return (_jsx(WalletSubscriptionCheckoutSlot, Object.assign({}, slotProps, { availabilityPaymentMethod: 'applePay', expressCheckoutAllowed: allowApplePayExpressCheckout, placeholderLabel: placeholderLabel, renderPreparingPlaceholder: (placeholderProps) => (_jsx(WalletSubscriptionCheckoutLoadingPlaceholder, Object.assign({}, placeholderProps, { label: 'Loading Apple Pay' }))), renderPlaceholder: (placeholderProps) => (_jsx(ApplePaySubscribeButton, Object.assign({}, placeholderProps))) })));
18
+ return (_jsx(WalletSubscriptionCheckoutSlot, Object.assign({}, slotProps, { availabilityPaymentMethod: 'applePay', placeholderLabel: placeholderLabel, renderPreparingPlaceholder: (placeholderProps) => (_jsx(WalletSubscriptionCheckoutLoadingPlaceholder, Object.assign({}, placeholderProps, { label: 'Loading Apple Pay' }))), renderPlaceholder: (placeholderProps) => (_jsx(ApplePaySubscribeButton, Object.assign({}, placeholderProps))) })));
21
19
  }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@funnelsgrove/payments",
3
- "version": "0.1.13",
3
+ "version": "0.1.15",
4
4
  "type": "module",
5
5
  "private": false,
6
6
  "main": "./dist/index.js",