checkoutWithDiscountedIntro

Figma: View design

Should be used after a PwyW template, such as [PwywWithPersonalizedProfile](Onboarding Templates/PwywWithPersonalizedProfile).

Example of a checkoutWithDiscountedIntro step

{
    "type": "checkoutWithDiscountedIntro",
    "stepId": "checkout_discount_intro",
    "backgroundColor": "#F1F3F5",
    "planCode": "fab-subs-monthly-normal-intro-19-thirtynine",
    "discountOfferPlanCode": "fab-subs-monthly-discount-intro-14-thirtynine",
    "textColor": "#14191D",
    "secondaryColor": "#7A90A3",
    "footerImageUrl": "https://c.thefab.co/web-onboarding/fabulous/pay-safe.svg",
    "timer": {
        "type": "with-logo",
        "textColor": "#14191D",
        "backgroundColor": "white",
        "buttonBackgroundColor": "#07CB99",
        "buttonColor": "white",
        "boxShadow": "0px 0px 22px 0px #E8EAED",
        "logoUrl": "https://c.thefab.co/web-onboarding/fabulous/fabulous-logo.svg",
        "buttonHoverBackgroundColor": "#23B892"
    },
    "form": {
        "placeholderColor": "#7A90A3",
        "inputColor": "#14191d",
        "inputBorderColor": "#FFFFFF",
        "ctaBackgroundColor": "#07CB99",
        "ctaTextColor": "white",
        "noCommitmentsTextColor": "#4F6171",
        "inputBackgroundColor": "white",
        "ctaText": "Get my plan"
    },
    "planDetails": {
        "title": "Join <span style='color:#07CB99;'>50,000,000</span> users to achieve your goals",
        "textColor": "#14191D",
        "subtitleColor": "#7A90A3",
        "hrColor": "#C5CED6",
        "discountColor": "#F23160",
        "backgroundColor": "#FFFFFF",
        "discountTimer": {
            "iconUrl": "https://c.thefab.co/web-onboarding/fabulous/icon/ic_discount-timer.svg",
            "textColor": "#B2002B",
            "backgroundColor": "#FEE8EE"
        },
        "closeIconColor": "#C5CED6",
        "useHTML": true
    },
    "tabs": {
        "activeTextColor": "white",
        "textColor": "#4F6171",
        "activeBackgroundColor": "#130A7E",
        "backgroundColor": "#FFFFFF"
    },
    "terms": {
        "type": "with-plan-details",
        "linkColor": "#2C5FFF",
        "backgroundColor": "white",
        "textColor": "#4F6171"
    },
    "discountModal": {
        "imageUrl": "https://c.thefab.co/web-onboarding/fabulous/img_skip_diagram_min.webp",
        "useHTML": true,
        "styles": {
            "backgroundColor": "white",
            "textColor": "#4F6171",
            "titleColor": "#14191D",
            "ctaTextColor": "white",
            "ctaBackgroundColor": "#3428C6",
            "overlayColor": "rgba(21, 21, 39, 0.6)",
            "ctaHoverBackgroundColor": "#251C93",
            "discountColor": "#FF634E"
        }
    },
    "postPurchaseParams": {
        "upsellFlowId": "fabulous_upsell_bundle_5apps_49_skip_pdf_expert_pathahead2"
    }
}

Key	Notes
type	checkoutWithDiscountedIntro
backgroundColor
textColor
secondaryColor
planCode	The default step plan
discountOfferPlanCode	The steps’ default discounted plan
> [!IMPORTANT] Both planCode and discountOfferPlanCode should be added to the step; however, since this template comes after the user selects a plan on the [PwywWithPersonalizedProfile](Onboarding Templates/PwywWithPersonalizedProfile) step, the plans will be used based on the user’s selection.
timer	{     "type": "with-logo",     "textColor": "#14191D",     "backgroundColor": "white",     "buttonBackgroundColor": "#07CB99",     "buttonColor": "white",     "boxShadow": "0px 0px 22px 0px #E8EAED",     "logoUrl": "https://c.thefab.co/web-onboarding/fabulous/fabulous-logo.svg",     "buttonHoverBackgroundColor": "#23B892" }
planDetails	"planDetails": {     "title": "Join <span style='color:#07CB99;'>50,000,000</span> users to achieve your goals",     "textColor": "#14191D",     "subtitleColor": "#7A90A3",     "hrColor": "#C5CED6",     "discountColor": "#F23160",     "backgroundColor": "#FFFFFF",     "discountTimer": {         "iconUrl": "https://c.thefab.co/web-onboarding/fabulous/icon/ic_discount-timer.svg",         "textColor": "#B2002B",         "backgroundColor": "#FEE8EE"     },     "closeIconColor": "#C5CED6",     "useHTML": true }
discountModal	The modal that shows up when the user clicks the close icon in the planDetails section: "discountModal": {     "imageUrl": "https://c.thefab.co/web-onboarding/fabulous/img_skip_diagram_min.webp",     "useHTML": true,     "styles": {         "backgroundColor": "white",         "textColor": "#4F6171",         "titleColor": "#14191D",         "ctaTextColor": "white",         "ctaBackgroundColor": "#3428C6",         "overlayColor": "rgba(21, 21, 39, 0.6)",         "ctaHoverBackgroundColor": "#251C93",         "discountColor": "#FF634E"     } } > [!IMPORTANT] discountModal accepts optional title, subtitle, and footerText keys to change the default values when needed.
footerImageUrl	An image that can be added at the bottom of the page:
form, tabs, terms, and postPurchaseParams	They can be found in [Checkout](Onboarding Templates/Checkout).