Braintree Add-On

  1. Introduction
  2. Create a Payment Form
  3. Get your API Keys from your Braintree account
  4. Set Up Payment Forms with your Braintree account

Introduction

Verso Forms Braintree Payments Add-On allows you integrate Verso Forms with Braintree Payments. With this add-on you can create payment forms by using the new Dropin.js SDK 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:

{{BRAINTREE}}

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

Get your API Keys from your Braintree account

Now that you have your form, let's integrate it with your Braintree account. For this you must get the following information from your Braintree Account:

  1. Public Key
  2. Private Key
  3. Merchant ID

Here are the steps your must follow to get your keys.

Take into consideration that you can use Sandbox environment to test your forms, then you can change your Keys and Environment to pass to production and receive Live payments.

Set Up Payment Forms with your Braintree account

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

  1. Go to the Add-Ons Manager and click on Braintree.
  2. Click 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 Braintree account.
    • Status: Allows to disable the Braintree configuration.
    • Environment: Required. It can be: "Sandbox" or "Production".
    • Merchant ID: Required. Api Credential.
    • Public Key: Required. Api Credential.
    • Private Key: Required. Api Credential.
    • Items: Each item represents a product or service that will be detailed on the Braintree website. It's composed of:
      • Description: Describes your product or service.
      • API Name: Used when setting the transaction. It's the Name of your Custom Fields in your Braintree account. This value must be less than or equal to 255 characters and can't contain any spaces or capital letters. Braintree -> Creating a custom field
      • 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.
      • Locale: The language of your Credit Card field.
      • Cardholder Name: Enable to display the Cardholder name field.
      • Hide Label: Enable to hide the CC label.
      • Required: Enable to accept payments only. Submissions without payments, won't be accepted.
      • Opt-In Condition: Enable a conditional logic to only accept payments when a condition is met.
    • 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.
      • Email
      • First Name
      • Last Name
      • Company
      • Phone
      • Website
      • Address Line 1
      • Address Line 2
      • Address City
      • Address State
      • Address Zip
      • Address Country
  4. Click Create.