Select Products or Plans
The first part of a payment flow is for your users to select product(s) that they would like to purchase. This step (almost) always precedes the checkout and payment part of the flow.
Using Feathery, you can create custom form designs to allow the user to choose products and plans that they wish to purchase / subscribe to. These always correspond to Stripe products and prices, which are configured directly in your Stripe account.
At its core, your setup needs to save how much of each product your user is looking to purchase into hidden fields. This information is later tied to the purchase/checkout process.
Your product selector can use the
Clear Product from Cart and Add Product to Cart actions. Any button/container may be configured to select one or more Stripe products for later purchase using multiple Add Product to Cart actions (each with a different product. Each product has a Stripe product ID (find it in your stripe.com dashboard) as well as a quantity of it to be purchased. The quantity can be configured to be derived from a Feathery field or as a fixed quantity value. Using a Feathery field allows for a dynamic quantity of the product to be chosen.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 removes all products from the selected purchase using the
Clear Product from Cart action (all). Following this action, it has a Add Product to Cart action to select the associated Stripe product with quantity of 1. 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
Checkout Cart click action (more about this in Payment). This action is used to actually purchase the previously selected products. 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 removes all product selections using the
Clear Product from Cart action and uses the Add Product to Cart action to add the Stripe product to the selections. Note that the select action uses the "starter-licenses" field value for the quantity to add. 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 again configured with the
Checkout Cart action that will trigger the purchase of the in Stripe.
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 removes all product selections using the
Clear Product from Cart action and uses the Add Product to Cart action to add the Stripe product to the selections with a fixed quantity of 1. 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.
Feathery automatically calculates the total of the purchase based on what has been added to the cart and the prices of those products that you have configured in Stripe. This monetary value is stored in a special hidden field named:
feathery.payments.total. If you wish to display this value on your form you may use a text that contains {{feathery.payments.total}} in it.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.
Last modified 1mo ago