Feathery Docs
HomeCommunityGitHub
  • Platform
    • Quickstart
    • Form Fields
      • Hidden Fields
      • How to Set Field Values
      • Link Fields Across Forms
      • Custom Field Input Format
    • Build Forms
      • Elements
        • Basic
          • Container
          • Button
          • Text
          • Progress Bar
          • Image
          • PDF Viewer
          • Video
          • Table
          • Tooltip
        • Fields
          • Address
            • Street Address Line 1
            • Street Address Line 2
            • City
            • State
            • Country
            • Zip Code
          • Button Group
          • Checkbox
          • Checkbox Group
          • Color Picker
          • Combobox
          • Dropdown
          • Dropdown Multiselect
          • Date Selector
          • Time Selector
          • Email
          • File Upload
          • Matrix
          • Number
          • Password
          • Picture Choice
          • Pin Input
          • Phone Number
          • Radio Group
          • Rating
          • Signature
            • Legally Binding Signatures
          • Slider
          • Social Security Number
          • Text Area
          • Text Field
          • Payment Method
          • URL
        • Custom HTML, JS, CSS, and Iframes
        • Custom Fields
      • Design
        • Reuse styles and elements
          • Styling
          • Assets
        • Alignment and Spacing
        • Sizing Forms and Elements
        • Responsive Layouts
      • Actions
      • Logic
        • Navigate Steps Conditionally
        • Show Elements Conditionally
        • Custom Field Validation
        • Available Conditions
        • Display Dynamic Text
        • Dynamically Repeating Containers
      • Advanced Logic & API Connections
        • Visual Rule Builder
          • Connect to API Action
            • Salesforce API Connector
          • Set Field Value Action
          • Navigate Step Action
          • Set Field Error Action
          • Open URL Action
          • Set Calendly URL Action
        • Javascript Rule Builder
          • API Connections in Code
          • Trigger Integrations from Logic
          • Reusable Logic Configs
        • Examples
          • API Connectors
            • Dynamic dropdown options
            • Dynamic form navigation
            • Pre-fill form from Salesforce
            • Pre-fill form from Hubspot
            • Pre-fill field options from Google Sheets
            • Generate ChatGPT Message
          • Field Validation
            • Complex Field Validation
            • Date and Time Validations
          • Initialize Date Field
          • Dynamically set field placeholder
          • Randomize Field Option Order
          • Update field options based on previous selection
      • Integrations
        • Event Triggers
        • Examples
          • Upload Files to Google Drive
      • Dev & Staging Environments
    • Launch Forms
      • Embed Your Forms
      • Custom URLs & SEO
      • User Tracking
      • Completion Criteria
      • UTM Parameters
      • Accessibility Standards
      • Analytics
      • A/B Testing
      • Offline Mode
    • Document Intelligence
      • Review Extractions
      • Post Processing
      • Supported Document Types
      • Prompting Guide
      • Examples
        • Investment Report
    • Document Autofill & Signatures
      • Autofill Document Templates
        • PDF Autofill
        • Word Doc Autofill
          • Dynamic Tables
        • Excel Autofill
        • InDesign Autofill
      • Signature Workflows
        • Signature Notifications
        • Access Signed Documents
        • 21 CFR Part 11 Compliance
      • Export Form Submission PDF
    • Workflows
      • Collaboration
        • Email Invite
        • Start Directly
        • Anonymous Starts
      • Review, Edit & Approve
      • Unique Submission Links
    • Enterprise Compliance
      • Security and Privacy
      • Reliability and Performance
      • Document Management
      • Data Sovereignty
    • International Forms
      • Translate Forms
      • Right to Left (RTL) Support
      • International Form Fields
    • White Label Feathery
      • Build Custom Form Fields
      • Offer Custom Form Templates
      • Custom Dashboard Domain
    • Account Settings
      • Managing Your Team
      • Permissions and User Groups
      • Account Attributes
    • FAQs
      • Account & Billing
  • Guides
    • Verify Submissions & Prevent Spam
    • Build a Login or Verification Flow
      • Connect an Auth Integration
      • Add Auth Methods
        • Email SMS Code
        • Email Magic Link
        • Phone Number Verification
        • Social Logins
          • Google
          • Amazon
          • Apple
          • Bitbucket
          • Coinbase
          • Discord
          • Facebook
          • GitHub
          • GitLab
          • LinkedIn
          • Microsoft
          • Slack
          • Twitch
          • Twitter
      • (Optional) Require Auth for Onboarding Steps
      • (Optional) Add Login Flow to Your Site
        • Feathery-Hosted (Recommended)
        • Embed Login Flow
          • Login Embed Tutorial
    • Build a Payment Flow
      • Connect to Stripe
      • Select Products or Plans
      • Collect Payment Method
      • Purchase Products
    • Send Custom SMS Messages
    • Salesforce Picklist Options
  • Developers
    • React SDK
      • API Guide
        • init()
        • <Form>
          • contextRef
          • Event Handlers
            • onSubmit()
            • onLoad()
            • onChange()
            • onAction()
            • onError()
            • onFormComplete()
            • onView()
          • Custom JSX Components
          • PopupOptions
          • initialLoader
        • getFieldValues()
        • setFieldValues()
        • updateUserId()
        • Login API
          • <LoginForm>
          • useAuthClient()
      • Inline vs Popup Form
    • Javascript SDK
    • Context API
      • Field Object
      • field.setStyles()
      • Deprecated Context API
    • REST API
