Searching for the best way to accept Bancontact payments on WordPress?

Bancontact is the dominant payment method in Belgium, so it’s an important option to offer if you want to accept payments from people in Belgium (as well as other nearby countries that Bancontact supports).

With Gravity Forms and Stripe, you can easily create customizable WordPress payment forms that let shoppers make their payments with Bancontact, along with any other payment options that you choose to enable.

In this tutorial, we’ll show you exactly how to set up WordPress Bancontact payments without requiring any special technical knowledge.

Here’s an example of what you’ll be able to build by the end of this post:

Let’s go…

Why Use Bancontact for WordPress Payments?

Bancontact is one of the most popular payment solutions in Belgium, so it’s a great option if you’re based in Belgium or have a lot of customers in Belgium.

There are ~17 million Bancontact cards in circulation in Belgium, which is even higher than Belgium’s ~12 million population. Bancontact also has relationships with most major banks in Belgium, which means that pretty much every person in Belgium can leverage Bancontact for payments.

It’s also very convenient for people to use, as they can use both Bancontact cards and app-based payments.

Beyond its dominant presence in Belgium, Bancontact is also expanding into other nearby European countries such as the Netherlands, France, and Luxembourg. This is especially true in border regions of those countries, where there are a lot of cross-border interactions.

Bancontact also has slightly lower fees than credit or debit cards, which means you’ll lose less money to processing fees. Stripe charges just 1.4% + €0.25 for Bancontact payments.

For comparison, Stripe charges 1.5% + €0.25 for standard European Economic Area cards and 1.9% + €0.25 for premium cards.

What You Need to Accept Bancontact Payments on WordPress

To follow this tutorial and start accepting Bancontact on your site, you’ll need two tools:

1. A free Stripe account – If you’re not familiar with Stripe, it’s a payment processing solution that not only lets you accept credit/debit card payments, but also tons of other services, including Bancontact.
2. Gravity Forms and the official Stripe Add-On – This plugin lets you actually integrate Bancontact and Stripe into WordPress. You can create custom payment forms to accept payments in all different kinds of ways. You can use your forms to accept preset amounts or as lightweight ecommerce or invoicing tools.

How to Accept Bancontact Payments with WordPress and Gravity Forms

Now, let’s get into the actual step-by-step tutorial for how to accept Bancontact payments on WordPress.

For this guide, we’ll assume that you’ve already done the following:

1. Registered for your free Stripe account. If you don’t have a Stripe account yet, you can register for one here.
2. Purchased at least the Gravity Forms Pro license, which is what you need to access the Stripe Add-On. If you don’t have your license yet, you can purchase one here.

Other than those two things, we’ll cover every single step in the tutorial below.

1. Install Gravity Forms and the Stripe Add-On

To start, you’ll need to install the Gravity Forms plugin on your site, as well as the Stripe Add-On and any other add-ons that you want to use.

If you don’t already have a Gravity Forms license, you can purchase one here. You’ll need either a Pro or Elite license so that you can access the Stripe Add-On.

When you install Gravity Forms, make sure to choose Euro as your default currency in the setup wizard, as Bancontact will not function otherwise. You can change the currency at any time by going to Forms → Settings.

Once you’ve installed the core Gravity Forms plugin and added your license key, here’s how to install the Stripe Add-On:

1. Go to Forms → Add-Ons in your WordPress dashboard.
2. Find the Stripe Add-On in the list.
3. Click Install.
4. Once the installation process finishes, make sure to activate the add-on on your site.

For WordPress Bancontact payments, you only need the Stripe Add-On. However, you might also want to install other add-ons based on your unique needs.

For example, if you want to subscribe people to your email list after they make their Bancontact payments, you could install the add-on for your chosen email marketing service.

2. Connect WordPress to Stripe

Next, you’ll need to connect your WordPress site to Stripe via the Gravity Forms settings area.

We’ll show you the quick version of this below. However, if you want more details, you can read our full documentation on using the Stripe Add-On and connecting your site to Stripe.

Connect to Stripe

1. Open your WordPress dashboard.
2. Go to Forms → Settings.
3. Select the Stripe tab in the settings area.

Now, you can use the settings to connect to Stripe. To begin, we recommend connecting your site in Test Mode.

