PayTracePRO

This knowledge base article relates to the WS Form PayTrace add-on. Click here to purchase this add-on.

Note: You must serve the page containing the payment form over HTTPS. In short, the address of the page containing PayTrace must start with https:// rather than just http://. For more information, click here.

The PayTrace add-on allows you to accept credit card payments from your forms. You can either charge a fixed amount using the button in isolation, or you can use the WS Form E-Commerce fields to produce more advanced cart options.

Installation

The WS Form PayTrace plugin is installed in the same way as installing the WS Form PRO plugin.

Once installed you will need to activate the license for the plugin. When you purchase the PayTrace add-on, you will be given a license key. If you have lost your license key(s), click here.

To activate your license key:

  1. Click ‘WS Form’ in the WordPress administration menu.
  2. Click ‘Settings’.
  3. Click the ‘PayTrace’ tab at the top of the page.
  4. Enter your license key.
  5. Click the ‘Activate’ button.

If your license key fails to activate, please ensure you are using the correct license key and not your WS Form PRO license key.

Configuring PayTrace

In order to use the PayTrace button, you first need to enter your PayTrace username and password.

Note: You should use an API User (Not a web user) when entering your PayTrace credentials because API users do not have a password expiry date. You may have to contact your PayTrace representative to have this user set up for you.

If you do not yet have a PayTrace account, register for a new account.

To enter your username and password:

  1. Click ‘WS Form’ in the WordPress administration menu.
  2. Click ‘Settings’.
  3. Click the ‘PayTrace’ tab at the top of the page.
  4. Enter your username and password.
  5. Click the ‘Save’ button. WS Form will show that you are connected to PayTrace.

The next step is to upload your public key. To obtain your public key, click ‘Download Public Key’ from the PayTrace integration menu.

WS Form PRO PayTrace Add-On - Obtain Public Key

To upload your PayTrace public key file:

  1. Click ‘WS Form’ in the WordPress administration menu.
  2. Click ‘Settings’.
  3. Click the ‘PayTrace’ tab at the top of the page.
  4. Click ‘Browse’ to select your PayTrace public key file.
  5. Click the ‘Upload’ button. WS Form will show a preview of your PayTrace public key file if successfully uploaded.

PayTrace is now configured and you can now add the PayTrace fields to your form.

Adding The PayTrace Fields

Once configured the  PayTrace fields will appear under the ‘PayTrace’ section of the toolbox when editing a form.

WS Form PRO PayTrace Add-On - Field Types

Two fields types are added:

  • CC Number Card – The user enters their credit card details here.
  • CC Exp Month – The user enters the expiry month of their credit card here.
  • CC Exp Year – The user enters the expiry year of their credit card here.
  • CC CVV – The user enters the Card Verification Value of their credit card here. This is often found on the signature strip or to the right of the credit card number.
  • PayTrace Submit – When the above details are entered, the PayTrace Submit button is clicked and the payment is submitted.

You can place these fields anywhere you like on the form, but all of the fields must be included. An example layout is shown below:

WS Form PRO PayTrace Add-On - Example Layout

Settings

The PayTrace settings are found in the PayTrace Submit field settings. To access the settings sidebar, click the settings  icon on the PayTrace Submit field.

The PayTrace Submit field acts like a regular custom button field type. Please refer to that field type for more information about the settings.

ThePayTrace Submit field settings are split into Basic and Advanced tabs in the sidebar as are detailed below:

Basic

The basic tab contains settings that the majority of WS Form users will need to control a field. The settings are as follows:

Label

This is the label shown above the credit card entry field. As well as entering a label into this field, you can also double click the label of the field in the editor. You should enter an easy-to-understand label for your field, for example, ‘Credit or Debit Card’.

Hidden

If checked, the field will be hidden on the form. It can be shown again using conditional logic or your own JavaScript.

Help Text

The help text setting enables you to add smaller text under the field to assist the website visitor in completing that field.

As well as inserting plain text into this field, WS Form also provides extensive functionality for adding character and word count information. Click here to learn more about this functionality.

WS Form variables can be entered into this field.

Transaction

Amount To Charge

