2Checkout (now Verifone)

Log in to your 2Checkout/Verifone Merchant Control Panel at secure.2checkout.com (or the Verifone equivalent if your account has been migrated). Navigate to Account → Integrations → API & Webhooks section. Here you'll find two critical values: **Merchant Code**: a short alphanumeric string (e.g., 'ABCDE12345') that publicly identifies your merchant account in API requests. This is safe to store in FlutterFlow as an App Value (App Settings → App Values) — it's not a secret. **Secret Key**: a long string used to compute HMAC-SHA256 signatures. This MUST stay in your Firebase Cloud Function environment variable — never enter it into FlutterFlow. While in the Merchant Control Panel, navigate to Products → your product → click on it → look for the Buy Link URL. It looks like: `https://secure.2checkout.com/checkout/buy/?merchant=MERCHANTCODE&tpl=default&prod=PRODUCTCODE`. Save this URL. For the WebView approach in Step 3, you'll embed this URL directly — no HMAC signing needed. Also navigate to Account → Integrations → IPN Settings. You'll add an IPN URL here in a later step, once your Firebase Cloud Function is deployed. IPN is how 2Checkout tells your server about completed payments, charge-backs, and refunds — it's the equivalent of webhooks and is the only reliable server-side payment confirmation.

The Cloud Function is the heart of your 2Checkout integration. It does three things: generates the HMAC-SHA256 X-Avangate-Authentication header on every request (using your Secret Key, Merchant Code, and current timestamp), proxies the signed request to https://api.2checkout.com/rest/6.0, and returns the response to FlutterFlow. The authentication header format required by 2Checkout is: `code="MERCHANTCODE" date="DATE" hash="HMAC_SHA256_HEX"`. The HMAC input string is `strlen(MERCHANTCODE) . MERCHANTCODE . strlen(DATE) . DATE` where strlen is a character count (not a hash). An incorrect format returns AUTHORIZATION_ERROR — the exact error string from 2Checkout's API. In your Firebase project's `functions/index.js`, paste the code below. Set environment variables before deploying: ``` firebase functions:config:set twocheckout.merchant_code='YOUR_CODE' twocheckout.secret_key='YOUR_SECRET' ``` Then deploy: `firebase deploy --only functions:twocheckoutProxy`. The function exposes a POST endpoint that accepts `{ endpoint, method, body }` from FlutterFlow — the endpoint is a relative path like '/orders' or '/subscriptions', the method is GET/POST, and body is the request body (for POST calls). The function constructs the full URL, adds the HMAC header, and forwards the request.

1const functions = require('firebase-functions');
2const axios = require('axios');
3const crypto = require('crypto');
4
5// Generates the 2Checkout/Avangate HMAC-SHA256 authentication header
6function generateAuthHeader(merchantCode, secretKey) {
7  const date = new Date().toGMTString();
8  const hmacInput = `${merchantCode.length}${merchantCode}${date.length}${date}`;
9  const hmac = crypto
10    .createHmac('sha256', secretKey)
11    .update(hmacInput)
12    .digest('hex');
13  return {
14    authHeader: `code="${merchantCode}" date="${date}" hash="${hmac}"`,
15  };
16}
17
18exports.twocheckoutProxy = functions.https.onRequest(async (req, res) => {
19  res.set('Access-Control-Allow-Origin', '*');
20  if (req.method === 'OPTIONS') {
21    res.set('Access-Control-Allow-Methods', 'POST');
22    res.set('Access-Control-Allow-Headers', 'Content-Type');
23    return res.status(204).send('');
24  }
25
26  const merchantCode = functions.config().twocheckout.merchant_code;
27  const secretKey = functions.config().twocheckout.secret_key;
28  const { endpoint, method = 'GET', body } = req.body;
29
30  if (!endpoint) {
31    return res.status(400).json({ error: 'Missing endpoint parameter' });
32  }
33
34  const { authHeader } = generateAuthHeader(merchantCode, secretKey);
35  const baseUrl = 'https://api.2checkout.com/rest/6.0';
36
37  try {
38    const response = await axios({
39      method: method.toLowerCase(),
40      url: `${baseUrl}${endpoint}`,
41      data: body || undefined,
42      headers: {
43        'X-Avangate-Authentication': authHeader,
44        'Content-Type': 'application/json',
45        'Accept': 'application/json',
46      },
47    });
48    return res.status(200).json(response.data);
49  } catch (error) {
50    const errData = error.response?.data || { error: error.message };
51    return res.status(error.response?.status || 500).json(errData);
52  }
53});