This will essentially put your payment forms in sandbox mode. You can submit test payments using dummy data to make sure everything is working, but Stripe won’t process any live Bancontact payments.

Once you’re happy with how your form is working, you can come back here and enable Live Mode to process real payments (which we’ll cover later in the tutorial).

After you select the Test radio button, click Connect with Stripe to advance.

This will take you to the Stripe website. Select the Stripe account that you want to connect to and then click Connect.

This should take you back to your WordPress dashboard.

Add Webhooks and Signing Secret

Next, you need to add the Gravity Forms webhook URL in your Stripe account. This will then give you a Signing Secret key that you can add to the Stripe Add-On settings area in your WordPress dashboard.

To view the URL that you need to add, you can click the View Instructions link in your WordPress dashboard.

This will display a popup, including the URL that you need to add to Stripe.

Now, use Stripe Workbench to create a test endpoint URL by clicking this link.

If you don’t see the Workbench interface and are instead redirected back to your main Stripe dashboard, you’ll first need to enable Stripe Workbench in the Stripe Developers settings. While Stripe has made Workbench the default experience for new Stripe accounts, existing Stripe account holders will not see Workbench unless they enable it.

Here’s how to configure your webhook/event destination:

• Events from: Your account.
• API version: Latest version.
• Events: check the Select all events checkbox.

Then, click Continue.

On the next screen, choose Webhook endpoint and click Continue.

Then, paste in the webhook URL that you copied from your WordPress dashboard and click Create destination.

Now, you need to locate your Signing secret, which should start with whsec. You can see this in the Destination details  column.

If you don’t see the correct interface, you can select Webhooks in Workbench and then click on your WordPress site’s webhook URL.

Then, go back to your WordPress dashboard and paste that value into the Test Signing Secret box. You should also check the box saying that you’ve enabled the webhook URL.

To finish things out, click Save Settings in your WordPress dashboard.

3. Enable Bancontact in the Stripe Payment Method Settings

In order to activate Bancontact as a payment method, you’ll need to enable it in your Stripe account for both Test mode and Live mode. That is, you’ll need to turn it on in two separate interfaces so that you can use Bancontact when testing your payment form, as well as when you accept live payments.

Here’s how to do it:

1. Open the payment methods area in Stripe – you can click this link for live mode and this link for test mode.
2. Click on the Default drop-down and choose the “Gravity Forms by Rocketgenius” configuration.
3. Find the Bancontact option – it should be at the bottom under Bank redirects.
4. Click Turn on. If a popup appears, click Request access.
5. Look for the green checkmark and Active text, which confirms that Bancontact will be active for your payment forms.

Here’s how to choose the “Gravity Forms by Rocketgenius” configuration:

And then here’s how to turn on Bancontact:

Note – you must enable Bancontact in both live mode and test mode if you want to test your form before accepting live payments.

4. Create Your WordPress Bancontact Payment Form

Now, you’re ready to set up your WordPress Bancontact payment form. This is the form that users will interact with to make their payments via Bancontact.

To begin, go to Forms → New Form.

To save time, we recommend using the Stripe Checkout Form Template, as it will include all the essential fields that you need. However, you’re also free to start from a blank canvas or one of the different templates.

After you give your form a name, you should be taken to the drag-and-drop form builder interface.

You’re now free to customize your form according to your preferences.

For a payment form, you’ll want to include a few essential types of fields, all of which are included in the form template:

• General information fields – these let you collect basic information from each person, such as their name, email address, billing/shipping address, and so on.
• Product pricing fields – these are what control the price that each person will be charged. You could charge the same price to every single person or you could adjust the price based on each person’s inputs.
• Stripe field – this is what actually adds the Stripe payment options, including Bancontact. You won’t see a preview of this field until you create a Stripe feed, which we’ll cover in the next steps.

For more on the product pricing fields, you can check out these documentation articles:

• Product field
• Quantity field
• Shipping field
• Total field

Here’s an example of what our Bancontact form looks like with the default Stripe Checkout Form template.

5. Set Up a Stripe Feed to Control Payment Processing

To control how to process the payments submitted via your form, you can use a “feed”.

The feed lets you specify what amount to charge using Bancontact or other payment methods, and how to map information from your form to Stripe.

