Basic Payment Forms

 Last Edited: Sep 09, 2019

Prerequisites

  • - You have installed the eCommerce Module in Site Settings
  • - You have set up a Payment Gateway

Introduction

Basic Payments are a way to take a payment against a standard Form submission.

You set the currency, and the minimum payment value in Form Builder.

When submitting the form, a value is sent to our payment processor, and validated server-side to check that it's higher than the minimum payment value you have set.

Here's 3 examples of when you'd use this payment system:

  1. If you're sending invoices to a customer, and want them to pay online, they can enter their invoice number (in a custom field) and the amount to pay. You would then check 'offline' that the value paid matches that on the invoice. In this case you'd set the minimum payment value as '0.00'.
  2. You know the exact value you want the users to pay (for example $10.00), so you set the minimum payment value as '10.00'. This is validated server-side to make sure they cannot pay less than that.
  3. You want to charge a variable amount based on their form selections, and know the minimum value that should be. For example, the charge might be $10.00 as standard, but then have some optional custom fields that bring the price up to $20.00 (controlled via JavaScript manipulation of the 's_e_amount' field value). You would set the minimum payment value as '10.00', but the charge would come through as '20.00'.


How to set up

Step 1 - Payment Gateways

Basic Payment is available using the following Payment Gateways:

Note: depending on the Payment Gateway, some specific fields may be needed in order to capture the necessary payment details. Those fields will be specified in step 5.

Step 2 - (Optional) Secure Zones

In order to use Secure Zones in this process, they first need to be set up.

For instructions on how to use Secure Zones on a Form, click here.

If you apply a Secure Zone to the Form, then the user will be given access after a successful payment.

Step 3 - Create a Form

When creating a Form, navigate to the 'Payments' tab.

Here you should enter the following data:

  • - Use as a payment form? - Toggle to 'true'
  • - Payment form type - Basic Payment Form
  • - Currency - Choose from the dropdown of supporter currencies
  • - Minimum payment value - The minimum amount a user can pay to submit this Form

For further instructions on how to set up Forms, click here.

Step 4 - (Optional) Editing your Form layout to apply Payment Gateway specific code

Please see the accordion below for code relevant to your Payment Gateway.

Stripe
There is no extra code required for Stripe
Authorize.net
You must include 3 extra fields for Authorize.net to work.
Field Example Notes
Card Number <input id="s_e_card_num" class="required" type="text" />
Card Expiry <input id="s_e_card_exp" class="required" type="text" placeholder="MM-YYYY" /> The data format must follow that in the placeholder in our example
Card CVV <input id="s_e_card_cvv" class="required" type="text" />


Step 5 - Testing

To test your new Basic Payment Form, you first must put it on a Page. You can do so using Toolbox's 'Insert Form' feature.

Once you have created a Page and navigated to it, you will need to fill in the fields and submit.

If your Payment Gateway is in 'Test Mode', then you may need to enter card details specific to the testing environment. You can find those under 'Test Cards' on our Payment Gateways documentation page.