WS Form - Mollie Addon v1.1.2 - WordPress Plugin

Click Settings. Click the Mollie tab at the top of the page. Enter your test and live API keys. Click the Save button. We recommend using the Test environment to test your form. Testing the Mollie API 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: Click on WS Form in the WordPress admin menu.

Click on Add New. Click the Mollie tab. 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: 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: Click the Add icon at the bottom right of the billing address mapping section. In the left-hand column, select a field from your form.

In the right-hand column, select the corresponding Mollie billing address field. Repeat this process for each field on your form. 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: Click the Add icon at the bottom right of the shipping address mapping section. In the left-hand column, select a field from your form. In the right-hand column, select the corresponding Mollie shipping address field. Repeat this process for each field on your form. 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.