Mollie (BETA)PRO

This knowledge base article relates to the WS Form Mollie (BETA) add-on. This add-on is free to download.

Note: The Mollie add-on is currently in beta.

Mollie Payments provides businesses with a streamlined and efficient way to process online payments. Mollie supports a wide range of payment options, including credit cards, PayPal, and local payment methods specific to certain countries or regions.

The WS Form Mollie add-on allows you to accept online payments that effectively act as a gateway prior to creating a form submission.

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 Mollie 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 Mollie 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 Mollie 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 Mollie

Obtaining Mollie Credentials

In order to use the Mollie button, you first need to enter your Mollie profile ID and API keys.

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

To obtain your API keys:

  1. Log in to your Mollie account.
  2. Go to Developers.
  3. Click API Keys.

Entering Your API Keys

To enter your publishable keys:

  1. Click WS Form in the WordPress administration menu.
  2. Click Settings.
  3. Click the Mollie tab at the top of the page.
  4. Enter your test and live API keys.
  5. Click the Save button.

We recommend using the Test environment to test your form.

Mollie Templates

To help get you started, the Mollie add-on includes a number of form templates. To create a form using a Mollie template:

  1. Click on WS Form in the WordPress admin menu.
  2. Click on Add New.
  3. Click the Mollie tab.
  4. Click on a Mollie form template.

Adding The Mollie Fields

Once configured the Mollie fields will appear under the E-Commerce section of the toolbox when editing a form. The following fields types are added:

  • Mollie Cardholder – The user enters their name into this field.
  • Mollie Card – The user enters their credit card number into this field. Only required for credit card transactions.
  • Mollie Expiry – The user enters their credit card expiry month and year into this field. Only required for credit card transactions.
  • Mollie CVV – The user enters their credit card card verification value (CVV) into this field. Only required for credit card transactions.
  • Mollie Submit – The user clicks this to submit their credit card details. Edit this field to configure the Mollie transaction.

`You can place the Mollie fields anywhere you like on the form. An example layout is shown below:

WS Form - Mollie Integration - Fields

Settings

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

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

The Mollie 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 on the button. 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, Submit Payment.

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

Method

Use this field to determine which payment method should be used. This defaults to creditcard.

The available payment methods you can use will depend on the configuration of your Mollie account.

The possible values for this field are:

  • applepay
  • bancontact
  • banktransfer
  • belfius
  • creditcard (Default)
  • directdebit
  • eps
  • giftcard
  • giropay
  • ideal
  • kbc
  • mybank
  • paypal
  • paysafecard
  • przelewy24
  • sofort

You can also enter WS Form variables in this field, for example you could provide a payment selector field to the user and then enter:

#field(123)

… where 123 is the ID of the payment method selector.

A Mollie data source is available to automatically populate a payment method selector for a select or radio field.

Amount to Charge

This setting is used to tell Mollie how much to charge. By default this setting will equal the e-commerce total of the form. You can also enter a specific amount or use WS Form variables in this setting.

Currency

Choose the currency to use for the transaction.

Description

Enter a description for the transaction. WS Form variables can be used in this field.

Zero Amount

You can configure how WS Form should handle zero amounts for Mollie 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.

Billing Address

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 Mollie 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 Mollie 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 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 Mollie 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 Mollie 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.

Classes

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

Field Wrapper

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

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.

Validation

Show Invalid Feedback

Invalid feedback text is shown when the credit card information entered is not valid, or if a transaction fails. If this setting is checked, invalid feedback is shown under the field.

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.