@funnelsgrove/payments 0.21.1 → 0.22.1

package/README.md

@@ -39,6 +39,8 @@ Use these for new one-time paywall plans:
 `variant='compact'` for a centered desktop modal with the same Stripe-owned wallet/card flow;
 mobile remains full-screen and all checkout analytics and verified-success behavior are unchanged.
 
+Pass `presentation='inline'` to embed a card-only form in the paywall. The host owns the offer summary and renewal disclosure. Inline checkout has no modal semantics, close button, Escape dismissal, or shared wallet session; analytics and verified-success callbacks are unchanged.
+
 Use `completeStripeOneClickPayment` for normal post-checkout one-click upsells. It delegates the charge to `funnelSdkService.chargeOneClickPayment` and owns any required Stripe confirmation. Pass its optional `checkoutAnalytics` context to let the shared package emit `checkout_completed` only after `succeeded`, including after required confirmation. The context uses `StripeSubscriptionCheckoutAnalyticsContext`; completion is deduplicated by PaymentIntent ID, and analytics failures do not fail the payment. Funnel code supplies the context and completes its step; the shared package owns the analytics callback. `chargeStripeOneClickPayment` remains the lower-level charge-only primitive.
 
 Solidgate browser checkout is available for controlled provider-routed funnels through

package/dist/providers/stripe/components/SharedStripeCheckoutV2.styles.d.ts

