DEV Community

c a
c a

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

1

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)

👋 Kindness is contagious

Explore a trove of insights in this engaging article, celebrated within our welcoming DEV Community. Developers from every background are invited to join and enhance our shared wisdom.

A genuine "thank you" can truly uplift someone’s day. Feel free to express your gratitude in the comments below!

On DEV, our collective exchange of knowledge lightens the road ahead and strengthens our community bonds. Found something valuable here? A small thank you to the author can make a big difference.

Okay