How to integrate PayPal in Bubble

Go to developer.paypal.com and log in. Navigate to Dashboard → My Apps & Credentials. Make sure you are in the Sandbox tab (not Live). Click 'Create App.' Name it (e.g., 'My Bubble App') and select Merchant as the type. After creation, you will see your Client ID and Secret. Copy both — you will need them in Bubble. The sandbox environment provides test buyer and seller accounts for testing payments without real money. Switch to the Live tab only when you are ready for production.

In Bubble, go to the Plugins tab → API Connector → Add another API. Name it 'PayPal.' Set Authentication to 'None / Self-handled' — you will handle OAuth2 manually for more control. Create the first API call named 'Get Access Token.' Set method to POST, URL to https://api-m.sandbox.paypal.com/v1/oauth2/token. Add a Header: Content-Type = application/x-www-form-urlencoded. Add another Header: Authorization = Basic [base64 of ClientID:Secret]. Add a Body parameter: grant_type = client_credentials. Mark the Authorization header as Private. Set 'Use as' to Action. Click Initialize to get the access token response.

1POST https://api-m.sandbox.paypal.com/v1/oauth2/token
2
3Headers:
4  Content-Type: application/x-www-form-urlencoded
5  Authorization: Basic {base64(ClientID:Secret)}
6
7Body:
8  grant_type=client_credentials
9
10Response:
11{
12  "scope": "...",
13  "access_token": "A21AAF...",
14  "token_type": "Bearer",
15  "app_id": "APP-80W...",
16  "expires_in": 32400
17}

Add a second API call in the PayPal API group named 'Create Order.' Set method to POST, URL to https://api-m.sandbox.paypal.com/v2/checkout/orders. Add Headers: Content-Type = application/json, Authorization = Bearer [access_token] (make this a dynamic parameter). For the Body, add a JSON payload with the order details including the amount and currency. Set 'Use as' to Action. Initialize with sample data. The response includes an order ID and an approval URL — the approval URL is where you redirect the customer to approve the payment on PayPal.

1POST https://api-m.sandbox.paypal.com/v2/checkout/orders
2
3Headers:
4  Content-Type: application/json
5  Authorization: Bearer <access_token>
6
7Body:
8{
9  "intent": "CAPTURE",
10  "purchase_units": [
11    {
12      "amount": {
13        "currency_code": "USD",
14        "value": "29.99"
15      },
16      "description": "Product purchase"
17    }
18  ],
19  "application_context": {
20    "return_url": "https://yourapp.bubbleapps.io/payment-success",
21    "cancel_url": "https://yourapp.bubbleapps.io/payment-cancel"
22  }
23}

On your payment page, add a Pay with PayPal button. Create a workflow: When button is clicked → Step 1: Call 'Get Access Token' action. Step 2: Call 'Create Order' action with the access_token from Result of step 1 and the dynamic amount from your product/cart. Step 3: Open an external website action → use the approval URL from Result of step 2 (the link with rel = 'approve'). The customer is redirected to PayPal to approve the payment. After approval, PayPal redirects them back to your return_url with a token parameter in the URL.

On your payment-success page, add a workflow for the 'Page is loaded' event. Step 1: Get the PayPal token from the URL using 'Get data from page URL → parameter token.' Step 2: Call 'Get Access Token' action. Step 3: Create a third API call named 'Capture Order' — POST to https://api-m.sandbox.paypal.com/v2/checkout/orders/[order_id]/capture with the bearer token. Call this action with the order ID from your stored data and the access token from Step 2. Step 4: If the capture succeeds (status = COMPLETED), update your Order record's status to Paid and show a success message.

In PayPal Developer Dashboard → My Apps → your app → Webhooks, click 'Add Webhook.' Enter your Bubble backend workflow URL. Select the event CHECKOUT.ORDER.APPROVED. In Bubble, create a Backend workflow called paypal-webhook. The webhook payload contains the order ID and payment status. Add actions to find the matching Order in your database and update its status. This is a safety net — even if the customer closes the browser before the return URL loads, the webhook confirms payment server-side. For complex payment flows with subscriptions or multi-currency support, RapidDev can help architect a robust PayPal integration.