Stripe Add-On

  1. Introduction
  2. Install Stripe Add-On
  3. Create a Payment Form
  4. Get your API Keys from your Stripe account
  5. Set Up Payment Forms with your Stripe account

Introduction

Verso Forms Stripe Add-On allows you integrate Verso Forms with Stripe. With this add-on you can create payment forms by using the new Stripe Elements to create a payment form that securely collects your customer’s card information without you needing to handle sensitive card data.

Create a Payment Form

Forms are created through the Form Builder. You just need to drag and drop the fields your form needs and add an HTML Snippet Field with the following content:

{{STRIPE}}

Or to keep the design:

<div class="form-group">
{{STRIPE}}
</div>

Then, from the Stripe Add-On UI you can select the fields that will collect the necessary information to pay in Stripe. For example, price, quantity, etc.

Get your API Keys from your Stripe account

Now that you have your form, let's integrate it with your Stripe account. For this you must perform the following steps:

  1. Log in on Stripe
  2. Under “API” section, copy your API Keys.

Set Up Payment Forms with your Stripe account

To create a Stripe configuration, you must perform the following steps

  1. Go to the Add-Ons Manager and click on Stripe.
  2. Click on the Setup a Payment Form button.
  3. A form used to configure the payment process will appear:
    • Form: Required. It is the form you'll integrate with your Stripe account.
    • Status: Allows to disable the Stripe configuration.
    • Secret Key: Required. Api Credential.
    • Publishable Key: Required. Api Credential.
    • Items: Each item represents a product or service that will be detailed on the Stripe website. It's composed of:
      • Description: Describes your product or service.
      • Price: It's the form field used to collect the product price.
      • Quantity: It is the form field to collect the number of products. The number of products is multiplied by the price of each product, to get the sub-total transaction. If you don't select any fields, the amount used is going to be 1.
    • Credit Card Field Settings: Is a group of fields that let you customize how your customers see your Credit Card field and share their information. You can set:
      • Label: Text to identify your credit card.
      • Description: Text that you can attach to a charge. Your receipt emails will include it.
      • Statement Descriptor: Up to 22 characters to be displayed on your customer's credit card statement.
      • Currency: The charge currency. We recommend using "United States dollar'".
      • Hide Postal Code: Enable to hide the postal code field.
      • Hide Icon: Enable to hide the credit card icon.
      • Hide Style: Enable to hide custom CSS styles.
      • Style: This field let you customize the Credit Card Field appearance by using CSS properties in JSON format. Click here to get more details.
    • Additional Fields: Is a group of fields that let you customize additional form fields. Although these fields are optional, this information can be used to perform a number of verifications, such as CVC, ZIP, and address verification.
      • Receipt Email
      • CardHolder Name
      • Address Line 1
      • Address Line 2
      • Address City
      • Address State
      • Address Zip
      • Address Country
  4. Click Create.