How to Integrate PayPal in Bubble

Log into developer.paypal.com. Navigate to Apps & Credentials. Create a new app or use the default. Copy the Client ID and Secret for both Sandbox (testing) and Live environments. Store the Secret in the API Connector as a private parameter — never expose it client-side. The Client ID is safe for client-side use in the button embed.

Add an HTML element where you want the PayPal button. Paste the PayPal SDK script and button rendering code. The SDK loads PayPal's button UI. In the createOrder function, specify the purchase amount. In the onApprove function, capture the payment and pass the transaction ID back to Bubble.

1<div id="paypal-button-container"></div>
2<script src="https://www.paypal.com/sdk/js?client-id=YOUR_CLIENT_ID&currency=USD"></script>
3<script>
4paypal.Buttons({
5  createOrder: function(data, actions) {
6    return actions.order.create({
7      purchase_units: [{
8        amount: { value: '29.99' }
9      }]
10    });
11  },
12  onApprove: function(data, actions) {
13    return actions.order.capture().then(function(details) {
14      // Pass to Bubble via Toolbox or custom state
15      console.log('Transaction completed by ' + details.payer.name.given_name);
16    });
17  }
18}).render('#paypal-button-container');
19</script>

Use the Toolbox plugin's 'JavaScript to Bubble' element to bridge PayPal's JavaScript callback with Bubble workflows. Create a JavascriptToBubble element with a trigger name like 'paypal_complete'. In the onApprove callback, call bubble_fn_paypal_complete(JSON.stringify(details)). Create a workflow on the JavascriptToBubble element that creates a Payment record with transaction_id, payer_email, amount, and status from the parsed JSON.

For security, verify the payment on the server. Set up an API Connector call to PayPal's order details endpoint (GET https://api-m.paypal.com/v2/checkout/orders/ORDER_ID). Use OAuth authentication with your Client ID and Secret. After creating the Payment record, call this API to verify the amount and status match what the user reported. Only fulfill the order if the server-side verification confirms payment.

In the PayPal developer dashboard, navigate to Webhooks and add a webhook URL pointing to a Bubble backend API workflow. Subscribe to events like PAYMENT.CAPTURE.COMPLETED and PAYMENT.CAPTURE.REFUNDED. Create the backend workflow to process these events — update payment status, handle refunds, and notify users.