Mollie Integration

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 integration allows you to accept one-time payments and subscriptions. The payment acts as a gateway prior to creating a form submission. Remaining form actions run only after Mollie reports the payment as paid or authorized. For subscriptions, actions run once the first payment has succeeded and the subscription is active.

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.

How it Works

The Mollie payment process works as follows:

  1. The customer clicks the Mollie Submit button.
  2. For credit card payments, the card details are sent to Mollie client-side and securely tokenized using Mollie Components. Card details are not stored in WordPress.
  3. The form is saved and a payment is created in Mollie. For subscriptions, a Mollie customer is created first and the payment is marked as the first payment of a mandate.
  4. The customer is redirected to the Mollie hosted checkout page when further authorization is required (for example 3-D Secure, iDEAL, or PayPal). If the card is authorized without a redirect, the customer is returned to the form immediately.
  5. Mollie redirects the customer back to the form. Mollie also sends a webhook to your site. The webhook can complete the submission if the customer does not return to the browser.
  6. If the payment is successful, the remaining actions configured on the form are run. For a subscription, WS Form creates the Mollie subscription after the first payment succeeds.
  7. If the payment is cancelled, expired, or failed, an error is shown on the form.

Note: Mollie webhooks require a publicly reachable HTTPS site URL. Localhost will not receive webhooks unless you use a tunnel (for example ngrok). Use the Test environment with your Mollie test API key while developing.

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 integration, 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 profile ID and API keys:

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

Entering Your API Keys

To enter your credentials:

  1. Click WS Form in the WordPress administration menu.
  2. Click Settings.
  3. Click the Mollie tab at the top of the page.
  4. Choose Test or Live for the environment.
  5. Enter your profile ID, test API key, and live API key.
  6. Click the Save button.

We recommend using the Test environment to test your form.

Mollie Templates

To help get you started, the Mollie integration includes a number of form templates:

  • Mollie – CC – Basic — A simple credit card payment form.
  • Mollie – CC – Full — A credit card payment form with billing and shipping address fields.
  • Mollie – Method Selector — Lets the customer choose a payment method on the form.
  • Mollie – Subscription — Collects a first payment and creates a recurring Mollie subscription.

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 appear under the E-Commerce section of the toolbox when editing a form. The credit card fields are only required when the payment method is credit card. Other methods, such as iDEAL or PayPal, only need the Mollie Submit button.

  • Mollie Cardholder — The customer enters their name into this field. Only required for credit card transactions.
  • Mollie Card — The customer enters their credit card number into this field. Only required for credit card transactions.
  • Mollie Expiry — The customer enters their credit card expiry month and year into this field. Only required for credit card transactions.
  • Mollie CVV — The customer enters their card verification value (CVV) into this field. Only required for credit card transactions.
  • Mollie Submit — The customer clicks this to start the payment. 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.

WS Form variables can be entered into this field.

Transaction

Type

Choose One Time or Subscription.

One time transactions perform a single charge. The customer is redirected to Mollie (or completes card authorization on the form) and, if the payment succeeds, the rest of the form actions are run.

Creating a Mollie customer is optional for one-time payments. Enable Create Customer below if you want the payment linked to a customer record in Mollie.

Method

Choose the Mollie payment method. The list is loaded from the payment methods enabled on your Mollie profile. Click the reload icon next to the setting to refresh the list.

Choose Custom to enter a method ID yourself, or to use a field variable so the customer can choose a method on the form.

Custom Method

This setting is shown when Method is set to Custom. Enter a Mollie method ID, for example creditcard or ideal. If you leave it blank, credit card is used.

You can also enter WS Form variables in this field. For example, add a select or radio field and enter:

#field(123)

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

A Mollie Methods data source can populate that selector. It returns the method ID, label, images, and minimum and maximum amounts for each method enabled on your profile. The data source has a Sequence Type setting:

  • One-time (default) — Methods available for a normal payment.
  • First payment (subscriptions) — Mandate-capable methods that can start a subscription. Use this on a subscription form.
  • Recurring — Methods that can be used for later recurring charges.

