Product

How to Build a Payment Flow

In this blog post, we introduce you to payment flows, discuss who uses them, and provide a detailed guide on how to build a payment flow using Stripe and Feathery.

Get the Feathery newsletter

Get the best of Feathery. Once a month. Directly to your inbox.

Payment flows have become increasingly important in the digital age as businesses and individuals turn to online transactions to buy and sell goods and services.

If you're looking to create a streamlined, seamless payment flow for your website or app, Stripe and Feathery offer a powerful combination to help you get started.

This blog post will introduce you to payment flows, discuss who uses them, and provide a detailed guide on how to build a payment flow using Stripe and Feathery, a form builder that integrates with Stripe.

What is a payment flow?

A payment flow, also known as a checkout flow or payment process, is the sequence of steps a customer goes through to complete a transaction on a website or app. It typically involves selecting products to purchase, entering payment information, selecting shipping options (if applicable), and confirming the purchase. An efficient, secure, and user-friendly payment flow is crucial for providing a positive customer experience and increasing conversion rates.

What types of businesses need a payment flow?

Payment flows are used by a wide range of businesses and organizations, including:

  • Subscription-based products and services: Companies offering subscription-based products or services, such as a B2B SaaS product or a growth marketing agency, use payment flows to manage both recurring and one-time payments.
  • E-commerce stores: Online stores use payment flows to facilitate transactions for products or services.
  • Event organizers: Payment flows are used to sell tickets or manage event registrations.
  • Freelancers and consultants: Professionals who offer services online may build out and use custom payment flows to process payments from clients.
  • Non-profit organizations: Non-profits often use payment flows to accept donations online.

What types of payments can a payment flow collect?

A payment flow can collect various types of payments, including:

One-time payments

These are payments for a single purchase or transaction. For example, a customer may use a payment flow to pay for a product or service one time only.

Recurring payments

These are payments that occur on a regular basis, typically for a subscription service. The payment flow will automatically charge the customer's account at regular intervals (e.g. weekly, monthly, yearly) until the subscription is canceled.

Installment payments

These are payments that allow customers to pay for a product or service over time in multiple payments. The payment flow will collect the necessary information to charge the customer's account at specific intervals until the full amount is paid.

Donations

These are payments made to support a cause or organization. The payment flow can collect the necessary information to process the donation and may provide the option for recurring donations.

Pre-orders

These are payments made for a product or service that is not yet available. The payment flow can collect the necessary information to reserve the product or service and charge the customer's account when it becomes available.

The specific types of payments collected in a payment flow can vary depending on the merchant's preferences and the payment processing system being used.

How to build a payment flow

Stripe is a popular payment processing platform that allows businesses to accept payments online. Feathery is a low-code form builder that integrates with Stripe, making it easy to create custom payment forms without a developer or coding knowledge. Follow these steps to build a payment flow using Stripe and Feathery:

Step 1: Sign up for a Stripe account

To get started, you'll need to create an account with Stripe. Visit their website (https://stripe.com) and sign up for a free account. You'll need to provide some basic information about your business or organization and connect a bank account where you'd like to receive payments.

Step 2: Set up your Feathery account

Next, sign up for a Feathery account by choosing a pricing plan that suits your needs. Feathery offers a range of plans, including a free option with limited features and paid plans with more advanced functionality.

Note: Feathery users are able to build and test a payment form with the Stripe integration but will need to upgrade to Feathery’s Pro Plan to send their payment flow live.

Step 3: Create a new form

In your Feathery dashboard, click "Create New Form" to start building your payment form. Choose from their form template library or start from scratch, depending on your needs and preferences. You can customize the form's appearance, fields, and functionality using Feathery's drag-and-drop form builder.

Step 4: Connect Stripe to your Feathery form

Log into your Stripe dashboard and copy your API keys (note: there are two separate keys—one for testing and one for production). Paste your desired key in the Stripe integration sidebar of your Feathery form. Once entered, you then click the Connect button. Feathery will test the connection and if valid, your form will be successfully connected to Stripe.

Step 5: Add payment fields to your form

Once the Stripe integration is successfully connected, the Payment Method field will become available to use as a field on the left-hand side of the visual designer.

This payment method field may be dragged anywhere onto your form and is the only way to enter payment/card information in your form to be passed securely to Stripe. The payment method field collects the card number, CVC, expiration month/year and postal code. It supports standard styling like font type, size, color, and more.

Once your end user fills the field and submits the step, the payment method will be automatically saved into the customer record in Stripe.

Step 6: Publish and embed your payment flow

To publish your payment flow, click the Publish button in the top-right corner of the Build tab. Changes will be delivered immediately to your users. Learn how to embed your payment flow using JavaScript or React. For CMS-specific guides, check out Feathery’s walkthroughs for launching your form via Webflow and Shopify.

Conclusion

In this blog post, we have explored the concept of payment flows, who uses them, and why they are essential for businesses and customers alike. Payment flows are integral to the SaaS and e-commerce landscape, providing users with a secure and efficient way to purchase products and services online.

By following these steps, you will not only enhance your customers' experience, but you will also save time and resources in managing your payment processes. Additionally, integrating a payment flow using Stripe and Feathery will help you maintain compliance with industry regulations and security standards, giving you peace of mind as you grow your online business.

Get started on your payment flow today with a Feathery and Stripe account.