@funnelsgrove/payments 0.1.13 → 0.1.14

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 +46 -49
  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
  };
@@ -243,22 +231,17 @@ function SharedStripeCheckoutV2Form({ amountCents, buttonColor, cardSubmitLabel,
243
231
  showPromo ? '' : 'is-plain',
244
232
  ]
245
233
  .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: [
234
+ .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
235
  'shared-checkout-v2-method',
253
236
  effectiveSelectedMethod === 'wallet' ? 'is-selected' : '',
254
237
  ]
255
238
  .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: [
239
+ .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
240
  'shared-checkout-v2-method',
258
241
  effectiveSelectedMethod === 'card' ? 'is-selected' : '',
259
242
  ]
260
243
  .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: [
244
+ .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
245
  'shared-checkout-v2-wallet-panel',
263
246
  effectiveSelectedMethod === 'wallet' ? 'is-visible' : '',
264
247
  ]
@@ -268,13 +251,13 @@ function SharedStripeCheckoutV2Form({ amountCents, buttonColor, cardSubmitLabel,
268
251
  effectiveSelectedMethod === 'card' ? 'is-visible' : '',
269
252
  ]
270
253
  .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] })] })] })] }));
254
+ .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, onChange: (event) => {
255
+ if (!customerEmailEditable) {
256
+ return;
257
+ }
258
+ setEmailDraft(event.target.value);
259
+ onCustomerEmailChange === null || onCustomerEmailChange === void 0 ? void 0 : onCustomerEmailChange(event.target.value);
260
+ } }) })] }), _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
261
  }
279
262
  export function SharedStripeCheckoutV2Dialog(_a) {
280
263
  var { clientSecret, onClose, stripePromise } = _a, props = __rest(_a, ["clientSecret", "onClose", "stripePromise"]);
@@ -563,11 +546,6 @@ const sharedStripeCheckoutV2Styles = `
563
546
  gap: 42px;
564
547
  }
565
548
 
566
- .shared-checkout-v2-methods.has-card-only {
567
- grid-template-columns: minmax(0, 1fr);
568
- gap: 0;
569
- }
570
-
571
549
  .shared-checkout-v2-method {
572
550
  min-width: 0;
573
551
  min-height: 74px;
@@ -689,8 +667,9 @@ const sharedStripeCheckoutV2Styles = `
689
667
  .shared-checkout-v2-card-panel {
690
668
  position: relative;
691
669
  gap: 10px;
670
+ margin-inline: -17px;
692
671
  background: #f2f2f3;
693
- padding: 16px 15px 92px;
672
+ padding: 16px 32px 92px;
694
673
  }
695
674
 
696
675
  .shared-checkout-v2-wallet-panel.is-visible,
@@ -708,36 +687,54 @@ const sharedStripeCheckoutV2Styles = `
708
687
  }
709
688
 
710
689
  .shared-checkout-v2-email-field {
711
- min-height: 64px;
712
690
  box-sizing: border-box;
713
691
  display: flex;
714
692
  flex-direction: column;
715
- justify-content: center;
693
+ gap: 7px;
716
694
  border: 0;
717
695
  border-radius: 0;
718
- background: #fff;
696
+ background: transparent;
719
697
  margin-bottom: 14px;
720
- padding: 8px 14px;
721
- color: #647087;
698
+ padding: 0;
699
+ color: #303136;
722
700
  font-size: 14px;
723
- font-weight: 500;
724
- line-height: 1;
701
+ font-weight: 400;
702
+ line-height: 1.2;
725
703
  }
726
704
 
727
705
  .shared-checkout-v2-email-field.is-disabled {
728
706
  cursor: default;
729
707
  }
730
708
 
709
+ .shared-checkout-v2-email-label {
710
+ padding: 0 14px;
711
+ color: #303136;
712
+ font-size: 14px;
713
+ font-weight: 400;
714
+ line-height: 1.2;
715
+ }
716
+
717
+ .shared-checkout-v2-email-control {
718
+ min-height: 50px;
719
+ box-sizing: border-box;
720
+ display: flex;
721
+ align-items: center;
722
+ border: 1px solid #dedede;
723
+ background: #fff;
724
+ box-shadow: 0 1px 2px rgb(16 24 40 / 8%);
725
+ padding: 0 14px;
726
+ }
727
+
731
728
  .shared-checkout-v2-email-input {
732
729
  width: 100%;
733
- min-height: 30px;
730
+ min-height: 48px;
734
731
  box-sizing: border-box;
735
732
  border: 0;
736
733
  background: transparent;
737
734
  padding: 0;
738
735
  color: #303136;
739
736
  font: inherit;
740
- font-size: 20px;
737
+ font-size: 18px;
741
738
  font-weight: 400;
742
739
  line-height: 1.2;
743
740
  outline: none;
@@ -754,11 +751,11 @@ const sharedStripeCheckoutV2Styles = `
754
751
  }
755
752
 
756
753
  .shared-checkout-v2-card-box {
757
- overflow: hidden;
758
- border: 1px solid #dadde4;
754
+ overflow: visible;
755
+ border: 0;
759
756
  border-radius: 6px;
760
- background: #fff;
761
- box-shadow: 0 1px 2px rgb(16 24 40 / 10%);
757
+ background: transparent;
758
+ box-shadow: none;
762
759
  }
763
760
 
764
761
  .shared-checkout-v2-error {
@@ -948,7 +945,7 @@ const sharedStripeCheckoutV2Styles = `
948
945
  }
949
946
 
950
947
  .shared-checkout-v2-card-panel {
951
- padding-inline: 15px;
948
+ padding-inline: 32px;
952
949
  }
953
950
  }
954
951
  `;
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.14",
4
4
  "type": "module",
5
5
  "private": false,
6
6
  "main": "./dist/index.js",