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.

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

click on “Install Now”.

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

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.

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

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

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

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.

Fields and Form Customisation.

1. To add a fullname field to the form use the short code below

[flw-pay-button fullname=1]

1. To specify the currencies to be displayed on the form use the shortcode below.

[flw-pay-button currency=”USD,UGX,NGN”]

1. To exclude fields from the form use the shortcode below.

[flw-pay-button currency=”USD,UGX,NGN” exclude=”phone ”]

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’]

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”]

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