Skip to content
  • Billing
  • Billing user experience

Customize the plan sign-up experience

There are three ways you can allow customers to sign up to a plan.

Option 1: Use your own plan selection screen

Link to this section

Display a plan selection screen in your own app or website. Once the user selects a plan, redirect them to Kinde to complete the payment flow. To pre-select a plan, pass the plan_interest query parameter in the Kinde authentication URL.

Option 2: Use Kinde’s built-in plan selection

Link to this section

Let Kinde handle plan selection as part of the authentication flow. To enable this:

  • Create a pricing table in Kinde
  • Add and publish plans (a pricing table can display 1 to 4 plans)
  • Set the table to Live
  • Ensure Show the pricing table when customers sign up is enabled in Settings > Environment > Billing
  • For B2B organization sign-ups (is_create_org=true), ensure you have configured a role with Assign to the creator enabled and the org:write:billing system permission selected (see Add billing role (B2B))

Once this is done, pass the relevant pricing_table_key in the authentication URL (or set the pricing table to Show by default) and Kinde will display the plan selection screen during sign-up.

Option 3: Assign a plan via the Kinde Management API

Link to this section

Use the Kinde Management API to assign a customer to a specific plan. The next time the customer signs in, Kinde will automatically prompt them for payment details.

This is ideal for:

  • Migrating customers from another system
  • Assigning a plan without user input

Customize billing screens in the authentication flow

Link to this section

Depending on how you choose to onboard customers, users will see up to three different billing screens during the authentication flow. These screens can be customized:

  1. Plan selection - Displayed when a user signs up (or when an eligible billing customer without a plan signs in) and a live pricing table with at least one published plan is available, unless a plan was pre-selected via plan_interest. Even if your pricing table has only a single plan (such as a single free tier), this screen is still displayed so the customer can confirm their plan selection. Plans with a trial enabled show a “Free trial for N day(s)” badge.

  2. Payment details - Shown after a user selects a plan—or if a plan was pre-selected via plan_interest before redirecting to Kinde. This screen only appears if the plan requires credit card details. Plans with no charges ($0) skip this screen when Ask for credit card is disabled in the plan settings. For trial plans, this screen may appear later — when prompted for payment details before the trial ends — and includes a message explaining the trial window. This skip behavior does not apply to trial-enabled paid plans.

  3. Success - Shown when sign-up and payment are successfully completed (or when a free plan subscription is confirmed).

By default, all screens will inherit branding and styling from the global Kinde Design settings.

If you want more control, you can fully customize these screens using your own HTML, CSS, and JavaScript.