On this page:
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.
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:
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. | MANDATORY |
merchant_key | This is the merchant_key that can be located on the payfast.co.za dashboard under the Integration Settings menu. | MANDATORY |
return_url | This is the url that you would like to return the user to should the payment be successful. This is usually a Thank You page with additional instructions for the order (E.g. Download details) | MANDATORY |
cancel_url | This is the url that you would like to return the user to should they decide to cancel the payment. This is usually the page where the checkout button is located. The user should be able to purchase again from this page. | MANDATORY |
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 | MANDATORY |
name_first | This is the first name of the buyer. | OPTIONAL |
name_last | This is the last name of the buyer. | OPTIONAL |
email_address | This is the email address of the buyer | OPTIONAL |
cell_number | This is the cell number of the buyer. | OPTIONAL |
m_payment_id | This is the unique payment ID on your bubble app. | OPTIONAL |
amount | This is the amount to be charged. This should be an integer value. | MANDATORY |
item_name | This is the name of the item being charged. | MANDATORY |
item_description | This is the description of the item being charged | OPTIONAL |
email_confirmation | Check this box if you want to send an order confirmation from PayFast to the customer. | OPTIONAL |
confirmation_address | Enter the email address where you would like to send the order confirmation email from PayFast. Only enter this value if you have checked the email_confirmation checkbox | OPTIONAL |
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:
This should be the last action in your workflow as the user will be redirected to PayFast for payment.