@@ -1 +1 @@
-export declare const sharedStripeCheckoutV2Styles = "\n.shared-checkout-v2-overlay {\n  position: fixed;\n  inset: 0;\n  z-index: 110;\n  display: flex;\n  align-items: stretch;\n  justify-content: center;\n  overflow: hidden;\n  background: #fff;\n}\n\n.shared-checkout-v2-dialog {\n  width: min(100%, 430px);\n  height: 100svh;\n  max-height: 100svh;\n  overflow: hidden;\n  background: #fff;\n}\n\n@media (min-width: 640px) {\n  .shared-checkout-v2-overlay:has(.shared-checkout-v2-dialog[data-variant='compact']) {\n    align-items: center;\n    padding: 24px;\n    background: rgb(0 0 0 / 48%);\n  }\n\n  .shared-checkout-v2-dialog[data-variant='compact'] {\n    width: min(100%, 520px);\n    height: auto;\n    max-height: calc(100svh - 48px);\n    border-radius: 24px;\n    box-shadow: 0 24px 70px rgb(0 0 0 / 28%);\n  }\n}\n\n.shared-checkout-v2-shell[data-variant='compact'] {\n  height: auto;\n  max-height: min(100svh, 760px);\n}\n\n.shared-checkout-v2-shell[data-variant='compact'] .shared-checkout-v2-header {\n  min-height: 88px;\n  padding: 0 72px;\n}\n\n.shared-checkout-v2-shell[data-variant='compact'] .shared-checkout-v2-header h2 {\n  font-size: 27px;\n}\n\n.shared-checkout-v2-shell[data-variant='compact'] .shared-checkout-v2-close {\n  right: 22px;\n  left: auto;\n}\n\n.shared-checkout-v2-shell[data-variant='compact'] .shared-checkout-v2-summary {\n  padding: 0 36px;\n}\n\n.shared-checkout-v2-shell[data-variant='compact'] .shared-checkout-v2-total {\n  min-height: 82px;\n  border: 1px solid #ececef;\n  border-radius: 16px;\n  padding: 0 22px;\n  background: #fbfbfc;\n}\n\n.shared-checkout-v2-shell[data-variant='compact'] .shared-checkout-v2-total svg {\n  display: none;\n}\n\n.shared-checkout-v2-shell[data-variant='compact'] .shared-checkout-v2-payment {\n  padding-right: 36px;\n  padding-left: 36px;\n}\n\n.shared-checkout-v2-shell[data-variant='compact'] .shared-checkout-v2-card-submit {\n  border-radius: 14px;\n  background: var(--shared-checkout-v2-button-color);\n  text-transform: none;\n}\n\n.shared-checkout-v2-shell {\n  height: 100%;\n  max-height: 100svh;\n  box-sizing: border-box;\n  display: flex;\n  flex-direction: column;\n  overflow-y: auto;\n  overflow-x: hidden;\n  -webkit-overflow-scrolling: touch;\n  background: #fff;\n  color: #303136;\n  font-family: Inter, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;\n}\n\n.shared-checkout-v2-header {\n  position: relative;\n  min-height: 70px;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  padding: 0 56px;\n  background: #fff;\n}\n\n.shared-checkout-v2-header h2 {\n  margin: 0;\n  color: #020203;\n  font-size: 24px;\n  font-weight: 900;\n  line-height: 1.15;\n  letter-spacing: 0;\n  text-align: center;\n}\n\n.shared-checkout-v2-close {\n  position: absolute;\n  left: 16px;\n  top: 50%;\n  width: 40px;\n  height: 40px;\n  border: 0;\n  border-radius: 999px;\n  background: #f2f2f3;\n  color: #aaa;\n  transform: translateY(-50%);\n  cursor: pointer;\n}\n\n.shared-checkout-v2-close span,\n.shared-checkout-v2-close span::after {\n  position: absolute;\n  left: 50%;\n  top: 50%;\n  width: 28px;\n  height: 4px;\n  border-radius: 999px;\n  background: currentColor;\n  content: '';\n}\n\n.shared-checkout-v2-close span {\n  transform: translate(-50%, -50%) rotate(45deg);\n}\n\n.shared-checkout-v2-close span::after {\n  transform: translate(-50%, -50%) rotate(90deg);\n}\n\n.shared-checkout-v2-summary {\n  padding: 0 17px 0;\n  background: #fff;\n}\n\n.shared-checkout-v2-countdown {\n  margin: 0;\n  min-height: 37px;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  border-radius: 12px;\n  background: color-mix(in srgb, var(--shared-checkout-v2-theme-color) 10%, #fff);\n  color: var(--shared-checkout-v2-theme-color);\n  font-size: 16px;\n  font-weight: 900;\n  line-height: 1.2;\n  letter-spacing: 0;\n  text-align: center;\n}\n\n.shared-checkout-v2-satisfaction {\n  margin: 17px 0 21px;\n  color: #2f3034;\n  font-size: 19px;\n  font-weight: 800;\n  line-height: 1.15;\n  letter-spacing: 0;\n  text-align: center;\n}\n\n.shared-checkout-v2-satisfaction strong {\n  color: var(--shared-checkout-v2-theme-color);\n}\n\n.shared-checkout-v2-price-stack {\n  display: flex;\n  flex-direction: column;\n  gap: 8px;\n}\n\n.shared-checkout-v2-price-row {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  gap: 12px;\n  font-size: 18px;\n  line-height: 1.2;\n  letter-spacing: 0;\n}\n\n.shared-checkout-v2-price-row.is-muted {\n  color: #9d9d9f;\n  font-size: 17px;\n  font-weight: 500;\n}\n\n.shared-checkout-v2-strike {\n  text-decoration-line: line-through;\n  text-decoration-thickness: 2px;\n}\n\n.shared-checkout-v2-price-row.is-discount {\n  color: #040508;\n  font-size: 17px;\n  font-weight: 900;\n}\n\n.shared-checkout-v2-price-row.is-discount strong:last-child {\n  color: #ff2544;\n}\n\n.shared-checkout-v2-promo {\n  min-height: 42px;\n  box-sizing: border-box;\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  gap: 12px;\n  border-radius: 13px;\n  background: #f0f0f0;\n  padding: 0 14px;\n  color: #8d8d90;\n  font-size: 16px;\n  font-weight: 500;\n  line-height: 1.1;\n}\n\n.shared-checkout-v2-promo strong {\n  color: #050609;\n  font-weight: 900;\n}\n\n.shared-checkout-v2-total {\n  margin-top: 20px;\n  min-height: 76px;\n  border-top: 1px solid #dedede;\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  gap: 16px;\n  color: #303136;\n}\n\n.shared-checkout-v2-total span {\n  font-size: 23px;\n  font-weight: 800;\n  line-height: 1;\n}\n\n.shared-checkout-v2-total strong {\n  display: inline-flex;\n  align-items: center;\n  gap: 7px;\n  color: #303136;\n  font-size: 25px;\n  font-weight: 900;\n  line-height: 1;\n}\n\n.shared-checkout-v2-total svg {\n  width: 25px;\n  height: 25px;\n  fill: none;\n  stroke: currentColor;\n  stroke-width: 2;\n  stroke-linejoin: round;\n}\n\n.shared-checkout-v2-total.is-plain {\n  margin-top: 0;\n}\n\n.shared-checkout-v2-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  letter-spacing: 0;\n}\n\n.shared-checkout-v2-payment {\n  min-height: 0;\n  display: flex;\n  flex-direction: column;\n  gap: 12px;\n  background: #f2f2f3;\n  padding: 9px 17px 32px;\n}\n\n.shared-checkout-v2-methods {\n  display: grid;\n  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);\n  gap: 42px;\n}\n\n.shared-checkout-v2-method {\n  min-width: 0;\n  min-height: 74px;\n  box-sizing: border-box;\n  border: 2px solid #e6e7eb;\n  border-radius: 13px;\n  background: #fff;\n  color: #344376;\n  padding: 9px 8px;\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  justify-content: center;\n  gap: 6px;\n  cursor: pointer;\n}\n\n.shared-checkout-v2-method.is-selected {\n  border: 3px solid #050505;\n}\n\n.shared-checkout-v2-tab-wallet {\n  width: 58px;\n  height: 36px;\n}\n\n.shared-checkout-v2-tab-wallet svg {\n  display: block;\n  width: 100%;\n  height: 100%;\n}\n\n.shared-checkout-v2-tab-wallets {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  gap: 8px;\n}\n\n.shared-checkout-v2-method strong {\n  color: #344376;\n  font-size: 20px;\n  font-weight: 900;\n  line-height: 1;\n  letter-spacing: 0;\n}\n\n.shared-checkout-v2-tab-brands {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  max-width: 100%;\n  gap: 4px;\n}\n\n.shared-checkout-v2-tab-brand {\n  min-width: 0;\n  width: 24px;\n  height: 15px;\n}\n\n.shared-checkout-v2-tab-brand svg {\n  display: block;\n  width: 100%;\n  height: 100%;\n}\n\n.shared-checkout-v2-wallet-panel,\n.shared-checkout-v2-card-panel {\n  display: flex;\n  flex-direction: column;\n  height: 0;\n  overflow: hidden;\n  opacity: 0;\n  pointer-events: none;\n}\n\n.shared-checkout-v2-wallet-panel[hidden],\n.shared-checkout-v2-card-panel[hidden] {\n  display: none;\n}\n\n.shared-checkout-v2-wallet-panel {\n  align-items: center;\n  gap: 22px;\n  padding-top: 5px;\n}\n\n.shared-checkout-v2-secure-pill {\n  width: fit-content;\n  min-height: 47px;\n  box-sizing: border-box;\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  gap: 12px;\n  margin: 0 auto;\n  border-radius: 12px;\n  background: #dcffd0;\n  padding: 0 22px;\n  color: #207733;\n  font-size: 18px;\n  font-weight: 600;\n  line-height: 1.1;\n  letter-spacing: 0;\n}\n\n.shared-checkout-v2-secure-pill-icon {\n  width: 24px;\n  height: 24px;\n  flex: none;\n  color: #147232;\n}\n\n.shared-checkout-v2-wallet-shell {\n  width: 100%;\n  min-height: 124px;\n  display: flex;\n  flex-direction: column;\n  justify-content: center;\n}\n\n.shared-checkout-v2-express-buttons {\n  width: 100%;\n}\n\n.shared-checkout-v2-card-panel {\n  position: relative;\n  gap: 10px;\n  margin-inline: -17px;\n  background: #f2f2f3;\n  padding: 16px 32px 92px;\n}\n\n.shared-checkout-v2-wallet-panel.is-visible,\n.shared-checkout-v2-card-panel.is-visible {\n  height: auto;\n  overflow: visible;\n  opacity: 1;\n  pointer-events: auto;\n}\n\n.shared-checkout-v2-wallet-panel:not(.is-visible),\n.shared-checkout-v2-card-panel:not(.is-visible) {\n  padding-top: 0;\n  padding-bottom: 0;\n}\n\n.shared-checkout-v2-email-field {\n  box-sizing: border-box;\n  display: flex;\n  flex-direction: column;\n  gap: 7px;\n  border: 0;\n  border-radius: 0;\n  background: transparent;\n  margin-bottom: 14px;\n  padding: 0;\n  color: #303136;\n  font-size: 14px;\n  font-weight: 400;\n  line-height: 1.2;\n}\n\n.shared-checkout-v2-email-field.is-disabled {\n  cursor: default;\n}\n\n.shared-checkout-v2-email-label {\n  padding: 0 14px;\n  color: #303136;\n  font-size: 14px;\n  font-weight: 400;\n  line-height: 1.2;\n}\n\n.shared-checkout-v2-email-control {\n  min-height: 50px;\n  box-sizing: border-box;\n  display: flex;\n  align-items: center;\n  border: 1px solid #dedede;\n  background: #fff;\n  box-shadow: 0 1px 2px rgb(16 24 40 / 8%);\n  padding: 0 14px;\n}\n\n.shared-checkout-v2-email-input {\n  width: 100%;\n  min-height: 48px;\n  box-sizing: border-box;\n  border: 0;\n  background: transparent;\n  padding: 0;\n  color: #303136;\n  font: inherit;\n  font-size: 18px;\n  font-weight: 400;\n  line-height: 1.2;\n  outline: none;\n}\n\n.shared-checkout-v2-email-input:disabled {\n  color: #74767c;\n  opacity: 1;\n  -webkit-text-fill-color: #74767c;\n}\n\n.shared-checkout-v2-email-input::placeholder {\n  color: #8c909a;\n}\n\n.shared-checkout-v2-card-box {\n  overflow: visible;\n  border: 0;\n  border-radius: 6px;\n  background: transparent;\n  box-shadow: none;\n}\n\n.shared-checkout-v2-country-field {\n  box-sizing: border-box;\n  display: flex;\n  flex-direction: column;\n  gap: 7px;\n  margin: 14px 0 0;\n  color: #303136;\n  font-size: 14px;\n  font-weight: 400;\n  line-height: 1.2;\n}\n\n.shared-checkout-v2-country-label {\n  padding: 0 14px;\n}\n\n.shared-checkout-v2-country-control {\n  position: relative;\n  display: block;\n}\n\n.shared-checkout-v2-country-control::after {\n  position: absolute;\n  right: 17px;\n  top: 50%;\n  width: 8px;\n  height: 8px;\n  border-right: 2px solid #6f7380;\n  border-bottom: 2px solid #6f7380;\n  content: '';\n  pointer-events: none;\n  transform: translateY(-65%) rotate(45deg);\n}\n\n.shared-checkout-v2-country-select {\n  width: 100%;\n  min-height: 50px;\n  box-sizing: border-box;\n  appearance: none;\n  border: 1px solid #dedede;\n  border-radius: 0;\n  background: #fff;\n  box-shadow: 0 1px 2px rgb(16 24 40 / 8%);\n  color: #303136;\n  font: inherit;\n  font-size: 18px;\n  font-weight: 400;\n  line-height: 1.2;\n  outline: none;\n  padding: 0 44px 0 14px;\n}\n\n.shared-checkout-v2-error {\n  margin: 0;\n  color: #c43737;\n  font-size: 13px;\n  font-weight: 600;\n  line-height: 1.35;\n}\n\n.shared-checkout-v2-card-submit {\n  min-height: 60px;\n  border: 0;\n  border-radius: 11px;\n  background: var(--shared-checkout-v2-button-color);\n  color: #fff;\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  gap: 14px;\n  font-size: 22px;\n  font-weight: 900;\n  line-height: 1;\n  letter-spacing: 0;\n  cursor: pointer;\n}\n\n.shared-checkout-v2-card-submit:disabled {\n  cursor: wait;\n  opacity: 0.72;\n}\n\n.shared-checkout-v2-card-submit-icon {\n  width: 26px;\n  height: 26px;\n}\n\n.shared-checkout-v2-card-brands {\n  min-height: 34px;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  gap: 12px;\n  opacity: 0.95;\n}\n\n.shared-checkout-v2-card-brand {\n  width: 42px;\n  height: 25px;\n}\n\n.shared-checkout-v2-secure-pill--card {\n  position: absolute;\n  left: 50%;\n  bottom: 16px;\n  transform: translateX(-50%);\n  white-space: nowrap;\n}\n\n.shared-checkout-v2-sr-only {\n  position: absolute;\n  width: 1px;\n  height: 1px;\n  padding: 0;\n  margin: -1px;\n  overflow: hidden;\n  clip: rect(0, 0, 0, 0);\n  white-space: nowrap;\n  border: 0;\n}\n\n.shared-checkout-special-offer-overlay {\n  position: fixed;\n  inset: 0;\n  z-index: 120;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  box-sizing: border-box;\n  padding: 22px;\n  background: rgb(0 0 0 / 48%);\n}\n\n.shared-checkout-special-offer-dialog {\n  width: min(100%, 386px);\n  box-sizing: border-box;\n  border-radius: 14px;\n  background: #fff;\n  padding: 55px 26px 28px;\n  color: #303136;\n  text-align: center;\n  font-family: Inter, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;\n}\n\n.shared-checkout-special-offer-gift {\n  display: block;\n  width: min(100%, 260px);\n  height: auto;\n  margin: 0 auto 22px;\n}\n\n.shared-checkout-special-offer-gift--image {\n  position: relative;\n  width: min(100%, 250px);\n  aspect-ratio: 1;\n}\n\n.shared-checkout-special-offer-gift-image {\n  display: block;\n  width: 100%;\n  height: 100%;\n  background-position: center;\n  background-repeat: no-repeat;\n  background-size: contain;\n  user-select: none;\n}\n\n.shared-checkout-special-offer-image-discount {\n  position: absolute;\n  top: 69%;\n  left: 50%;\n  transform: translate(-50%, -50%);\n  color: #1f8f4d;\n  font-family: Inter, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;\n  font-size: 34px;\n  font-weight: 900;\n  line-height: 1;\n  letter-spacing: 0;\n  pointer-events: none;\n  white-space: nowrap;\n}\n\n.shared-checkout-special-offer-dialog h2 {\n  margin: 0;\n  color: #303136;\n  font-size: 36px;\n  font-weight: 900;\n  line-height: 1.1;\n  letter-spacing: 0;\n}\n\n.shared-checkout-special-offer-dialog p {\n  margin: 26px 0 32px;\n  color: #77787e;\n  font-size: 24px;\n  font-weight: 500;\n  line-height: 1.18;\n  letter-spacing: 0;\n}\n\n.shared-checkout-special-offer-button {\n  width: 100%;\n  min-height: 76px;\n  border: 0;\n  border-radius: 12px;\n  background: var(--shared-checkout-v2-button-color);\n  color: #fff;\n  font-size: 23px;\n  font-weight: 900;\n  line-height: 1;\n  letter-spacing: 0;\n  cursor: pointer;\n}\n\n@media (max-width: 429px) {\n  .shared-checkout-v2-header {\n    min-height: 64px;\n  }\n\n  .shared-checkout-v2-header h2 {\n    font-size: 24px;\n  }\n\n  .shared-checkout-v2-summary {\n    padding-inline: 17px;\n  }\n\n  .shared-checkout-v2-satisfaction {\n    font-size: 19px;\n  }\n\n  .shared-checkout-v2-methods {\n    gap: 42px;\n  }\n\n  .shared-checkout-v2-method strong {\n    font-size: 19px;\n  }\n\n  .shared-checkout-v2-card-panel {\n    padding-inline: 32px;\n  }\n}\n";
+export declare const sharedStripeCheckoutV2Styles = "\n.shared-checkout-v2-overlay {\n  position: fixed;\n  inset: 0;\n  z-index: 110;\n  display: flex;\n  align-items: stretch;\n  justify-content: center;\n  overflow: hidden;\n  background: #fff;\n}\n\n.shared-checkout-v2-dialog {\n  width: min(100%, 430px);\n  height: 100svh;\n  max-height: 100svh;\n  overflow: hidden;\n  background: #fff;\n}\n\n@media (min-width: 640px) {\n  .shared-checkout-v2-overlay:has(.shared-checkout-v2-dialog[data-variant='compact']) {\n    align-items: center;\n    padding: 24px;\n    background: rgb(0 0 0 / 48%);\n  }\n\n  .shared-checkout-v2-dialog[data-variant='compact'] {\n    width: min(100%, 520px);\n    height: auto;\n    max-height: calc(100svh - 48px);\n    border-radius: 24px;\n    box-shadow: 0 24px 70px rgb(0 0 0 / 28%);\n  }\n}\n\n.shared-checkout-v2-shell[data-variant='compact'] {\n  height: auto;\n  max-height: min(100svh, 760px);\n}\n\n.shared-checkout-v2-shell[data-variant='compact'] .shared-checkout-v2-header {\n  min-height: 88px;\n  padding: 0 72px;\n}\n\n.shared-checkout-v2-shell[data-variant='compact'] .shared-checkout-v2-header h2 {\n  font-size: 27px;\n}\n\n.shared-checkout-v2-shell[data-variant='compact'] .shared-checkout-v2-close {\n  right: 22px;\n  left: auto;\n}\n\n.shared-checkout-v2-shell[data-variant='compact'] .shared-checkout-v2-summary {\n  padding: 0 36px;\n}\n\n.shared-checkout-v2-shell[data-variant='compact'] .shared-checkout-v2-total {\n  min-height: 82px;\n  border: 1px solid #ececef;\n  border-radius: 16px;\n  padding: 0 22px;\n  background: #fbfbfc;\n}\n\n.shared-checkout-v2-shell[data-variant='compact'] .shared-checkout-v2-total svg {\n  display: none;\n}\n\n.shared-checkout-v2-shell[data-variant='compact'] .shared-checkout-v2-payment {\n  padding-right: 36px;\n  padding-left: 36px;\n}\n\n.shared-checkout-v2-shell[data-variant='compact'] .shared-checkout-v2-card-submit {\n  border-radius: 14px;\n  background: var(--shared-checkout-v2-button-color);\n  text-transform: none;\n}\n\n.shared-checkout-v2-shell {\n  height: 100%;\n  max-height: 100svh;\n  box-sizing: border-box;\n  display: flex;\n  flex-direction: column;\n  overflow-y: auto;\n  overflow-x: hidden;\n  -webkit-overflow-scrolling: touch;\n  background: #fff;\n  color: #303136;\n  font-family: Inter, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;\n}\n\n.shared-checkout-v2-header {\n  position: relative;\n  min-height: 70px;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  padding: 0 56px;\n  background: #fff;\n}\n\n.shared-checkout-v2-header h2 {\n  margin: 0;\n  color: #020203;\n  font-size: 24px;\n  font-weight: 900;\n  line-height: 1.15;\n  letter-spacing: 0;\n  text-align: center;\n}\n\n.shared-checkout-v2-close {\n  position: absolute;\n  left: 16px;\n  top: 50%;\n  width: 40px;\n  height: 40px;\n  border: 0;\n  border-radius: 999px;\n  background: #f2f2f3;\n  color: #aaa;\n  transform: translateY(-50%);\n  cursor: pointer;\n}\n\n.shared-checkout-v2-close span,\n.shared-checkout-v2-close span::after {\n  position: absolute;\n  left: 50%;\n  top: 50%;\n  width: 28px;\n  height: 4px;\n  border-radius: 999px;\n  background: currentColor;\n  content: '';\n}\n\n.shared-checkout-v2-close span {\n  transform: translate(-50%, -50%) rotate(45deg);\n}\n\n.shared-checkout-v2-close span::after {\n  transform: translate(-50%, -50%) rotate(90deg);\n}\n\n.shared-checkout-v2-summary {\n  padding: 0 17px 0;\n  background: #fff;\n}\n\n.shared-checkout-v2-countdown {\n  margin: 0;\n  min-height: 37px;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  border-radius: 12px;\n  background: color-mix(in srgb, var(--shared-checkout-v2-theme-color) 10%, #fff);\n  color: var(--shared-checkout-v2-theme-color);\n  font-size: 16px;\n  font-weight: 900;\n  line-height: 1.2;\n  letter-spacing: 0;\n  text-align: center;\n}\n\n.shared-checkout-v2-satisfaction {\n  margin: 17px 0 21px;\n  color: #2f3034;\n  font-size: 19px;\n  font-weight: 800;\n  line-height: 1.15;\n  letter-spacing: 0;\n  text-align: center;\n}\n\n.shared-checkout-v2-satisfaction strong {\n  color: var(--shared-checkout-v2-theme-color);\n}\n\n.shared-checkout-v2-price-stack {\n  display: flex;\n  flex-direction: column;\n  gap: 8px;\n}\n\n.shared-checkout-v2-price-row {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  gap: 12px;\n  font-size: 18px;\n  line-height: 1.2;\n  letter-spacing: 0;\n}\n\n.shared-checkout-v2-price-row.is-muted {\n  color: #9d9d9f;\n  font-size: 17px;\n  font-weight: 500;\n}\n\n.shared-checkout-v2-strike {\n  text-decoration-line: line-through;\n  text-decoration-thickness: 2px;\n}\n\n.shared-checkout-v2-price-row.is-discount {\n  color: #040508;\n  font-size: 17px;\n  font-weight: 900;\n}\n\n.shared-checkout-v2-price-row.is-discount strong:last-child {\n  color: #ff2544;\n}\n\n.shared-checkout-v2-promo {\n  min-height: 42px;\n  box-sizing: border-box;\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  gap: 12px;\n  border-radius: 13px;\n  background: #f0f0f0;\n  padding: 0 14px;\n  color: #8d8d90;\n  font-size: 16px;\n  font-weight: 500;\n  line-height: 1.1;\n}\n\n.shared-checkout-v2-promo strong {\n  color: #050609;\n  font-weight: 900;\n}\n\n.shared-checkout-v2-total {\n  margin-top: 20px;\n  min-height: 76px;\n  border-top: 1px solid #dedede;\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  gap: 16px;\n  color: #303136;\n}\n\n.shared-checkout-v2-total span {\n  font-size: 23px;\n  font-weight: 800;\n  line-height: 1;\n}\n\n.shared-checkout-v2-total strong {\n  display: inline-flex;\n  align-items: center;\n  gap: 7px;\n  color: #303136;\n  font-size: 25px;\n  font-weight: 900;\n  line-height: 1;\n}\n\n.shared-checkout-v2-total svg {\n  width: 25px;\n  height: 25px;\n  fill: none;\n  stroke: currentColor;\n  stroke-width: 2;\n  stroke-linejoin: round;\n}\n\n.shared-checkout-v2-total.is-plain {\n  margin-top: 0;\n}\n\n.shared-checkout-v2-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  letter-spacing: 0;\n}\n\n.shared-checkout-v2-payment {\n  min-height: 0;\n  display: flex;\n  flex-direction: column;\n  gap: 12px;\n  background: #f2f2f3;\n  padding: 9px 17px 32px;\n}\n\n.shared-checkout-v2-methods {\n  display: grid;\n  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);\n  gap: 42px;\n}\n\n.shared-checkout-v2-method {\n  min-width: 0;\n  min-height: 74px;\n  box-sizing: border-box;\n  border: 2px solid #e6e7eb;\n  border-radius: 13px;\n  background: #fff;\n  color: #344376;\n  padding: 9px 8px;\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  justify-content: center;\n  gap: 6px;\n  cursor: pointer;\n}\n\n.shared-checkout-v2-method.is-selected {\n  border: 3px solid #050505;\n}\n\n.shared-checkout-v2-tab-wallet {\n  width: 58px;\n  height: 36px;\n}\n\n.shared-checkout-v2-tab-wallet svg {\n  display: block;\n  width: 100%;\n  height: 100%;\n}\n\n.shared-checkout-v2-tab-wallets {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  gap: 8px;\n}\n\n.shared-checkout-v2-method strong {\n  color: #344376;\n  font-size: 20px;\n  font-weight: 900;\n  line-height: 1;\n  letter-spacing: 0;\n}\n\n.shared-checkout-v2-tab-brands {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  max-width: 100%;\n  gap: 4px;\n}\n\n.shared-checkout-v2-tab-brand {\n  min-width: 0;\n  width: 24px;\n  height: 15px;\n}\n\n.shared-checkout-v2-tab-brand svg {\n  display: block;\n  width: 100%;\n  height: 100%;\n}\n\n.shared-checkout-v2-wallet-panel,\n.shared-checkout-v2-card-panel {\n  display: flex;\n  flex-direction: column;\n  height: 0;\n  overflow: hidden;\n  opacity: 0;\n  pointer-events: none;\n}\n\n.shared-checkout-v2-wallet-panel[hidden],\n.shared-checkout-v2-card-panel[hidden] {\n  display: none;\n}\n\n.shared-checkout-v2-wallet-panel {\n  align-items: center;\n  gap: 22px;\n  padding-top: 5px;\n}\n\n.shared-checkout-v2-secure-pill {\n  width: fit-content;\n  min-height: 47px;\n  box-sizing: border-box;\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  gap: 12px;\n  margin: 0 auto;\n  border-radius: 12px;\n  background: #dcffd0;\n  padding: 0 22px;\n  color: #207733;\n  font-size: 18px;\n  font-weight: 600;\n  line-height: 1.1;\n  letter-spacing: 0;\n}\n\n.shared-checkout-v2-secure-pill-icon {\n  width: 24px;\n  height: 24px;\n  flex: none;\n  color: #147232;\n}\n\n.shared-checkout-v2-wallet-shell {\n  width: 100%;\n  min-height: 124px;\n  display: flex;\n  flex-direction: column;\n  justify-content: center;\n}\n\n.shared-checkout-v2-express-buttons {\n  width: 100%;\n}\n\n.shared-checkout-v2-card-panel {\n  position: relative;\n  gap: 10px;\n  margin-inline: -17px;\n  background: #f2f2f3;\n  padding: 16px 32px 92px;\n}\n\n.shared-checkout-v2-wallet-panel.is-visible,\n.shared-checkout-v2-card-panel.is-visible {\n  height: auto;\n  overflow: visible;\n  opacity: 1;\n  pointer-events: auto;\n}\n\n.shared-checkout-v2-wallet-panel:not(.is-visible),\n.shared-checkout-v2-card-panel:not(.is-visible) {\n  padding-top: 0;\n  padding-bottom: 0;\n}\n\n.shared-checkout-v2-email-field {\n  box-sizing: border-box;\n  display: flex;\n  flex-direction: column;\n  gap: 7px;\n  border: 0;\n  border-radius: 0;\n  background: transparent;\n  margin-bottom: 14px;\n  padding: 0;\n  color: #303136;\n  font-size: 14px;\n  font-weight: 400;\n  line-height: 1.2;\n}\n\n.shared-checkout-v2-email-field.is-disabled {\n  cursor: default;\n}\n\n.shared-checkout-v2-email-label {\n  padding: 0 14px;\n  color: #303136;\n  font-size: 14px;\n  font-weight: 400;\n  line-height: 1.2;\n}\n\n.shared-checkout-v2-email-control {\n  min-height: 50px;\n  box-sizing: border-box;\n  display: flex;\n  align-items: center;\n  border: 1px solid #dedede;\n  background: #fff;\n  box-shadow: 0 1px 2px rgb(16 24 40 / 8%);\n  padding: 0 14px;\n}\n\n.shared-checkout-v2-email-input {\n  width: 100%;\n  min-height: 48px;\n  box-sizing: border-box;\n  border: 0;\n  background: transparent;\n  padding: 0;\n  color: #303136;\n  font: inherit;\n  font-size: 18px;\n  font-weight: 400;\n  line-height: 1.2;\n  outline: none;\n}\n\n.shared-checkout-v2-email-input:disabled {\n  color: #74767c;\n  opacity: 1;\n  -webkit-text-fill-color: #74767c;\n}\n\n.shared-checkout-v2-email-input::placeholder {\n  color: #8c909a;\n}\n\n.shared-checkout-v2-card-box {\n  overflow: visible;\n  border: 0;\n  border-radius: 6px;\n  background: transparent;\n  box-shadow: none;\n}\n\n.shared-checkout-v2-country-field {\n  box-sizing: border-box;\n  display: flex;\n  flex-direction: column;\n  gap: 7px;\n  margin: 14px 0 0;\n  color: #303136;\n  font-size: 14px;\n  font-weight: 400;\n  line-height: 1.2;\n}\n\n.shared-checkout-v2-country-label {\n  padding: 0 14px;\n}\n\n.shared-checkout-v2-country-control {\n  position: relative;\n  display: block;\n}\n\n.shared-checkout-v2-country-control::after {\n  position: absolute;\n  right: 17px;\n  top: 50%;\n  width: 8px;\n  height: 8px;\n  border-right: 2px solid #6f7380;\n  border-bottom: 2px solid #6f7380;\n  content: '';\n  pointer-events: none;\n  transform: translateY(-65%) rotate(45deg);\n}\n\n.shared-checkout-v2-country-select {\n  width: 100%;\n  min-height: 50px;\n  box-sizing: border-box;\n  appearance: none;\n  border: 1px solid #dedede;\n  border-radius: 0;\n  background: #fff;\n  box-shadow: 0 1px 2px rgb(16 24 40 / 8%);\n  color: #303136;\n  font: inherit;\n  font-size: 18px;\n  font-weight: 400;\n  line-height: 1.2;\n  outline: none;\n  padding: 0 44px 0 14px;\n}\n\n.shared-checkout-v2-error {\n  margin: 0;\n  color: #c43737;\n  font-size: 13px;\n  font-weight: 600;\n  line-height: 1.35;\n}\n\n.shared-checkout-v2-card-submit {\n  min-height: 60px;\n  border: 0;\n  border-radius: 11px;\n  background: var(--shared-checkout-v2-button-color);\n  color: #fff;\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  gap: 14px;\n  font-size: 22px;\n  font-weight: 900;\n  line-height: 1;\n  letter-spacing: 0;\n  cursor: pointer;\n}\n\n.shared-checkout-v2-card-submit:disabled {\n  cursor: wait;\n  opacity: 0.72;\n}\n\n.shared-checkout-v2-card-submit-icon {\n  width: 26px;\n  height: 26px;\n}\n\n.shared-checkout-v2-card-brands {\n  min-height: 34px;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  gap: 12px;\n  opacity: 0.95;\n}\n\n.shared-checkout-v2-card-brand {\n  width: 42px;\n  height: 25px;\n}\n\n.shared-checkout-v2-secure-pill--card {\n  position: absolute;\n  left: 50%;\n  bottom: 16px;\n  transform: translateX(-50%);\n  white-space: nowrap;\n}\n\n.shared-checkout-v2-sr-only {\n  position: absolute;\n  width: 1px;\n  height: 1px;\n  padding: 0;\n  margin: -1px;\n  overflow: hidden;\n  clip: rect(0, 0, 0, 0);\n  white-space: nowrap;\n  border: 0;\n}\n\n.shared-checkout-special-offer-overlay {\n  position: fixed;\n  inset: 0;\n  z-index: 120;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  box-sizing: border-box;\n  padding: 22px;\n  background: rgb(0 0 0 / 48%);\n}\n\n.shared-checkout-special-offer-dialog {\n  width: min(100%, 386px);\n  box-sizing: border-box;\n  border-radius: 14px;\n  background: #fff;\n  padding: 55px 26px 28px;\n  color: #303136;\n  text-align: center;\n  font-family: Inter, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;\n}\n\n.shared-checkout-special-offer-gift {\n  display: block;\n  width: min(100%, 260px);\n  height: auto;\n  margin: 0 auto 22px;\n}\n\n.shared-checkout-special-offer-gift--image {\n  position: relative;\n  width: min(100%, 250px);\n  aspect-ratio: 1;\n}\n\n.shared-checkout-special-offer-gift-image {\n  display: block;\n  width: 100%;\n  height: 100%;\n  background-position: center;\n  background-repeat: no-repeat;\n  background-size: contain;\n  user-select: none;\n}\n\n.shared-checkout-special-offer-image-discount {\n  position: absolute;\n  top: 69%;\n  left: 50%;\n  transform: translate(-50%, -50%);\n  color: #1f8f4d;\n  font-family: Inter, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;\n  font-size: 34px;\n  font-weight: 900;\n  line-height: 1;\n  letter-spacing: 0;\n  pointer-events: none;\n  white-space: nowrap;\n}\n\n.shared-checkout-special-offer-dialog h2 {\n  margin: 0;\n  color: #303136;\n  font-size: 36px;\n  font-weight: 900;\n  line-height: 1.1;\n  letter-spacing: 0;\n}\n\n.shared-checkout-special-offer-dialog p {\n  margin: 26px 0 32px;\n  color: #77787e;\n  font-size: 24px;\n  font-weight: 500;\n  line-height: 1.18;\n  letter-spacing: 0;\n}\n\n.shared-checkout-special-offer-button {\n  width: 100%;\n  min-height: 76px;\n  border: 0;\n  border-radius: 12px;\n  background: var(--shared-checkout-v2-button-color);\n  color: #fff;\n  font-size: 23px;\n  font-weight: 900;\n  line-height: 1;\n  letter-spacing: 0;\n  cursor: pointer;\n}\n\n@media (max-width: 429px) {\n  .shared-checkout-v2-header {\n    min-height: 64px;\n  }\n\n  .shared-checkout-v2-header h2 {\n    font-size: 24px;\n  }\n\n  .shared-checkout-v2-summary {\n    padding-inline: 17px;\n  }\n\n  .shared-checkout-v2-satisfaction {\n    font-size: 19px;\n  }\n\n  .shared-checkout-v2-methods {\n    gap: 42px;\n  }\n\n  .shared-checkout-v2-method strong {\n    font-size: 19px;\n  }\n\n  .shared-checkout-v2-card-panel {\n    padding-inline: 32px;\n  }\n}\n\n.shared-checkout-v2-inline { width: 100%; min-width: 0; }\n.shared-checkout-v2-inline .shared-checkout-v2-shell {\n  height: auto; max-height: none; overflow: visible; background: #fff; color: #303136;\n}\n.shared-checkout-v2-inline .shared-checkout-v2-shell .shared-checkout-v2-payment {\n  padding: 0; margin: 0; background: #fff;\n}\n.shared-checkout-v2-inline .shared-checkout-v2-card-submit {\n  border-radius: 12px; background: var(--shared-checkout-v2-button-color); text-transform: none;\n}\n\n.shared-checkout-v2-inline .shared-checkout-v2-card-panel {\n  margin: 0; padding: 0; background: #fff;\n}\n.shared-checkout-v2-inline .shared-checkout-v2-email-control { border-radius: 12px; }\n.shared-checkout-v2-inline .shared-checkout-v2-email-input { font-size: 14px; }\n.shared-checkout-v2-inline .shared-checkout-v2-secure-pill { font-size: 11px; min-height: 32px; position: static; transform: none; align-self: center; white-space: normal; }\n";