Method IDs you can use, depending on what is enabled in your Mollie account, include:

  • applepay — Apple Pay
  • bancontact — Bancontact
  • banktransfer — Bank transfer
  • belfius — Belfius
  • billie — Billie
  • blik — BLIK
  • creditcard — Credit card (default)
  • directdebit — SEPA Direct Debit
  • eps — EPS
  • giftcard — Gift card
  • ideal — iDEAL
  • in3 — in3
  • kbc — KBC/CBC
  • klarnapaylater — Klarna Pay Later
  • klarnapaynow — Klarna Pay Now
  • klarnasliceit — Klarna Slice it
  • mybank — MyBank
  • paypal — PayPal
  • paysafecard — Paysafecard
  • przelewy24 — Przelewy24
  • riverty — Riverty
  • sofort — SOFORT
  • trustly — Trustly
  • twint — TWINT
Amount to Charge

This setting tells Mollie how much to charge. Leave it blank to use the e-commerce cart total (the same as entering #ecommerce_cart_total). You can also enter a fixed amount or use WS Form variables.

For a subscription, this amount is used for the first payment and for every later recurring charge.

Currency

Choose the currency to use for the transaction. This defaults to the currency selected in Form Settings.

Description

Enter a description for the transaction. This is shown to the customer on the Mollie checkout page. The default is Payment to #blog_name. WS Form variables can be used in this field. The same description is used for the subscription.

Zero Amount

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

  • Do nothing
  • Submit form
  • Show error message (default)

A zero amount is not sent to Mollie.

Zero Amount Message

If you opt to show an error message, enter the error message you would like to be shown here. This setting is only shown when Zero Amount is set to Show error message.

Customer

Create Customer

If checked, a customer record will be created in Mollie using the name and email mappings below. Creating a customer makes it easier to cross-reference transactions in Mollie.

Note: This checkbox only appears when Type is One Time. Subscriptions always create a customer, and the name and email settings below are shown automatically.

Name

Use this field to specify the name of the customer. If you have text fields for first and last names, you would enter something such as:

#field(1) #field(2)

WS Form variables can be entered into this field. At least a name or an email address is required. If the name is empty, the email address is used as the customer name.

Email

Choose an email field from your form to use for the customer’s email address.

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. Billing and shipping addresses are sent to Mollie when the payment method is credit card (or when Method is set to Custom).

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.

The Mollie billing address fields are:

  • Organization Name
  • Title
  • Given Name
  • Family Name
  • Email
  • Phone
  • Address Line 1
  • Address Line 2
  • City
  • Region/County
  • Postal Code
  • Country

Address Line 1, City, Postal Code, and Country are marked as required by Mollie when you send a billing address.

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. This is sent when the payment method is credit card (or when Method is set to Custom).

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.

The shipping address uses the same Mollie fields as the billing address.

Language

Choose the language used on Mollie hosted payment pages. Auto Detect uses the customer’s browser language when Mollie supports it. You can also choose a specific language, including English, Dutch, French, German, Spanish, Italian, and other languages supported by Mollie.

The same language is applied to the Mollie customer record when a customer is created.

Advanced

Styles

Use the Styles settings to change the design of the Mollie Submit button.

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.

Restrictions

Disabled

If checked, the Mollie Submit button will be disabled when the form is rendered. It can be enabled again using conditional logic.

Custom Attributes

For developers, custom attributes can be added to the Mollie Submit button.

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.

Credit Card Field Settings

The Mollie Cardholder, Mollie Card, Mollie Expiry, and Mollie CVV fields use Mollie Components. Card details are tokenized by Mollie and are not saved with the form submission.

These fields include the usual label, help text, classes, and breakpoint settings. Additional settings are:

Accessibility

ARIA Label

Use this setting to add an ARIA label to the field for screen readers.

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.

Variables

The Mollie integration adds variables you can use in actions such as messages and emails. These values are available after the payment has completed.