By default this field is blank, and the PayTrace button will charge the amount calculated by the e-commerce fields on your form (the same as entering #ecommerce_cart_total). For example, you might have a single price field for making a donation, or a more elaborate form with prices, quantities, and subtotals.

You can also enter a fixed amount into this field.

WS Form variables can be entered into this field.

Description

Enter the description of the transaction in this field. For example: Payment To My Blog.

WS Form variables can be entered into this field.

Invoice

Invoice ID

This is the invoice ID passed to PayTrace. This is a unique identifier for this transaction in your accounting or inventory management system.

Customer

Email

Select the field on your form that relates to the email address of the customer.

P.O. Number

Enter the customer reference ID is an identifier that your customer may ask you to provide in order to reference the transaction to their credit card statement. Also known as a PO Number.

Billing Address

Billing Name

Use this field to specify the billing name of the payer.

You can use WS Form variables in this field, e.g. #field(1) #field(2).

Billing Address Mapping

Use the billing address mapping option to specify which fields on your form relate to the different parts of the billing address.

To map your form fields to PayTrace billing address fields:

  1. Click the ‘Add’  icon at the bottom right of the billing address mapping section.
  2. In the left-hand column, select a field from your form.
  3. In the right-hand column, select the corresponding PayTrace billing address field.
  4. Repeat this process for each field on your form.
  5. Click the ‘Save’ button at the bottom of the sidebar to save your changes.

Shipping Address

Shipping Name

Use this field to specify the shipping name of the payer. In most cases you would enter the same value as entered in the ‘Name’ field above.

WS Form variables can be entered into this field.

Shipping Address Mapping

Use the shipping address mapping option to specify which fields on your form relate to the different parts of the shipping address.

To map your form fields to PayTrace shipping address fields:

  1. Click the ‘Add’  icon at the bottom right of the shipping address mapping section.
  2. In the left-hand column, select a field from your form.
  3. In the right-hand column, select the corresponding PayTrace shipping address field.
  4. Repeat this process for each field on your form.
  5. Click the ‘Save’ button at the bottom of the sidebar to save your changes.

Advanced

Styles

Use the ‘Styles’ settings to change the design of the credit card entry field.

Vertical Alignment

The vertical alignment option allows you to choose how this field will be vertically aligned in relation to fields in the same row. The options are:

  • Top
  • Middle
  • Bottom
Type

Choose the type of button. The options are:

  • Default
  • Primary
  • Seconday
  • Success
  • Information
  • Warning
  • Danger

Classes

For developers WS Form allows you to add your own classes to fields.

Wrapper CSS Classes

The wrapper CSS class setting enables you to add a class (or classes) to a field wrapper. Field wrappers are sections of HTML added around a field to position them on the page. To add multiple classes, add a space between the class names.

Field CSS Classes

To add a class to the actual field element itself, enter a class (or classes) to this setting. To add multiple classes, add a space between the class names.

Transaction

Zero Amount

You can configure how WS Form should handle zero amounts for PayTrace buttons. In some cases you may wish to show an error message (e.g., a donation amount is set to zero). In other cases you may wish to still submit the form (e.g., if something is determined to be free). Select the appropriate action from the pull-down list.

Zero Amount Message

If you opt to show an error message, enter the error message you would like be shown here.

Limit Amount

The limit amount allows you to specify the maximum amount that can be charged. If the amount charged exceeds this value, the Limit Amount Message will be shown.

Limit Amount Message

If the amount charged exceeds the limit amount specified, this message will be shown.

Messages

Error Messages

WS Form PRO processes any error messages as standard WS Form messages. The error message settings match those of the ‘Show Message‘ action. You can configure these options to change how the error messages are displayed to users.

Restrictions

Field restrictions enable you to define what can or cannot be entered into the field.

Custom Attributes

This setting is used to add custom attributes to the HTML of this field, such as data-my-attribute="1234". You can add as many custom attributes as you need..

To add a custom attribute key-value pair:

  1. Click the ‘Add’  icon to add a custom attribute row.
  2. Enter the key in the left column.
  3. Enter the value in the right column.
  4. Click ‘Save’ to save the custom attributes.

Breakpoints

The breakpoint settings define the width of a field and also what the offset (how many columns from the left-hand side of the form or the previous field) of a field is for each breakpoint. For more information about the breakpoint settings and capabilities of WS Form, click here.