package/dist/providers/stripe/components/SharedStripeCheckoutV2.styles.js

@@ -778,4 +778,22 @@ export const sharedStripeCheckoutV2Styles = `
     padding-inline: 32px;
   }
 }
+
+.shared-checkout-v2-inline { width: 100%; min-width: 0; }
+.shared-checkout-v2-inline .shared-checkout-v2-shell {
+  height: auto; max-height: none; overflow: visible; background: #fff; color: #303136;
+}
+.shared-checkout-v2-inline .shared-checkout-v2-shell .shared-checkout-v2-payment {
+  padding: 0; margin: 0; background: #fff;
+}
+.shared-checkout-v2-inline .shared-checkout-v2-card-submit {
+  border-radius: 12px; background: var(--shared-checkout-v2-button-color); text-transform: none;
+}
+
+.shared-checkout-v2-inline .shared-checkout-v2-card-panel {
+  margin: 0; padding: 0; background: #fff;
+}
+.shared-checkout-v2-inline .shared-checkout-v2-email-control { border-radius: 12px; }
+.shared-checkout-v2-inline .shared-checkout-v2-email-input { font-size: 14px; }
+.shared-checkout-v2-inline .shared-checkout-v2-secure-pill { font-size: 11px; min-height: 32px; position: static; transform: none; align-self: center; white-space: normal; }
 `;

