DEV Community

Chris Achinga
Chris Achinga

Posted on • Originally published at chrisdevcode.hashnode.dev on

How To Create a Payment Form on WordPress using Flutterwave

Making payments online should be seamless and less frustrating. I conquered my fear and tested out Flutterwave and I was really impressed. Here is how to create a simple payment form using Flutterwave and WordPress.

What you'll need

  • Xampp
  • WordPress
  • Flutterwave Account (Test Mode/Live)

To get started with WordPress in your local development environment, here is a step by step guide:

How To Install WordPress in Windows

Creating Flutterwave Account

  1. Create a flutterwave account.
  2. Go to settings, and under the API tab, you'll get your API keys.

flutterwave_dash.png

Flutterwave WordPress Plugin

Flutterwave has a built-in WordPress plugin.

On your WordPress Admin page, go to plugins and click on add new.

Search for Flutterwave Payment Forms

Screenshot_1.png

Install the plugin by Flutterwave Developers, (top left on the screenshot). After installation is complete, click on Activate to activate the plugin.

Screenshot_2.png

After activation, you'll be taken to the installed plugins page, and on the top of the page, click on the big blue button to enter your Flutterwave API keys.

Screenshot_3.png

Select the payment method from the dropdown options:

Screenshot_4.png

Scroll down to select payment currency

Screenshot_5.png

Other fields are optional, go ahead and save the settings.

Using flutterwave shortcode

To be able to add the flutterwave payment forms, simply add the shortcodes into a WordPress page. The codes are as follows:

// button
 [flw-pay-button]

// button with text
[flw-pay-button]Button Text[/flw-pay-button]

Enter fullscreen mode Exit fullscreen mode

On the editing page, select shortcode from the editing block:

Screenshot_6.png

Insert the shortcode of your choice (flutterwave shortcode):

Screenshot_7.png

Save and preview the page:

Screenshot_8.png

Testing the Payment Form

Fill out the form and click on Pay Now to see what happens:

Screenshot_9.png

You'll be redirected to a flutterwave modal box:

Screenshot_10.png

As shown, a user can select a preferred payment method

Once the payment is complete, the transaction will reflect on your flutterwave dashboard, under the transactions tab:

Screenshot_13.png

Parting Short

Flutterwave has made it simpler and easier to add payments functionalities, WordPress is one of the examples. It also gives you an option for mobile payments (M-Pesa for my Country) and card payments

Top comments (0)