How to integrate a cryptocurrency payment gateway in Bubble.io: Step-by-Step Gui

Go to the Plugins tab → API Connector → Add another API. Name it 'CoinbaseCommerce.' Set Authentication to 'Private key in header.' Key name: 'X-CC-Api-Key', Key value: paste your Coinbase Commerce API key (found in Commerce Dashboard → Settings → API keys). Check the 'Private' checkbox to keep the key server-side. Set the API base URL to https://api.commerce.coinbase.com.

Inside the CoinbaseCommerce API, add a new call named 'create_charge.' Set Use as: Action, Method: POST, URL: https://api.commerce.coinbase.com/charges. Add a header: Content-Type = application/json. In the Body, define the JSON payload with dynamic parameters for name, description, amount, and currency. Initialize the call with test values to map the response fields, especially 'hosted_url' which is the checkout page URL.

1{
2  "name": "<name>",
3  "description": "<description>",
4  "pricing_type": "fixed_price",
5  "local_price": {
6    "amount": "<amount>",
7    "currency": "<currency>"
8  },
9  "redirect_url": "<redirect_url>",
10  "cancel_url": "<cancel_url>"
11}

On your checkout page, add a 'Pay with Crypto' button. In the Workflow tab, create: When Button Pay with Crypto is clicked → Action: Plugins → CoinbaseCommerce - create_charge. Set parameters: name = your product name, description = order details, amount = the order total, currency = 'USD', redirect_url = your success page URL, cancel_url = your cancel page URL. Next action: Open an external website → URL = Result of step 1's hosted_url. Also create an 'Order' in your database with status = 'pending' and the charge code from the API response.

Go to the Workflow tab → click the pages dropdown → Backend workflows. Create a new backend workflow called 'coinbase_webhook.' Add a parameter 'event_type' (text). In the workflow, add a condition: Only when event_type is 'charge:confirmed.' The action: Do a search for Orders where charge_code = the charge code from the webhook payload → Make changes: status = 'confirmed.' In your Coinbase Commerce dashboard, go to Settings → Webhook subscriptions → Add endpoint: https://yourapp.bubbleapps.io/api/1.1/wf/coinbase_webhook.

On your success/redirect page, display the order status. Set the page Type of content to 'Order' and pass the order via URL parameter or data-to-send. Show a Text element: 'When Current Page Order's status is pending → Payment processing... Crypto payments can take 10-30 minutes to confirm.' Add another conditional: 'When status is confirmed → Payment confirmed! Thank you for your order.' Use a 'Do when condition is true' event to auto-refresh the order data every 30 seconds until the status changes.