To create a Stripe feed, go to Settings → Stripe inside the form builder. Then, choose Add New.

On the next screen, you’ll first need to choose the Transaction Type. For a one-time Bancontact payment, choose the Products and Services option.

Next, use the Payment Amount drop-down to choose which amount you want to charge the person who submits the form. Usually, you’ll set this equal to the Form Total.

Below that, you can map billing information from your form to Stripe. Once you’ve done that, click Save Settings.

For more details about all of the options here, check out the Stripe feed documentation.

6. Configure the Stripe Form Field

Once you’ve set up your Stripe feed, you can go back to the form builder interface to configure the Stripe form field.

For the most part, you can configure the field settings according to your preferences.

However, to ensure that Bancontact shows up as a payment option, you must check the box to Enable additional payment methods. This will display the additional payment methods (including Bancontact) that you’ve enabled in your Stripe dashboard in Step #3.

Note: After checking the box, you still might not see the Bancontact option in the preview in the form editor. However, when you actually embed the form on your site, it will show as a payment option for visitors who are eligible to use it.

7. Set Up Other Integrations As Needed

At this point, your form is finished when it comes to setting up the Bancontact payment functionality.

However, one of the great things about using Gravity Forms for your Bancontact payments is that you can also add other functionality and integrations to your forms.

For example, you could add people to your customer relationship manager (CRM) after they make a payment or give them an option to subscribe to your email newsletter.

These are 100% optional. However, if you do want to add these types of integrations, the process usually works like this:

1. Go to Forms → Add-Ons and install the add-on for the service that you want to integrate with.
2. Go to Forms → Settings and connect your site to that service. Typically, this involves adding an API key or some similar step.
3. Add the service to your form, which typically requires adding a form field and/or setting up a feed.

8. Embed Your Form and Start Accepting Bancontact Payments

Now, you’re ready to embed your form and test it to make sure that it’s working properly.

To embed your form, you can use the Gravity Forms block or shortcode to add it to any page on your site.

You can also use the Orbital Form Theme to style your payment form directly from the block editor.

Once you embed your form, you can open it on the front end of your site to test it. You should see Bancontact appear as a payment method.

If you don’t see Bancontact as a method, here are some things to test/check:

• Make sure that your Gravity Forms Default Currency is set to Euro. Bancontact will not display if you’re using a different currency. You can check/change this by going to Forms → Settings in your WordPress dashboard and using the Default Currency drop-down.
• Make sure that you specifically enabled Bancontact as a payment option for the “Gravity Forms by Rocketgenius” configuration. It’s not enough to just enable it for your default Stripe account.

To make a test payment, you can submit the form with Bancontact selected as the payment method. This will take you to the Bancontact test payment page. You can click the Authorize Test Payment button to make the test payment.

The test payment should appear in both your WordPress dashboard and your Stripe dashboard.

9. Enable Live Mode to Accept Real Payments

If the test payment worked as you expected it to, you’re ready to start accepting live payments via Bancontact.

To do this, all you need to do is enable and set up Live Mode in the Gravity Forms Stripe Add-On settings:

1. Go to Forms → Settings → Stripe in your WordPress dashboard.
2. Change the Mode from Test to Live.
3. Repeat the exact same steps from Step #2 in this tutorial. You’ll connect to Stripe, add your webhook URL in your Stripe account, and then add the Live Signing Secret to the plugin settings. The only difference is that you’ll do these things in your Live Stripe dashboard instead of your Test Stripe dashboard.

Once you set up the live connection, you’ll be able to accept live Bancontact payments and you’re good to go!

Start Using Bancontact on WordPress Today

If you want to accept payments from people in Belgium and other nearby countries, offering Bancontact as a payment option is a great choice as it enjoys widespread familiarity in those areas. As an added bonus, processing Bancontact payments costs a little bit less than credit card payments.

With Gravity Forms and Stripe, you can easily accept Bancontact payments on WordPress, while still giving customers the option to use other payment methods, such as their credit or debit cards.

If you’re ready to get started, purchase the Gravity Forms Pro or Elite license today so that you can access the official Stripe Add-On. Then, follow this tutorial to start accepting Bancontact payments on your site.