Braintree

Go to sandbox.braintreegateway.com and sign in (or create a sandbox account — it's free and separate from the live gateway). Once inside, your Merchant ID is visible in the top-right corner of the page, sometimes under Account → Business. To get API keys, navigate to Account → My User → API Keys. If no key exists, click Generate New API Key. Each key row shows a Public Key and a Private Key (click the eye icon or expand the row). The Public Key is safe to use client-side — it's how the Braintree client SDK identifies your gateway without authentication rights. The Private Key is the server secret that authorises sale transactions and refunds — never paste this in FlutterFlow. Store all three values (Merchant ID, Public Key, Private Key) securely. For the native FlutterFlow integration, you'll paste the Merchant ID and Public Key into the Payments settings. For custom flows, the Private Key goes into Firebase Functions config or Supabase secrets.

For simple one-off payment collection — a product purchase, a service fee, a donation — FlutterFlow's native Payments integration is all you need. In FlutterFlow, navigate to Settings & Integrations in the left panel → Payments. You'll see two options: Stripe and Braintree/PayPal. Enable the Braintree/PayPal toggle. FlutterFlow will ask for your Merchant ID and Public Key (not your Private Key — the native integration uses the client-side Drop-in UI component, which only needs your public identifier to tokenise the card). Paste your sandbox Merchant ID and Public Key from the previous step. Once configured, FlutterFlow exposes a Braintree Payment action in the Action Flow Editor. On your checkout screen, add a button, open its Actions panel, click + Add Action → Payments → Braintree. Configure the amount (you can bind it to a variable), currency, and optional item description. When the user taps the button, the Braintree Drop-in UI appears, the user enters their card (or taps PayPal if enabled in your Control Panel), and the nonce is sent to FlutterFlow's internal server-side handler. Note: for production you'll update the Merchant ID and Public Key to your live gateway credentials.

For any flow beyond the native checkout — refunds, subscription billing with vaulted cards, custom payment UI, or reading transaction history — you need to call Braintree's API from a backend proxy. Braintree uses Basic Auth: the Authorization header is 'Basic ' followed by base64(publicKey:privateKey). Braintree actively recommends its GraphQL API (https://payments.braintree-api.com/graphql) for new integrations over the legacy REST SDK. For the client-token → nonce → sale flow: Endpoint 1 — POST /client-token: calls Braintree's GraphQL mutation createClientToken{clientToken} and returns the token to the app. Endpoint 2 — POST /create-sale: receives a paymentMethodNonce (from the Drop-in UI or SDK in the app), amount, and optional customer_id; runs the chargePaymentMethod GraphQL mutation with the nonce and returns the transaction ID and status. For refunds: POST /refund-transaction receives a transactionId and amount, runs the reverseTransaction or refundTransaction GraphQL mutation. Store the Public Key and Private Key in Firebase Functions config or Supabase secrets — not in the FlutterFlow API Call headers.

1// Firebase Cloud Function: Braintree proxy (Node.js)
2const functions = require('firebase-functions');
3const axios = require('axios');
4const cors = require('cors')({ origin: true });
5const express = require('express');
6const app = express();
7app.use(cors);
8app.use(express.json());
9
10const BT_GRAPHQL = 'https://payments.braintree-api.com/graphql';
11// For sandbox: 'https://payments.sandbox.braintree-api.com/graphql'
12
13function btHeaders() {
14  const publicKey = functions.config().braintree.public_key;
15  const privateKey = functions.config().braintree.private_key;
16  const credentials = Buffer.from(`${publicKey}:${privateKey}`).toString('base64');
17  return {
18    Authorization: `Basic ${credentials}`,
19    'Content-Type': 'application/json',
20    'Braintree-Version': '2019-01-01',
21  };
22}
23
24// 1. Generate client token
25app.post('/client-token', async (req, res) => {
26  const query = `mutation { createClientToken { clientToken } }`;
27  const response = await axios.post(BT_GRAPHQL, { query }, { headers: btHeaders() });
28  res.json({ token: response.data.data.createClientToken.clientToken });
29});
30
31// 2. Create sale from nonce
32app.post('/create-sale', async (req, res) => {
33  const { nonce, amount } = req.body;
34  const query = `
35    mutation ChargePaymentMethod($input: ChargePaymentMethodInput!) {
36      chargePaymentMethod(input: $input) {
37        transaction { id status }
38      }
39    }`;
40  const variables = {
41    input: {
42      paymentMethodId: nonce,
43      transaction: { amount },
44    },
45  };
46  const response = await axios.post(BT_GRAPHQL, { query, variables }, { headers: btHeaders() });
47  const tx = response.data.data.chargePaymentMethod.transaction;
48  res.json({ transaction_id: tx.id, status: tx.status });
49});
50
51exports.braintree = functions.https.onRequest(app);

In FlutterFlow, click API Calls in the left navigation panel → + Add → Create API Group. Name it BraintreeProxy. Set the Base URL to your deployed Firebase Cloud Function or Supabase Edge Function URL. Add two API Calls: GetClientToken (POST /client-token, no body variables needed) and CreateSale (POST /create-sale, body variables: nonce [String], amount [String]). In Response & Test for GetClientToken, paste { "token": "eyJy...base64..." } and generate paths to get $.token. For CreateSale, paste { "transaction_id": "abc123", "status": "SUBMITTED_FOR_SETTLEMENT" } and generate paths. To collect the nonce from the user (their card details), the simplest path in a custom flow is to use Braintree's Drop-in UI by adding an in-app WebView that loads a small hosted HTML page you control (hosted on Firebase Hosting or Supabase Storage) that renders the Braintree Drop-in UI using their JavaScript SDK, then returns the nonce back to the app via a deep link or JavaScript bridge. Alternatively, for simple card entry without a native SDK, use the client token with Braintree's hosted fields — a more advanced pattern. For most FlutterFlow builders, the native Payments toggle (Step 2) plus the proxy for back-end operations (refunds, reporting) is the right split: use native for collecting payment, use the proxy API Calls for everything after.

1// Sample responses for FlutterFlow API Call → Response & Test:
2
3// GetClientToken:
4{ "token": "eyJ2ZXJzaW9uIjoyLCJhdXRob3JpemF0aW9uRmluZ2VycHJpbnQiOi..." }
5
6// JSON Path: $.token
7
8// CreateSale:
9{
10  "transaction_id": "dj3fhk",
11  "status": "SUBMITTED_FOR_SETTLEMENT"
12}
13// JSON Paths:
14// $.transaction_id
15// $.status

Braintree sandbox accepts specific test card numbers. Use 4111 1111 1111 1111 (Visa, always succeeds), 4000 1111 1111 1112 (Visa, always fails with processor declined), and 4000 0000 0000 0002 (Visa, CVV verification failure) to exercise success and error paths. Any future expiry date and any 3-digit CVV work with these sandbox numbers. In the Braintree Control Panel sandbox, go to Transactions to see each test charge appear in near-real-time. Test your proxy endpoints: call /client-token, then use the returned token to simulate a nonce (Braintree sandbox provides 'fake-valid-nonce' and 'fake-processor-declined-nonce' as hardcoded test nonces for direct proxy testing without a UI). Pass these test nonces to /create-sale and confirm you see the transaction in the Control Panel. For PayPal testing: the sandbox PayPal button opens a fake PayPal login — use the sandbox buyer account credentials from your Braintree Control Panel under Sandbox → Test Accounts. Once all flows are validated in sandbox, switch to live by: (1) creating or activating your live Braintree merchant account at braintreegateway.com; (2) updating Firebase config with your live Public Key, Private Key, and Merchant ID; (3) changing the GraphQL endpoint from sandbox to live in the proxy; (4) updating FlutterFlow's Payments settings with your live Merchant ID and Public Key. If you want RapidDev to handle the proxy setup and testing for you, free scoping call at rapidevelopers.com/contact.

1// Braintree sandbox test card numbers:
2// 4111 1111 1111 1111 — Visa, always succeeds
3// 4000 1111 1111 1112 — Visa, processor declined
4// 4000 0000 0000 0002 — Visa, CVV verification failure
5// Any future expiry (e.g. 12/30), any CVV (e.g. 123)
6
7// Hardcoded sandbox test nonces for direct proxy testing:
8// fake-valid-nonce             — succeeds
9// fake-processor-declined-nonce — fails with processor_declined
10// fake-paypal-one-time-nonce   — PayPal one-time payment
11
12// Switch environments via Firebase config:
13// firebase functions:config:set braintree.env="live" braintree.public_key="live_pub" braintree.private_key="live_priv"