Versions Compared

Key

  • This line was added.
  • This line was removed.
  • Formatting was changed.

...

Panel

On this page:

Table of Contents

Introduction:

This documentation page covers installing and using the PayFast payment plugin on Bubble.io

1. Add the plugin to your bubble.io app

Open your Bubble application and navigate to the Plugins tab. Click ‘Add Plugins’ and install the plugin:

...

2. Add the PayFast element to your bubble page

Open the Design Tab of the page where you would like to trigger the PayFast payment. Add/Drag the PayFast element onto your page.

...

Info

This is usually the last page of your checkout process (I.e Checkout page)

3. Complete the element fields

Click on the PayFast element added to your page in step 2 and complete the fields below:

...

Image AddedImage Modified

Field Name

Description

Mandatory

merchant_id

This is the merchant_id that can be located on the payfast.co.za dashboard under the Integration Settings menu.

Status
colourRed
titlemandatory

merchant_key

This is the merchant_key that can be located on the payfast.co.za dashboard under the Integration Settings menu.

Status
colourRed
titlemandatory

return_url

This is the url that you would like to return the user to should the payment be successful.

Info

This is usually a Thank You page with additional instructions for the order (E.g. Download details)

Status
colourRed
titlemandatory

cancel_url

This is the url that you would like to return the user to should they decide to cancel the payment.

Info

This is usually the page where the checkout button is located. The user should be able to purchase again from this page.

Status
colourRed
titlemandatory

notify_url

Before PayFast returns your buyer to your app you can have transaction details posted to this url.

View fields in the notify_url via this link: https://developers.payfast.co.za/docs#step_4_confirm_payment

Status
colourRed
titlemandatory

name_first

This is the first name of the buyer.

Status
titleOptional

name_last

This is the last name of the buyer.

Status
titleOptional

email_address

This is the email address of the buyer

Status
titleOptional

cell_number

This is the cell number of the buyer.

Status
titleOptional

m_payment_id

This is the unique payment ID on your bubble app.

Status
titleOptional

amount

This is the amount to be charged.

Info

This should be an integer value.

Status
colourRed
titlemandatory

item_name

This is the name of the item being charged.

Status
colourRed
titlemandatory

item_description

This is the description of the item being charged

Status
titleOptional

email_confirmation

Check this box if you want to send an order confirmation from PayFast to the customer.

Status
titleOptional

confirmation_address

Enter the email address where you would like to send the order confirmation email from PayFast.

Info

Only enter this value if you have checked the email_confirmation checkbox

Status
titleOptional

4. Add the action to the workflow

From the button that you would like to trigger the payment, click on ‘Start/Edit Workflow' and add the action 'Start Checkout Payfast’ to your workflow:

...

Note

This should be the last action in your workflow as the user will be redirected to PayFast for payment.