For straightforward product checkout — the most common use case — you don't need to call the REST API at all. 2Checkout/Verifone provides a hosted checkout page for every product that handles card entry, currency conversion, and receipt delivery. Embedding it as a WebView Custom Widget in FlutterFlow is the fastest path to a working checkout. In FlutterFlow, go to Custom Code in the left nav → + Add → Widget. Name it 'TwoCheckoutWebView'. In the Dependencies field, add 'webview_flutter' (latest stable, currently 4.x on pub.dev). Set two parameters: `checkoutUrl` (String) — the Buy Link URL — and `returnUrl` (String) — the URL you want 2Checkout to redirect to after payment. Paste the Dart code below, which displays the WebView and monitors URL changes. When the WebView navigates to your return URL, the widget calls an optional callback so your FlutterFlow Action Flow can show a success screen. On your checkout screen, drag the TwoCheckoutWebView widget from the Components panel, set the `checkoutUrl` to your product's Buy Link (from App Values), and set `returnUrl` to a URL you control (e.g. https://yourapp.com/payment-success — this URL doesn't need to serve anything real, it's just a signal). When 2Checkout redirects to that URL after payment, the WebView detects it and fires the success callback. For the customer, the experience is: tap 'Buy' → in-app browser opens → complete checkout in Verifone's hosted page → app shows confirmation screen. No card data ever enters FlutterFlow's widget tree.

1import 'package:webview_flutter/webview_flutter.dart';
2
3class TwoCheckoutWebView extends FlutterFlowWidget {
4  const TwoCheckoutWebView({
5    super.key,
6    required this.checkoutUrl,
7    required this.returnUrl,
8    this.onPaymentSuccess,
9  });
10
11  final String checkoutUrl;
12  final String returnUrl;
13  final Future<void> Function()? onPaymentSuccess;
14
15  @override
16  State<TwoCheckoutWebView> createState() => _TwoCheckoutWebViewState();
17}
18
19class _TwoCheckoutWebViewState extends State<TwoCheckoutWebView> {
20  late final WebViewController _controller;
21
22  @override
23  void initState() {
24    super.initState();
25    _controller = WebViewController()
26      ..setJavaScriptMode(JavaScriptMode.unrestricted)
27      ..setNavigationDelegate(
28        NavigationDelegate(
29          onNavigationRequest: (request) {
30            // Detect redirect to your return URL
31            if (request.url.startsWith(widget.returnUrl)) {
32              widget.onPaymentSuccess?.call();
33              return NavigationDecision.prevent;
34            }
35            return NavigationDecision.navigate;
36          },
37        ),
38      )
39      ..loadRequest(Uri.parse(widget.checkoutUrl));
40  }
41
42  @override
43  Widget build(BuildContext context) {
44    return WebViewWidget(controller: _controller);
45  }
46}

For order lookup, subscription management, refunds, or any REST API operation beyond simple checkout, set up an API Call in FlutterFlow that hits your Cloud Function. In the left nav, click API Calls → + Add → Create API Group. Name it '2CheckoutAPI'. Set the base URL to your Cloud Function URL (e.g. https://us-central1-PROJECT_ID.cloudfunctions.net). Leave Authentication as 'None' — the Cloud Function handles auth internally. Inside the group, click + Add API Call. Name it 'ProxyRequest'. Set the Method to POST. Set the endpoint to '/twocheckoutProxy'. In the Body tab, set body type to JSON and define three variables: - `endpoint` (String) — the 2Checkout API path, e.g. '/orders' or '/subscriptions/{{subscriptionId}}' - `method` (String) — 'GET' or 'POST' - `body` (JSON Object) — the request body for POST calls; pass an empty object for GETs Body template: ``` { "endpoint": "{{ endpoint }}", "method": "{{ method }}", "body": {{ body }} } ``` In Response & Test, paste a sample order response from the 2Checkout REST API documentation (or from a real test call). Click 'Generate JSON Paths' to create path variables for the fields you need — for example, `$.Status` for order status, `$.RefNo` for the order reference number, `$.Items[0].Name` for the first item name. For a subscription lookup, set `endpoint` to '/subscriptions' and `method` to 'GET'. For creating an order, set `endpoint` to '/orders' and `method` to 'POST' with the order body in the body variable. The Cloud Function handles signing both types of requests transparently.

1{
2  "endpoint": "{{ endpoint }}",
3  "method": "{{ method }}",
4  "body": {{ body }}
5}

The Buy Link WebView shows a success screen when the user is redirected, but the redirect alone is not a trustworthy confirmation — it can be triggered by the user navigating to the return URL manually. The authoritative payment confirmation comes from 2Checkout's IPN (Instant Payment Notification) — a server-to-server POST request that 2Checkout sends to your registered endpoint when a payment completes, fails, or is refunded. Create a second Firebase Cloud Function to receive IPN events. In your `functions/index.js`, add the IPN handler shown below. The IPN request contains order data plus a `HASH` parameter — verify this hash before trusting the data (compute it the same way as the authentication header and compare). The IPN handler should: 1. Verify the HASH to confirm the request is from 2Checkout (reject if mismatched — someone is spoofing) 2. Parse the order status and reference number from the IPN fields 3. Update the corresponding Firestore document (matched by order reference) to status 'paid' 4. Return HTTP 200 with the string 'AUTHORIZEDSALE' in the body — 2Checkout checks for this exact response and retries if it doesn't receive it After deploying the IPN function, register its URL in the 2Checkout Merchant Control Panel: Account → Integrations → IPN → Add URL → paste your Cloud Function URL. Select the event types you want to receive (at minimum: ORDER_CREATED, FRAUD_STATUS_CHANGED, REFUND_ISSUED). IPN is not real-time — it can arrive seconds to minutes after the payment. Show a 'Processing your order...' screen after the WebView redirect and poll Firestore for the status update rather than assuming it's immediate.

1const crypto = require('crypto');
2
3exports.twocheckoutIPN = functions.https.onRequest(async (req, res) => {
4  const secretKey = functions.config().twocheckout.secret_key;
5  const params = req.body;
6
7  // Verify IPN HASH
8  // 2Checkout signs IPN with HMAC-MD5 of specific fields (see 2CO docs for field order)
9  // Implementation: sort all fields alphabetically, concatenate values, HMAC-MD5 with secret
10  const receivedHash = params.HASH;
11  delete params.HASH;
12
13  const sortedKeys = Object.keys(params).sort();
14  const dataString = sortedKeys
15    .map(k => `${String(params[k]).length}${params[k]}`)
16    .join('');
17
18  const computedHash = crypto
19    .createHmac('md5', secretKey)
20    .update(dataString)
21    .digest('hex');
22
23  if (computedHash.toLowerCase() !== receivedHash.toLowerCase()) {
24    console.error('IPN hash mismatch — possible spoofing');
25    return res.status(403).send('HASH_MISMATCH');
26  }
27
28  // Update Firestore with order status
29  const admin = require('firebase-admin');
30  if (!admin.apps.length) admin.initializeApp();
31  const db = admin.firestore();
32
33  const orderRef = params.REFNOEXT; // Your internal order reference
34  const orderStatus = params.ORDERSTATUS; // e.g. 'PAYMENT_AUTHORIZED', 'COMPLETE'
35
36  await db.collection('orders').doc(orderRef).update({
37    status: orderStatus,
38    twocheckoutRef: params.REFNO,
39    updatedAt: admin.firestore.FieldValue.serverTimestamp(),
40  });
41
42  // 2Checkout expects this exact response to confirm receipt
43  return res.status(200).send('AUTHORIZEDSALE');
44});

With the WebView widget, Cloud Function proxy, and IPN handler in place, connect everything in your FlutterFlow UI. On your checkout screen, place the TwoCheckoutWebView Custom Widget and set its `checkoutUrl` to your product Buy Link (an App Value constant or a dynamic URL with product code appended). Set `returnUrl` to your return URL. Configure the `onPaymentSuccess` callback: in the Action Flow, this callback triggers when the WebView detects the redirect to your return URL. In the `onPaymentSuccess` Action Flow: 1. Create a Firestore document in 'orders' with: userId (from Authenticated User), orderStatus 'pending', createdAt (current datetime), and an orderRef (generate a UUID as your REFNOEXT — this should be passed as a URL parameter in the Buy Link, e.g. `&REFNOEXT=UUID`, so 2Checkout includes it in the IPN). 2. Navigate to an 'Order Pending' screen that shows 'We're confirming your payment...' with a loading indicator. 3. On the 'Order Pending' screen, set up a Firestore Document listener (the document you just created) — when the `status` field changes from 'pending' to 'COMPLETE' or 'PAYMENT_AUTHORIZED', the IPN Cloud Function will have updated it. Use a Conditional Widget or Action to navigate to a 'Payment Confirmed' screen when the status updates. For the REST API path (subscription or order management), add buttons on a 'My Account' screen that trigger API Calls to the ProxyRequest API Call with appropriate endpoint and method values. Parse the JSON Path variables and display them in Text widgets. If you'd rather skip the Cloud Function setup and IPN configuration, RapidDev's team builds FlutterFlow payment integrations like this every week — free scoping call at rapidevelopers.com/contact.