Selecting Products, Services or Plans
The first part of any payment flow is for the user to select some set of product(s) that they will be purchasing. This step (almost) always precedes the checkout and payment part of the flow, whether it be via a custom design in Feathery or via Stripe checkout.
Feathery leverages Stripe products and prices for all payments and requires that these be configured in Stripe ahead of time.
Using Feathery, you can custom design form step(s) to allow the user to select products, services, plans, etc. that they wish to purchase. These always correspond to Stripe products, each of which has a price, etc. configured in Stripe. Your design is custom to your needs, but at its core it captures which products and how much of each. This information is later fed to the the purchase/checkout process in the form of Feathery field data.
In this simple plan selector example, a series of three buttons allow the user to select a single plan. Each button is used to set a number of hidden fields, including the plan name and plan cost. The button also sets a field for the corresponding plan quantity to 1 and the other plan quantity fields to 0. This enforces the "single-select" behavior for a plan. This is partially illustrated below.
Button-based plan selector
Each button also immediately navigates to the next step for purchasing the selected plan.
The purchase step (illustrated below) provides a summary of the chosen plan's name and cost using text fields containing text vars to display the field data set in the plan selector step.
This step also has the credit card entry field since this form is designed as a Feathery form type of payment flow (not Stripe checkout). There is also "buy" button used to purchase the selected plan. The button is configured with a "Collect Payment" click action (more about this in Payment). You can see below that the starter-plan, pro-plan and enterprise-plan quantity fields are associated with each Stripe product id as part of this collect payment action's configuration. Only one of these quantity fields will be set to 1 by the form design. This action triggers the payment and subscription creation for the selected product in Stripe and then the form navigates to the final confirmation step.
This example is similar to the first example but additionally allows the user to select a quantity of licenses to purchase when a plan is selected. Each selector now has a licenses number input field as shown below. Like above, each button is used to set a number of hidden fields, including the plan name and plan cost. Each button also clears the license number input fields for the other two plans. This again enforces the "single-select" behavior for a plan. This is partially illustrated below.
The purchase step is similar to the example above. It does now show the selected quantity of the selected plan (also using text vars). The buy button is slightly different in that it uses the new plan license quantity fields.
This example is similar to example 1 but instead uses a click on the container to select the plan. Each container click is used to set a number of hidden fields, including the plan name and plan cost, similar to example 1. The container click also sets a field for the corresponding plan quantity to 1 and the other plan quantity fields to 0. This enforces the "single-select" behavior for a plan just as in example 1. This is partially illustrated below.
The Next button simply navigates to the purchase step, The purchase step is the same as in example 1. Note below that the Next button does have a validation rule to ensure a plan is selected before advancing.
Note that Feathery is designed to allow you maximum flexibility in your design. It is also possible to design a flow in which the user product choice and payment/checkout initiation are triggered by a single click and therefore not separate steps. There are many possible design approaches.
At this time, Feathery does not support dynamic add-on costs such as taxes, shipping, etc.
Last modified 2mo ago