Demo to preview the settings
Demo page: https://paypalsmartpayment.bubbleapps.io/
Introduction
A comprehensive payment processing solution crafted to integrate with the renowned PayPal payment system seamlessly. This plugin empowers businesses to effortlessly handle payment transactions and facilitate fund transfers with ease and security. It offers a hassle-free way to manage payments, ensuring a smooth and efficient payment experience for businesses and customers.
Prerequisites
To interact with the plugin you'll need to get the API credentials PAYPAL_SECRET and PAYPAL_CLIENT.
Create an account at https://developer.paypal.com/home/
How to setup
For demo purposes, all screenshots below are from Sandbox, but in Live this is the same.
- Go to https://developer.paypal.com/dashboard page.
Here you can toggle between Sandbox and Live environments.
- Select Apps & Credentials.
- If you have no app, create one.
- If you have already an app, select one from the REST API apps list.
- On the opened page, you have the API credentials section.
- Open plugin settings on your Bubble app.
- Paste the Client ID and Secret key from step 5 in the PAYPAL_CLIENT and PAYPAL_SECRET fields.
- For the PAYPAL_API field paste the following value:
Sandbox environment:
https://api-m.sandbox.paypal.comLive environment:
https://api-m.paypal.com
Plugin Elements Properties
The plugin has one visual element that can be used on the page: PayPalButon.
PayPalButon
Displays the PayPal button for payment.
Element Actions
- Initialize - This action is used to initialize the payment button for certain orders.
Fields:
Title | Description | Type |
Order ID | The ID of the order. | text |
Intent | The intent to either capture payment immediately or authorize a payment for an order after order creation. Accepted values: CAPTURE, AUTHORIZE. | text |
- Reset - This action is used to reset the payment button.
Element Events
Title | Description |
approved | This event is triggered when the order is paid successfully. |
Element States
Title | Description | Type |
payer | It contains the status of payment, the payer's email, his given name and surname. | text |
Plugin actions
- Сreate Order - Create a new order.
Fields:
Title | Description | Type |
Currency code | The three-character ISO-4217 currency code that identifies the currency. | text |
Amount | The value, which might be:
1. An integer for currencies like JPY that are not typically fractional.
2. A decimal fraction for currencies like TND that are subdivided into thousandths.
For the required number of decimal places for a currency code, see Currency Codes. | number |
Intent | The intent to either capture payment immediately or authorize a payment for an order after order creation. Accepted values: CAPTURE, AUTHORIZE.
CAPTURE - The merchant intends to capture payment immediately after the customer makes a payment.
AUTHORIZE - The merchant intends to authorize a payment and place funds on hold after the customer makes a payment. Authorized payments are best captured within three days of authorization but are available to capture for up to 29 days. After the three-day honor period, the original authorized payment expires and you must re-authorize the payment. You must make a separate request to capture payments on demand. This intent is not supported when you have more than one purchase_unit within your order. | Dropdown |
Description | The purchase description. The maximum length of the character is dependent on the type of characters used. The character length is specified assuming a US ASCII character. Depending on type of character; (e.g. accented character, Japanese characters) the number of characters that that can be specified as input might not equal the permissible max length. | text |
Returns:
Title | Description | Type |
order ID | The created order ID. | text |
response | The raw body response. | text |
- Authorize Order - Authorize payment for an order.
Fields:
Title | Description | Type |
order ID | The ID of the order. | text |
Returns:
Title | Description | Type |
authorization ID | The authorization ID for the order. | text |
response | The raw body response. | text |
- Create Payout - Create batch payout.
Fields:
Title | Description | Type |
Sender Batch ID | A sender-specified ID number. Tracks the payout in an accounting system. | text |
Email subject | The subject line for the email that PayPal sends when payment for a payout item completes. The subject line is the same for all recipients. Value is an alphanumeric string of up to 255 single-byte characters. | text |
Email message | The email message that PayPal sends when the payout item completes. The message is the same for all recipients. | text |
Recipient type | The recipient type. Value is:
1. EMAIL - The unencrypted email. Value is a string of up to 127 single-byte characters.
2. PHONE - The unencrypted phone number. Note: The PayPal sandbox does not support the PHONE recipient type.
3. PAYPAL_ID - The encrypted PayPal account number.
If the sender_bacher_header includes the recipient_type attribute, payout items use the recipient_type of the sender_batch_header, unless a payout item has its own recipient_type attribute. If the sender_batch_header omits the recipient_type attribute, each payout item must include its own recipient_type value. | Dropdown |
Receiver | The receiver of the payment. Corresponds to the recipient_type value in the request. Max value of up to 127 single-byte characters. | text |
Value | The value, which might be:
1. An integer for currencies like JPY that are not typically fractional.
2. A decimal fraction for currencies like TND that are subdivided into thousandths.
For the required number of decimal places for a currency code, see Currency Codes. | number |
Currency | The three-character ISO-4217 currency code that identifies the currency. | text |
Returns:
Title | Description | Type |
payout batch ID | The ID of the payout. | text |
- Get Payout - Get payout batch details.
Fields:
Title | Description | Type |
Payout Batch ID | The ID of the payout. | text |
Returns:
Title | Description | Type |
batch status | Refers to the current status of a payout batch. When you initiate a payout batch using the PayPal Payouts API, the batch goes through various states. | text |
time created | The created time of payout. | date |
- Capture Order - Capture authorized payment.
Fields:
Title | Description | Type |
Order ID | The ID of the order. | text |
Returns:
Title | Description | Type |
response | The raw body response. | text |
- Get Order -
Fields:
Title | Description | Type |
Order ID | The ID of the order. | text |
Returns:
Title | Description | Type |
status | The status of the order. | text |
intent | The intent of the order. | text |
create time | The create time of order. | text |
response | The raw body response. | text |
captured | The captured status of the order. | yes/no |
Workflow example
Creating an order
This example represents creating a CAPTURE order for $100.
- On the page is placed the following Button.
- In the workflow tab, when this Button is clicked it is called Сreate Order action.
- The Create Order action has the following fields.
- After the action, the obtained order ID is saved in the database.
Initialize PayPal Button
This example represents the initialization of the PayPal Button for payment.
- On the page is placed a Repeating Group with order list and PayPal Button.
- In the Repeating Group is used a Button for getting the details about the order.
- In the workflow tab, when this Button is clicked then are called the following actions.
- Firstly, the PayPal Button is reset.
- The Get Order action is called to get details for the selected order.
- Finally, the PayPal Button is initialized with the obtained details from Step 6.
