Stripe integration with a Flutterflow + Xano stack

1. Overview of the Integration Goal

The tutorial explains how to integrate Stripe Checkout into an app built with Flutterflow (front end) and Xano (backend).

The goal is to allow users to access a Stripe Checkout page and pay for products whose prices are defined dynamically, rather than relying on preconfigured price IDs stored in Stripe.

This is especially useful for scenarios involving real-time calculations like discounts or services with custom pricing.

---

2. Stripe Checkout Session Setup

Instead of using the standard line_items.price property that references a pre-existing Stripe price ID, the solution uses line_items.price_data.
This enables defining all necessary attributes dynamically:

• Currency
• Unit amount (in cents)
• Quantity

These fields are set programmatically, allowing fully flexible pricing per transaction.

---

3. Xano Endpoint Design

A dedicated POST endpoint in Xano handles the creation of the Stripe Checkout session.
Following best practices, the endpoint name is kept simple and without additional verbs aside those native to HTTP (e.g. POST /checkout-session).

Key backend logic:

• Retrieves the proper Stripe API key depending on the environment (development or production).
• Fetches the user’s Stripe customer ID.
• Accepts a combination of mandatory and optional parameters.

Mandatory parameters:

• mode
• success_url
• cancel_url
• customer_email

Optional parameters:
Used to control whether the endpoint references a stored price ID or constructs a price dynamically.

This design allows a single endpoint to support both static and dynamic pricing.

---

4. Parameter Handling and Data Sanitization

Because Flutterflow may send "null" as a string instead of an actual null value, Xano includes a sanitization process.

Conditional checks ensure only non-null parameters are sent to Stripe, preventing API errors.

Additional features:

• Metadata support: Key-value pairs can be attached to the checkout session.
• The final payload merges both mandatory and optional parameters before calling the Stripe API.

---

5. Flutterflow Front-End Configuration

On the Flutterflow side, the checkout is triggered by a button that executes an action block, not a direct API call.

This allows inserting custom logic such as:

• Setting dynamic price data.
• Handling success or error outcomes.
• Opening the Stripe checkout page in a new tab.

The API call is configured in the Stripe API group within Flutterflow.

---

6. Stripe API Response and Checkout Flow

The response from Xano includes a checkout URL returned by Stripe.
Flutterflow then opens this URL in a new browser tab, allowing the user to complete payment.

If the API call fails, a custom dialog displays an error message to the user.

The overall flow:

1. Flutterflow sends dynamic price data to Xano.
2. Xano builds the appropriate Stripe payload.
3. Stripe returns a unique checkout URL.
4. Flutterflow opens the URL and handles success or failure responses.

---