DEV Community

Cover image for Create a Payment Form on WordPress with Flutterwave
Olaobaju Jesulayomi Abraham
Olaobaju Jesulayomi Abraham

Posted on

Create a Payment Form on WordPress with Flutterwave

Requirements

Flutterwave Payments is the official Flutterwave plugin for WordPress Integration. A key feature is payment forms.

  • Flutterwave for business API Keys
  • PHP version: 7.4 or higher.

Installation

You can install the plugin via Github or WordPress.org

For manual installation, simply download the zip file of the plugin.

install plugin manually

On the top left of the page, click on the ‘upload plugin’ button and upload the zip file.

Upload plugins

click on “Install Now”.

install flutterwave payments now button

After installation you should notice the Flutterwave logo on the side-bar.

flutterwave logo on installation

Setting up the plugin.

Now the plugin is installed. Click on the settings options. Make sure you fill required fields ( API keys and redirect URLS ).

setup your Webhook. The importance of this is covered here.

To setup your Webhook, simply copy the URL in red and paste it on your Flutterwave Dashboard.

Webhook URL

Dashboard Webhook Settings

Ensure the the secret hash used is the same as the one specified on your Flutterwave Dashboard.

Webhook Setup

Add Redirect URL for the following events: pending, success, and failed.

Redirect URLS

To use your site theme to style the form. check the checkbox below.

Style Preference

Confirm all changes and hit the “Save Changes” button.

Usage

To render the form, you need to add or apply the following shortcodes

[flw-pay-button]

This shortcode renders a payment form with the following default fields.

  1. email
  2. phone
  3. amount
  4. currency

If you see a notice similar to the image below kindly review your settings.

warning notice

Fields and Form Customisation.

  1. To add a fullname field to the form use the short code below
[flw-pay-button fullname=1]
Enter fullscreen mode Exit fullscreen mode
  1. To specify the currencies to be displayed on the form use the shortcode below.
[flw-pay-button currency=USD,UGX,NGN]
Enter fullscreen mode Exit fullscreen mode
  1. To exclude fields from the form use the shortcode below.
[flw-pay-button currency=USD,UGX,NGN exclude=phone ]
Enter fullscreen mode Exit fullscreen mode
  1. To add custom fields to the form use the shortcode below.
[flw-pay-button currency=USD,UGX,NGN custom_fields=age:number,color:select|black:#000|white:#fff’]
Enter fullscreen mode Exit fullscreen mode

you can create regular fields as well as dropdown fields.

  1. To change the order of the fields use the shortcode below
[flw-pay-button currency=USD,UGX,NGN order=currency,fullname,amount,phone,email]
Enter fullscreen mode Exit fullscreen mode

if you ommit any of the default fields or custom fields they would not show on the form.

Top comments (0)