Stripe

Stripe is one of the leading payments providers. Use Feathery’s Stripe integration to: 

  • Accept online payments
  • Store payment method information (e.g. a credit card)
  • Provide product selection functionality with an auto-calculated total

What you need

How to set up

Determine how you plan to integrate Stripe with Feathery. You can collect payment info for future charges or even initiate a payment through your form. When initiating the payment, you have the option of either using a simple fixed price or designing a product selector that allows the end user to choose which ones they plan on purchasing. Feathery supports subtotals with an added fixed price, but at this time we do not support dynamic add-on costs such as taxes, shipping, etc.

Navigate to the Feathery form that you want to connect to Stripe. Click on the Connect tab.

Open the Stripe integration. To configure, you must provide both test and production publishable and secret keys from an activated Stripe account. The test keys will only be used while previewing (testing) your Feathery form. The production keys are used otherwise. You can find the keys in your Stripe dashboard (dashboard.stripe.com) by searching for “api keys”. After entering all of the keys, you may connect the integration. Feathery will validate your connection at this time.

For a minimal integration, only the keys are required. However, when adding payment methods and/or payments to Stripe, Feathery either creates or updates a customer record in Stripe. In order to give that Stripe customer record meaningful information, you may optionally map Feathery form fields to supported Stripe customer fields. Feathery supports a wide variety of Stripe customer fields such as name, phone, address information, shipping information and address, etc. Map any applicable fields (that were previously added to the form) using the field selector button and save changes to the mapping.

If you plan to accept a payment from your Feathery form, you will probably want to configure payment fields (optional). Again, these represent a mapping of a Feathery form field to a particular Stripe field. After any field changes select Save Changes.

The available fields are:

  • Receipt Email – Email address to send the payment receipt from Stripe.
  • Total Cost – A hidden field into which Feathery stores the total calculated charges for an end user.
  • Additional Cost – This is not a field mapping but instead is an optional monetary amount that will always be charged to your user when they pay.
  • Payment Indicator – A field that will be set true once the user has paid. You can optionally use this field in conditional navigation or element-hide rules to do things like skipping the payment step if the user has already paid.

The Stripe integration is now ready to use in your form.

How to use the integration

Collecting payment method(s)

Once the Stripe integration is activated and set up, the Payment Method field will become available to use in the Fields section of the visual editor.

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.

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

Selecting products and charging the card

In addition to collecting the payment method, you can optionally charge the method that was collected.

This payment can either be a fixed charge (configured in the Additional Cost field) or based on which products your end user selects to purchase. 

Payments automatically happen upon the submission of the step that contains the payment method field if there is a non-zero cost calculated by Feathery at that point. This means that any product selection must be done on that same step or previous steps in the form sequence.  It is also recommended that forms that are handling payments only collect a single payment method to avoid unexpected charges.

If you want your end user to be able to choose products to purchase, they must be pre-configured in the Stripe dashboard. Only products with standard pricing are supported. Package pricing, graduated pricing, etc. are not supported. Also, Feathery only supports US dollar pricing at this time.  Each product in Stripe has a product ID and these must be manually transferred to your Feathery design (more on this later).

To configure a product selector, you should set the Click Action for one of your form buttons or groups to Select Stripe Product. You must then add in the Stripe product ID that you want the button or group to select/deselect when it is clicked, along with the hidden field that the selection value will be stored into.

To enable selecting multiple products, give each product selector its own hidden field. If instead you only want a single product to be selected at a time, you could give each product selector the same hidden field, which means selecting one product will override any existing selection in that field.

As products are selected and deselected, Feathery will recalculate the total price and place it into the Total Cost hidden field if it was configured at the beginning.

You can make the total cost available on the form by adding text that contains a text variable.

For Developers

There are several fields used by the Feathery Stripe integration that are mentioned above. You can modify their values programmatically via our API or embed SDK. F0r example, you may wish to initialize a product as pre-selected, or clear the paid indicator field. You should not change the value of the Total Cost field as it is used for display only and does not affect the payment amount.

What’s a Rich Text element?

The rich text element allows you to create and format headings, paragraphs, blockquotes, images, and video all in one place instead of having to add and format them individually. Just double-click and easily create content.

Static and dynamic content editing

A rich text element can be used with static or dynamic content. For static content, just drop it into any page and begin editing. For dynamic content, add a rich text field to any collection and then connect a rich text element to that field in the settings panel. Voila!

How to customize formatting for each rich text

Headings, paragraphs, blockquotes, figures, images, and figure captions can all be styled after a class is added to the rich text element using the

"When inside of" nested selector

system.

This is a H6

This is a Link

  • This is a list item
  • This is another list item here
Get started with
Feathery

Request access to stay in the loop

Thanks for joining
the waitlist
Done
Oops! Something went wrong while submitting the form.