package/dist/providers/stripe/components/SharedStripeCheckoutV2Dialog.d.ts

@@ -60,6 +60,8 @@ export type SharedStripeCheckoutV2DialogProps = {
     originalPriceLabel: string;
     originalPriceValue: string;
     variant?: 'standard' | 'compact';
+    /** Embed a card-only form in the host page; the host owns offer presentation. */
+    presentation?: 'dialog' | 'inline';
 };
 export type SharedCheckoutSpecialOfferDialogProps = {
     buttonColor: string;
@@ -72,5 +74,5 @@ export type SharedCheckoutSpecialOfferDialogProps = {
     themeColor: string;
     title: string;
 };
-export declare function SharedStripeCheckoutV2Dialog({ checkoutAnalytics, checkoutSessionId, clientSecret, onClose, stripePromise, supportedCountries, variant, ...props }: SharedStripeCheckoutV2DialogProps): import("react/jsx-runtime").JSX.Element;
+export declare function SharedStripeCheckoutV2Dialog({ checkoutAnalytics, checkoutSessionId, clientSecret, onClose, stripePromise, supportedCountries, variant, presentation, ...props }: SharedStripeCheckoutV2DialogProps): import("react/jsx-runtime").JSX.Element;
 export declare function SharedCheckoutSpecialOfferDialog({ buttonColor, buttonLabel, description, discountLabel, imageAlt, imageSrc, onAccept, themeColor, title, }: SharedCheckoutSpecialOfferDialogProps): import("react/jsx-runtime").JSX.Element;

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

@@ -59,7 +59,7 @@ function CheckoutSessionProvider({ children, clientSecret, fixedBillingCountry,
     return (_jsx(CheckoutProvider, { stripe: stripePromise, options: checkoutProviderOptions, children: providerChildren }, clientSecret));
 }
 export function SharedStripeCheckoutV2Dialog(_a) {
-    var { checkoutAnalytics, checkoutSessionId, clientSecret, onClose, stripePromise, supportedCountries, variant = 'standard' } = _a, props = __rest(_a, ["checkoutAnalytics", "checkoutSessionId", "clientSecret", "onClose", "stripePromise", "supportedCountries", "variant"]);
+    var { checkoutAnalytics, checkoutSessionId, clientSecret, onClose, stripePromise, supportedCountries, variant = 'standard', presentation = 'dialog' } = _a, props = __rest(_a, ["checkoutAnalytics", "checkoutSessionId", "clientSecret", "onClose", "stripePromise", "supportedCountries", "variant", "presentation"]);
     const normalizedSupportedCountries = useMemo(() => normalizeSupportedCheckoutCountries(supportedCountries), [supportedCountries]);
     const fixedBillingCountry = getFixedSupportedBillingCountry(normalizedSupportedCountries);
     const handleClose = useCallback(() => {
@@ -80,6 +80,8 @@ export function SharedStripeCheckoutV2Dialog(_a) {
         queueStripeSubscriptionCheckoutStarted(Object.assign(Object.assign({}, checkoutAnalytics), { checkoutSessionId, checkoutStartSource: 'card_form_open', paymentMethod: 'card' }));
     }, [checkoutAnalytics, checkoutSessionId]);
     useEffect(() => {
+        if (presentation === 'inline')
+            return;
         const handleKeyDown = (event) => {
             if (event.key === 'Escape') {
                 handleClose();
@@ -87,8 +89,8 @@ export function SharedStripeCheckoutV2Dialog(_a) {
         };
         window.addEventListener('keydown', handleKeyDown);
         return () => window.removeEventListener('keydown', handleKeyDown);
-    }, [handleClose]);
-    return (_jsxs(_Fragment, { children: [_jsx("div", { className: 'shared-checkout-v2-overlay', children: _jsx("div", { className: 'shared-checkout-v2-dialog', "data-variant": variant, role: 'dialog', "aria-modal": 'true', "aria-labelledby": 'shared-checkout-v2-title', children: _jsx(CheckoutSessionProvider, { clientSecret: clientSecret, fixedBillingCountry: fixedBillingCountry, stripePromise: stripePromise, variant: variant, children: _jsx(SharedStripeCheckoutV2CheckoutSessionForm, Object.assign({}, props, { checkoutAnalytics: checkoutAnalytics, checkoutSessionId: checkoutSessionId, clientSecret: clientSecret, onClose: handleClose, supportedCountries: normalizedSupportedCountries, variant: variant })) }) }) }), _jsx("style", { children: sharedStripeCheckoutV2Styles })] }));
+    }, [handleClose, presentation]);
+    return (_jsxs(_Fragment, { children: [_jsx("div", { className: presentation === 'inline' ? 'shared-checkout-v2-inline' : 'shared-checkout-v2-overlay', children: _jsx("div", { className: presentation === 'inline' ? undefined : 'shared-checkout-v2-dialog', "data-variant": variant, role: presentation === 'dialog' ? 'dialog' : 'region', "aria-modal": presentation === 'dialog' ? true : undefined, "aria-labelledby": presentation === 'dialog' ? 'shared-checkout-v2-title' : undefined, "aria-label": presentation === 'inline' ? props.title : undefined, children: _jsx(CheckoutSessionProvider, { clientSecret: clientSecret, fixedBillingCountry: fixedBillingCountry, stripePromise: stripePromise, variant: variant, children: _jsx(SharedStripeCheckoutV2CheckoutSessionForm, Object.assign({}, props, { presentation: presentation, checkoutAnalytics: checkoutAnalytics, checkoutSessionId: checkoutSessionId, clientSecret: clientSecret, onClose: handleClose, supportedCountries: normalizedSupportedCountries, variant: variant })) }) }) }), _jsx("style", { children: sharedStripeCheckoutV2Styles })] }));
 }
 function SharedCheckoutSpecialOfferGift({ discountLabel, imageAlt, imageSrc, }) {
     if (imageSrc) {

package/dist/providers/stripe/components/SharedStripeCheckoutV2Form.internal.d.ts

@@ -3,5 +3,5 @@ export declare const getFixedSupportedBillingCountry: (supportedCountries: reado
 type SharedStripeCheckoutV2FormProps = Omit<SharedStripeCheckoutV2DialogProps, 'stripePromise' | 'onClose'> & {
     onClose: () => void;
 };
-export declare function SharedStripeCheckoutV2CheckoutSessionForm({ copy, amountCents, buttonColor, cardSubmitLabel, closeAriaLabel, countdownLabel, checkoutAnalytics, checkoutSessionId, customerEmail, customerEmailEditable: allowEmailEditing, customerEmailLabel, customerEmailPlaceholder, customerEmailInvalidMessage, customerName, discountAmountLabel, discountLabel, discountPercent, initialWalletAvailable, onClose, onCustomerEmailChange, onCustomerEmailCommit, onError, onInactiveCheckoutSession, onPaymentInfoSubmitted, onSuccess, paymentMethodLabels, promoActive, processingLabel, promoCode, promoCodeLabel, remainingSeconds, returnUrl, savedLabel, secureLabel, satisfactionLabel, satisfactionPercent, summaryLabel, supportedCountries, themeColor, title, totalLabel, totalValue, unsupportedCountryMessage, walletButtonLabel, originalPriceLabel, originalPriceValue, variant, }: SharedStripeCheckoutV2FormProps): import("react/jsx-runtime").JSX.Element;
+export declare function SharedStripeCheckoutV2CheckoutSessionForm({ copy, amountCents, buttonColor, cardSubmitLabel, closeAriaLabel, countdownLabel, checkoutAnalytics, checkoutSessionId, customerEmail, customerEmailEditable: allowEmailEditing, customerEmailLabel, customerEmailPlaceholder, customerEmailInvalidMessage, customerName, discountAmountLabel, discountLabel, discountPercent, initialWalletAvailable, onClose, onCustomerEmailChange, onCustomerEmailCommit, onError, onInactiveCheckoutSession, onPaymentInfoSubmitted, onSuccess, paymentMethodLabels, promoActive, processingLabel, promoCode, promoCodeLabel, remainingSeconds, returnUrl, savedLabel, secureLabel, satisfactionLabel, satisfactionPercent, summaryLabel, supportedCountries, themeColor, title, totalLabel, totalValue, unsupportedCountryMessage, walletButtonLabel, originalPriceLabel, originalPriceValue, variant, presentation, }: SharedStripeCheckoutV2FormProps): import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/providers/stripe/components/SharedStripeCheckoutV2Form.internal.js

@@ -1,5 +1,5 @@
 'use client';
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import { completePaywallCheckout } from '@funnelsgrove/runtime';
 import { useEffect, useMemo, useRef, useState } from 'react';
 import { PaymentElement, useCheckout } from '@stripe/react-stripe-js/checkout';
@@ -22,7 +22,7 @@ function getFriendlyCardErrorMessage(error, fallback) {
         ? error.message
         : fallback;
 }
-export function SharedStripeCheckoutV2CheckoutSessionForm({ copy = defaultCheckoutV2Copy, amountCents, buttonColor, cardSubmitLabel, closeAriaLabel, countdownLabel, checkoutAnalytics, checkoutSessionId, customerEmail, customerEmailEditable: allowEmailEditing = false, customerEmailLabel = 'Email', customerEmailPlaceholder = 'Enter your email', customerEmailInvalidMessage = 'Enter a valid email address.', customerName, discountAmountLabel, discountLabel, discountPercent, initialWalletAvailable, onClose, onCustomerEmailChange, onCustomerEmailCommit, onError, onInactiveCheckoutSession, onPaymentInfoSubmitted, onSuccess, paymentMethodLabels = defaultPaymentMethodLabels, promoActive, processingLabel, promoCode, promoCodeLabel, remainingSeconds, returnUrl, savedLabel, secureLabel, satisfactionLabel, satisfactionPercent, summaryLabel, supportedCountries, themeColor, title, totalLabel, totalValue, unsupportedCountryMessage, walletButtonLabel, originalPriceLabel, originalPriceValue, variant = 'standard', }) {
+export function SharedStripeCheckoutV2CheckoutSessionForm({ copy = defaultCheckoutV2Copy, amountCents, buttonColor, cardSubmitLabel, closeAriaLabel, countdownLabel, checkoutAnalytics, checkoutSessionId, customerEmail, customerEmailEditable: allowEmailEditing = false, customerEmailLabel = 'Email', customerEmailPlaceholder = 'Enter your email', customerEmailInvalidMessage = 'Enter a valid email address.', customerName, discountAmountLabel, discountLabel, discountPercent, initialWalletAvailable, onClose, onCustomerEmailChange, onCustomerEmailCommit, onError, onInactiveCheckoutSession, onPaymentInfoSubmitted, onSuccess, paymentMethodLabels = defaultPaymentMethodLabels, promoActive, processingLabel, promoCode, promoCodeLabel, remainingSeconds, returnUrl, savedLabel, secureLabel, satisfactionLabel, satisfactionPercent, summaryLabel, supportedCountries, themeColor, title, totalLabel, totalValue, unsupportedCountryMessage, walletButtonLabel, originalPriceLabel, originalPriceValue, variant = 'standard', presentation = 'dialog', }) {
     const checkoutState = useCheckout();
     const walletPaymentMethods = usePlatformWalletPaymentMethods();
     const [selectedMethod, setSelectedMethod] = useState('wallet');
@@ -64,10 +64,11 @@ export function SharedStripeCheckoutV2CheckoutSessionForm({ copy = defaultChecko
     const walletAriaLabel = walletPaymentMethods
         .map((method) => method === 'applePay' ? walletButtonLabel : 'Google Pay')
         .join(' / ');
-    const showWalletMethod = effectiveWalletAvailable !== false && walletPaymentMethods.length > 0;
-    const effectiveSelectedMethod = showWalletMethod && selectedMethod === 'wallet'
-        && !emailSessionChanged && isValidEmail(initialCustomerEmail) && rejectedEmail === null
-        && resolvedCustomerEmail === initialCustomerEmail ? 'wallet' : 'card';
+    const walletEmailReady = !emailSessionChanged && isValidEmail(initialCustomerEmail)
+        && rejectedEmail === null && resolvedCustomerEmail === initialCustomerEmail;
+    const showWalletMethod = presentation !== 'inline' && walletEmailReady
+        && effectiveWalletAvailable !== false && walletPaymentMethods.length > 0;
+    const effectiveSelectedMethod = showWalletMethod && selectedMethod === 'wallet' ? 'wallet' : 'card';
     const expressCheckoutOptions = useMemo(() => {
         return {
             buttonHeight: 55,
@@ -262,7 +263,7 @@ export function SharedStripeCheckoutV2CheckoutSessionForm({ copy = defaultChecko
         return _jsxs("form", { onSubmit: handleSubmit, className: 'bg-background text-foreground p-6', children: [_jsx("p", { role: error ? 'alert' : 'status', children: error || copy.verifyingPayment }), _jsx("button", { type: 'submit', disabled: submitting, className: 'bg-accent text-foreground border-border rounded border p-3', children: copy.checkPaymentStatus })] });
     if (completed)
         return _jsx("div", { role: 'status', className: 'bg-background text-foreground p-6', children: copy.paymentConfirmed });
-    return (_jsxs("div", { className: 'shared-checkout-v2-shell', "data-variant": variant, style: checkoutStyle, children: [_jsxs("header", { className: 'shared-checkout-v2-header', children: [_jsx("button", { type: 'button', className: 'shared-checkout-v2-close', onClick: onClose, "aria-label": closeAriaLabel, children: _jsx("span", { "aria-hidden": 'true' }) }), _jsx("h2", { id: 'shared-checkout-v2-title', children: title })] }), _jsx(SharedStripeCheckoutV2Summary, { countdownUnit: copy.countdownUnit, discountPercent, countdownLabel, remainingSeconds, variant, satisfactionPercent, satisfactionLabel, originalPriceLabel, originalPriceValue, discountLabel, discountAmountLabel, promoCodeLabel, promoCode, totalLabel, totalValue, savedLabel, showPromo }), _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": copy.paymentMethodLabel, children: [_jsxs("button", { type: 'button', className: [
+    return (_jsxs("div", { className: 'shared-checkout-v2-shell', "data-variant": variant, style: checkoutStyle, children: [presentation === 'dialog' ? _jsxs(_Fragment, { children: [_jsxs("header", { className: 'shared-checkout-v2-header', children: [_jsx("button", { type: 'button', className: 'shared-checkout-v2-close', onClick: onClose, "aria-label": closeAriaLabel, children: _jsx("span", { "aria-hidden": 'true' }) }), _jsx("h2", { id: 'shared-checkout-v2-title', children: title })] }), _jsx(SharedStripeCheckoutV2Summary, { countdownUnit: copy.countdownUnit, discountPercent, countdownLabel, remainingSeconds, variant, satisfactionPercent, satisfactionLabel, originalPriceLabel, originalPriceValue, discountLabel, discountAmountLabel, promoCodeLabel, promoCode, totalLabel, totalValue, savedLabel, showPromo })] }) : 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": copy.paymentMethodLabel, children: [_jsxs("button", { type: 'button', className: [
                                     'shared-checkout-v2-method',
                                     effectiveSelectedMethod === 'wallet' ? 'is-selected' : '',
                                 ]
@@ -272,12 +273,12 @@ export function SharedStripeCheckoutV2CheckoutSessionForm({ copy = defaultChecko
                                     effectiveSelectedMethod === 'card' ? 'is-selected' : '',
                                 ]
                                     .filter(Boolean)
-                                    .join(' '), onClick: selectCardMethod, role: 'tab', "aria-selected": effectiveSelectedMethod === 'card', children: [_jsx("strong", { children: copy.cardLabel }), _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: [
+                                    .join(' '), onClick: selectCardMethod, role: 'tab', "aria-selected": effectiveSelectedMethod === 'card', children: [_jsx("strong", { children: copy.cardLabel }), _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, presentation === 'dialog' ? _jsxs("div", { hidden: effectiveSelectedMethod !== 'wallet', className: [
                             'shared-checkout-v2-wallet-panel',
                             effectiveSelectedMethod === 'wallet' ? 'is-visible' : '',
                         ]
                             .filter(Boolean)
-                            .join(' '), children: [_jsxs("p", { className: 'shared-checkout-v2-secure-pill', children: [_jsx(SecurityLockIcon, { className: 'shared-checkout-v2-secure-pill-icon' }), secureLabel] }), _jsxs("div", { className: 'shared-checkout-v2-wallet-shell', "aria-label": walletAriaLabel, children: [_jsx(StripeCheckoutExpressCheckoutButton, { amountCents: amountCents, availabilityPaymentMethods: walletPaymentMethods, beforeConfirm: ensureCustomerEmail, checkoutAnalytics: checkoutAnalytics, checkoutSessionId: checkoutSessionId, className: 'shared-checkout-v2-express-buttons', confirmEmail: false, customerEmail: resolvedCustomerEmail, customerName: customerName, initialAvailable: initialWalletAvailable, keepInitialAvailableOnReady: initialWalletAvailable === true, onAvailabilityChange: handleWalletAvailabilityChange, onError: (message) => setSharedError(message, true), onPaymentInfoSubmitted: onPaymentInfoSubmitted, onPaymentRejected: () => setSelectedMethod('card'), onSuccess: () => trackCheckoutSuccess(), onEmbeddedComplete: () => setCompleted(true), onVerificationPending: () => setProviderConfirmed(true), options: expressCheckoutOptions, returnUrl: returnUrl, summaryLabel: expressCheckoutSummaryLabel, supportedCountries: normalizedSupportedCountries, unsupportedCountryMessage: unsupportedCountryMessage }), _jsx("span", { className: 'shared-checkout-v2-sr-only', children: walletAriaLabel })] })] }), _jsxs("div", { hidden: effectiveSelectedMethod !== 'card', className: [
+                            .join(' '), children: [_jsxs("p", { className: 'shared-checkout-v2-secure-pill', children: [_jsx(SecurityLockIcon, { className: 'shared-checkout-v2-secure-pill-icon' }), secureLabel] }), _jsxs("div", { className: 'shared-checkout-v2-wallet-shell', "aria-label": walletAriaLabel, children: [_jsx(StripeCheckoutExpressCheckoutButton, { amountCents: amountCents, availabilityPaymentMethods: walletPaymentMethods, beforeConfirm: ensureCustomerEmail, checkoutAnalytics: checkoutAnalytics, checkoutSessionId: checkoutSessionId, className: 'shared-checkout-v2-express-buttons', confirmEmail: false, customerEmail: resolvedCustomerEmail, customerName: customerName, initialAvailable: initialWalletAvailable, keepInitialAvailableOnReady: initialWalletAvailable === true, onAvailabilityChange: handleWalletAvailabilityChange, onError: (message) => setSharedError(message, true), onPaymentInfoSubmitted: onPaymentInfoSubmitted, onPaymentRejected: () => setSelectedMethod('card'), onSuccess: () => trackCheckoutSuccess(), onEmbeddedComplete: () => setCompleted(true), onVerificationPending: () => setProviderConfirmed(true), options: expressCheckoutOptions, returnUrl: returnUrl, summaryLabel: expressCheckoutSummaryLabel, supportedCountries: normalizedSupportedCountries, unsupportedCountryMessage: unsupportedCountryMessage }), _jsx("span", { className: 'shared-checkout-v2-sr-only', children: walletAriaLabel })] })] }) : null, _jsxs("div", { hidden: effectiveSelectedMethod !== 'card', className: [
                             'shared-checkout-v2-card-panel',
                             effectiveSelectedMethod === 'card' ? 'is-visible' : '',
                         ]

package/package.json

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