Easy Way To Setup Mollie Payment Integration in Bit Form

Learn the easy way to setup Mollie payment integration in Bit Form. Follow our simple guide to connect Mollie with Bit Form and start accepting payments quickly and efficiently.

Admins can receive one-time payments and subscription payments through the Mollie field. Bit Form now allows you to use Mollie fields instead of the submit button. So, when admins use Mollie, they can remove the default submit button from the form. When a user clicks on the Mollie button, the form first validates all the form inputs and then opens the payment window.

Setup Mollie Payment Integration

First, go to the Bit Form dashboard and click on App Settings.

On the left side, click on Payments.

Now, click on Mollie.

Integration Name: Enter a suitable name in the Integration Name field.

To setup Mollie payment integration, you will need your Mollie API Key. There are two methods to get your Mollie API Key.

Method 1

Just click on Mollie Developer Dashboard, and you’ll be redirected to your Mollie account where you can find your API key.

Method 2

• Log in to your Mollie account.
• Click on the “More” option in the menu.
• Select “Developers.”
• You’ll find your API Key there.

Copy the Live API key. For testing purposes, we’ll use the Test API key.

Copy the API Key, then return to Bit Form Payments and paste the API Key into the field for Mollie Integration.

Finally, click the Save button.

Add Online Payments Method

Go back to Mollie and click on the profile icon in the top-right corner then click on settings.

On the left side, click on “Payments.”

Now, add your online payments by clicking on the plus (+) icon.

Add Mollie To You Form

Go to Bit Form, open the form where you want to add Mollie. In the builder, search for Mollie and add it by clicking on Mollie or by dragging and dropping it into your form.

Field Customization of Mollie Payment Integration

Field Key: In Bit Form, every field has a special identifier known as a Field Key. This field key uniquely identifies a field, it also helps to send data via email, PDF, store database, and PHP action hook. These keys are important in Success/Error Messages, WebHooks, Redirect Pages, Email Templates, Workflows, and Integrations.

Name: The Name is an HTML equivalent input field’s name, you can customize it easily according to your preferences. You can easily modify it to suit your needs.

A field’s name is like a special label used when you submit a form. For example, let’s say the field name is “mollie-3-4”. In this case, ‘mollie’ tells us the type of field it is, ‘3’ refers to the form ID, and ‘4’ means it’s the fourth-number field on the form. This field name can be used for various purposes such as Fetch data from url parameter.

Mollie Accounts: Select the Mollie account you want to use for collecting payments. You can connect with multiple Mollie accounts and choose the one you prefer.

Redirect Page Url: After a successful payment, choose the page where you want to redirect the user.

Page URL: After a successful payment, you can specify a page URL to redirect users to.

To redirect to the Mollie successful payments page, you can use the shortcode. Just copy the shortcode, create a new page, paste the shortcode into the page, and then publish it. After that, copy the page URL and paste it into the “Page URL” field in the Bit Form Builder.

Use this shortcode:

[bitform_payments]Copy

Pay Button Text: You can customize your button text.

Payment Method: You can select a payment method, and add multiple options if desired. By default, the Credit Card option is selected.

Currency: Select your preferred currency type.

Amount Type: There are two types of amount options: Fixed and Dynamic.

Fixed: If the admin wants to set a payment limit, they need to choose this option. For example, if you’ve created a form for a specific sale, you should set the payment amount in the field.

First, select “Fixed” as the Amount Type. Then, enter the amount in the field. Every time a user uses this form to make a payment, 10.00 will be transferred to your Mollie account.

Dynamic : For dynamic payments, admins need to add a Number field or Radio Button where users can choose or enter the amount they want to pay.

When you choose “Dynamic” as the Amount Type, you need to select the field where users will enter the amount they want to pay. In this example, I added a Number field and named it “Enter Amount.” I then selected this “Enter Amount” field as the amount field.

Description: You can add a description here. You can also use Bit Form Field Keys and Smart Tags.

In the demo video below, I added my description. For the Payment Date, I used the smart tag ${_bf_current_time} to display the current date and time. You can learn more about Smart Tags here. I also used the Full Name and Email field keys to map to Contact Name and Contact Email. If you want to use your own field keys, just use this format: ${field key}.

Locale: You can choose the language for the payment pages shown to the customer.

Full Width: Enabling this option you can make a full-width button

Text Align: You can set the alignment of your text.

Hidden: This option allows you to make the field hidden when the form is displayed on the front end.

After setting up Mollie, click the Update button at the top-right corner.

In the demo video below, I customized the Mollie settings according to my preferences and clicked the Update button. Then, I went to my payment page, submitted a form, and clicked on Pay with Mollie. I entered a demo card number, cardholder name, expiration date, and CVV, then clicked Pay. After a successful payment, the page redirected to the Mollie Successful Payment page.