Membership Checkout

What this section does

Takes the card and starts a membership subscription

Where it goes

• Can be used at most 1 time(s) on one page.
• This section comes with the Membership Tiers & Subscriptions plugin.

Styles

Different looks for the same section. You can change the style later; your content stays as it is.

The first 2 styles of every section are open on every store. The rest unlock with the Page Editor plugin — all at once, not style by style.

• Classic

  Freeclassic

  One centred column: plan summary on top, labelled card fields below, full-width button

  Specific to this style: title, subtitle, submitText, benefitsTitle, secureNoticeText, backToTiersText, showPlanSummary, showBenefits, showCardPreview, showSecureNotice, showTrustBadges, showBackToTiers, showIntervalSwitch, panelBg, panelBorderColor, priceColor, accentColor, submitBg, submitTextColor, cardPreviewStyle, fieldLabelStyle, editorPreviewState, authGateVariant, authGateIcon, authGateTone, authGateTitle, authGateDescription, authGateCtaLabel, authGateShowRegister, authGateBenefits

• Split Summary

  Freesplit-summary

  Two columns: a tinted panel with plan, price and benefits beside the card form

  Specific to this style: title, subtitle, submitText, benefitsTitle, secureNoticeText, backToTiersText, showPlanSummary, showBenefits, showCardPreview, showSecureNotice, showTrustBadges, showBackToTiers, showIntervalSwitch, panelBg, panelBorderColor, priceColor, accentColor, submitBg, submitTextColor, cardPreviewStyle, fieldLabelStyle, editorPreviewState, authGateVariant, authGateIcon, authGateTone, authGateTitle, authGateDescription, authGateCtaLabel, authGateShowRegister, authGateBenefits

• Card Preview

  Page Editorcard-preview

  A large 3D card that fills in as they type and flips to the CVC side, form underneath

  Specific to this style: title, subtitle, submitText, benefitsTitle, secureNoticeText, backToTiersText, showPlanSummary, showBenefits, showCardPreview, showSecureNotice, showTrustBadges, showBackToTiers, showIntervalSwitch, panelBg, panelBorderColor, priceColor, accentColor, submitBg, submitTextColor, cardPreviewStyle, fieldLabelStyle, editorPreviewState, authGateVariant, authGateIcon, authGateTone, authGateTitle, authGateDescription, authGateCtaLabel, authGateShowRegister, authGateBenefits

• Stepper

  Page Editorstepper

  Two numbered steps — confirm the plan, then pay — with a progress rail

  Specific to this style: title, subtitle, submitText, benefitsTitle, secureNoticeText, backToTiersText, showPlanSummary, showBenefits, showCardPreview, showSecureNotice, showTrustBadges, showBackToTiers, showIntervalSwitch, panelBg, panelBorderColor, priceColor, accentColor, submitBg, submitTextColor, cardPreviewStyle, fieldLabelStyle, editorPreviewState, authGateVariant, authGateIcon, authGateTone, authGateTitle, authGateDescription, authGateCtaLabel, authGateShowRegister, authGateBenefits

• Minimal

  Page Editorminimal

  Narrow single column, floating labels, number / expiry / CVC fused into one bordered group

  Specific to this style: title, subtitle, submitText, benefitsTitle, secureNoticeText, backToTiersText, showPlanSummary, showBenefits, showCardPreview, showSecureNotice, showTrustBadges, showBackToTiers, showIntervalSwitch, panelBg, panelBorderColor, priceColor, accentColor, submitBg, submitTextColor, cardPreviewStyle, fieldLabelStyle, editorPreviewState, authGateVariant, authGateIcon, authGateTone, authGateTitle, authGateDescription, authGateCtaLabel, authGateShowRegister, authGateBenefits

• Premium Dark

  Page Editorpremium-dark

  An inverted panel with an oversized price, hairline rules and a raked glass card tile

  Specific to this style: title, subtitle, submitText, benefitsTitle, secureNoticeText, backToTiersText, showPlanSummary, showBenefits, showCardPreview, showSecureNotice, showTrustBadges, showBackToTiers, showIntervalSwitch, panelBg, panelBorderColor, priceColor, accentColor, submitBg, submitTextColor, cardPreviewStyle, fieldLabelStyle, editorPreviewState, authGateVariant, authGateIcon, authGateTone, authGateTitle, authGateDescription, authGateCtaLabel, authGateShowRegister, authGateBenefits

Settings

The fields you see in the Section Settings panel on the right when this section is selected.

Shared by every style

• bg
• contentMaxWidth
• sectionMaxWidth
• horizontalPadding
• verticalPadding
• verticalAlignment
• horizontalAlignment
• horizontalMargin
• verticalMargin
• spacingOverrides
• animationType
• animationDuration
• animationDelay
• animationEasing
• animationStagger
• animationRepeat
• animationParallax
• imageParallax
• animationScrollEffect
• height