Powered by GitBook
On this page
  • Add Stripe Keys
  • Toggle Payment Collection Method
  • Configure Stripe Customer Metadata (Optional)
  • Using A New Stripe Customer
  • Additional Stripe Fields

Was this helpful?

  1. Guides
  2. Build a Payment Flow

Connect to Stripe

PreviousBuild a Payment FlowNextSelect Products or Plans

Last updated 1 year ago

Was this helpful?

After you create a form to add your payment flow into, your first step will be to configure the Stripe integration for the form. Follow these steps:

Add Stripe Keys

Navigate to the Feathery form that you want to connect to Stripe. Click on the Integrations tab and find the Stripe integration.

Open the Stripe integration by clicking on it. To configure, you must provide your Stripe test and live publishable and secret keys from an activated Stripe account. The Stripe configuration screen is shown below.

The test keys will only be used while you're previewing / testing your Feathery form. The production keys are used on your live form. 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.

Toggle Payment Collection Method

Configure Stripe Customer Metadata (Optional)

Feathery forms always perform Stripe operations such as save a payment method or make a purchase using a customer record in Stripe. If a Stripe customer record is not yet associated with the current form submission (and Feathery user) then one will be created by the Feathery Stripe integration.

Perform some or all of the following only if you wish to customize how Feathery finds and configures Stripe customer records.

  1. You can update your Stripe customer record metadata with collected form information. Feathery supports updating a variety of Stripe fields such as the name, phone, address information, shipping information and address, etc. Map any applicable fields and save changes to the mapping as illustrated below.

Using A New Stripe Customer

Feathery’s integration with Stripe is designed so that there is always one-to-one between a Feathery form user submission and a Stripe customer. If the user resubmits the form, the same Stripe customer record will be used by default. The only way to end up with a new Stripe customer record is to also create a new feathery form submission.

Feathery offers a “Start New Submission” action on buttons, etc. that you can use to start a new submission and therefore create a new customer record in Stripe for any subsequent payment method entries or payment.

Another option is to turn off user tracking (remember user) in your form settings if you don’t want each new session in the same browser to track the same user. This will result in new submissions, each with a new associated Stripe customer record.

Additional Stripe Fields

Additional Stripe payment fields may also be optionally mapped to Feathery fields that will update their values.

  • Receipt Email – Email address to send the payment receipt from Stripe. Note that receipts will not be sent out in test mode. Also, make sure to turn on receipts in your Stripe dashboard.

  • ‍Payment Indicator – A field that will be set true once the user has paid. You can use this field in conditional navigation or element-hide rules to do things like skipping the payment step if the user has already paid. This will typically only be used for more complex custom payment flows.

Always remember to save your changes using "Save Changes" button at the bottom.

Feathery offers . Choose your preferred method via the "How do you want to collect payments?" dropdown.

If you already have customer records in Stripe that you want your Feathery payment data to update, you may pass some type of identifier (Stripe Lookup Attribute) to your embedded Feathery form via the . Typically the lookup attribute is passed as a hidden field value. This attribute is used to look up the existing Stripe customer record to use for the current user's payment activity. There are two options for the Stripe Lookup Attribute. It may either be the standard Stripe customer ID or it may be the value of a custom (metadata) field that has been previously configured into Stripe for each customer record. Your system would have previously assigned a unique value to this custom field. With either Stripe Lookup Attribute type, the value is derived from some Feathery form or hidden field. For the custom option, you must also configure the name of the custom field in Stripe.

two ways of handling checkout and payment
embed library
Feathery's Stripe keys configuration
The Feathery-Stripe payment flow selection
Configuring Feathery to lookup an existing Stripe customer record using the Stripe Customer ID
Configuring Feathery to lookup an existing Stripe customer record using a custom field
Configuring Feathery-Stripe customer field mappings