For AI agents: a documentation index is available at the root level at /llms.txt and /llms-full.txt. Append /llms.txt to any URL for a page-level index, or .md for the markdown version of any page.
RegisterLoginSandbox Login
GuidesRecipesAPI Reference
GuidesRecipesAPI Reference
  • Getting Started
    • Getting Started with Checkout
    • Account Setup
    • Card Checkout with Credits
    • Card Checkout
    • Direct USDC Settlement
    • Fiat/Crypto Pay-ins
    • Secure Marketplace Checkout
    • EVM Checkout
    • How to Enable Checkout with Credit Cards
    • Quick Start Marketplace Implementation
    • Payouts
    • Common FAQs
  • Checkout
      • Getting Started with Implmentation
      • Mobile App Payments
        • Swift SDK
        • Android SDK
        • Flutter SDK
        • React Native SDK
        • Browser Redirect Checkout
    • Settlement Locations
  • Payouts
    • Payout Overview
    • What is a Payout
  • Subscriptions
    • Subscriptions Overview
  • Marketplaces
    • Marketplace Overview
    • How Marketplaces Work
    • How to Withdraw USDC
    • Countries Eligible for USDC Withdraw
    • Marketplaces Webhooks
    • Marketplaces Implementation
  • Developer Resources
    • Custom Branding
    • Checkout Implementation
    • Webhooks
  • Merchant Dashboard
    • Login & Account Access
    • Users and Roles
    • Rate Limits
    • Developer Contact
LogoLogo
RegisterLoginSandbox Login
On this page
  • Overview
  • Requirements
  • Installation
  • Integration
  • Variants
  • Theming
  • Dynamic height
  • Resources
CheckoutImplementation OverviewMobile App Payments

Flutter SDK

Embed the Coinflow card tokenization form natively in a Flutter app.
Was this page helpful?
Previous

React Native SDK

Embed the Coinflow card tokenization form natively in a React Native app.
Next
Built with

Overview

coinflow_card_form is a Flutter SDK that embeds Coinflow’s card tokenization form directly into iOS and Android apps from a single Dart codebase. The user enters their card inside your app, the SDK returns a payment token, and your backend charges the card via the standard Coinflow checkout API.

  • Package: coinflow_card_form
  • Distribution: pub.dev
  • Current version: 0.2.0

Requirements

  • Flutter 3.x+
  • iOS 15+ / Android minSdk 24+

Installation

$flutter pub add coinflow_card_form

Or in pubspec.yaml:

1dependencies:
2 coinflow_card_form: ^0.2.0

Integration

1

Add the card form widget

Drop CoinflowCardFormWidget into your widget tree and pass a CoinflowCardFormController you’ll use to trigger tokenization.

1import 'package:flutter/material.dart';
2import 'package:coinflow_card_form/coinflow_card_form.dart';
3
4class PaymentPage extends StatefulWidget {
5 const PaymentPage({super.key});
6
7 @override
8 State<PaymentPage> createState() => _PaymentPageState();
9}
10
11class _PaymentPageState extends State<PaymentPage> {
12 final _controller = CoinflowCardFormController();
13
14 Future<void> _tokenize() async {
15 try {
16 final response = await _controller.tokenize();
17 debugPrint('Token: ${response.token}');
18 } catch (e) {
19 // surface error to user
20 }
21 }
22
23 @override
24 Widget build(BuildContext context) {
25 return Column(
26 children: [
27 CoinflowCardFormWidget(
28 variant: CardFormVariant.cardForm,
29 merchantId: 'your-merchant-id',
30 env: CoinflowEnv.sandbox,
31 controller: _controller,
32 ),
33 FilledButton(onPressed: _tokenize, child: const Text('Pay')),
34 ],
35 );
36 }
37}

your-merchant-id is an example placeholder. Use your actual merchant ID from the merchant dashboard, or contact the Coinflow integrations team. Typically injected with --dart-define=COINFLOW_MERCHANT_ID=..., not hard-coded.

2

Wait for the form to load

Call controller.tokenize() only after the form has loaded. Either pass an onLoad callback or check controller.isLoaded before invoking:

1final _controller = CoinflowCardFormController(onLoad: () {
2 setState(() => _ready = true);
3});

Invoking tokenize() earlier throws CoinflowException('Card form not yet loaded'). Concurrent calls also throw — only one tokenize can be in flight at a time.

3

Configure the environment

1const env = bool.fromEnvironment('dart.vm.product')
2 ? CoinflowEnv.prod
3 : CoinflowEnv.sandbox;
  • CoinflowEnv.sandbox — test cards, no real money
  • CoinflowEnv.prod — live cards, real money
4

Charge the token server-side

controller.tokenize() returns a Future<TokenizeResponse>:

  • token — payment token to send to your backend
  • expMonth, expYear — populated only for variants that collect expiry

Send the token to your server and call Coinflow’s checkout API to charge it. See the Checkout API reference for the full request shape.

Variants

VariantCapturesUse case
CardFormVariant.cardFormNumber, expiry, CVVStandard one-shot capture
CardFormVariant.cardNumberFormNumber + expiryFirst step of a two-step flow
CardFormVariant.cvvFormCVV onlyRe-collecting CVV for a card-on-file token

Theming

MerchantTheme styles the rendered form. All fields optional.

1const theme = MerchantTheme(
2 primary: '#165DFB',
3 background: '#ffffff',
4 textColor: '#05092E',
5 ctaColor: '#165DFB',
6 font: 'Red Hat Display',
7 style: MerchantStyle.rounded,
8);
9
10CoinflowCardFormWidget(theme: theme, /* ... */)
All theme fields
FieldPurpose
primary, ctaColorAccent / action colors (hex strings)
background, backgroundAccent, backgroundAccent2Form background tones
textColor, textColorAccent, textColorActionInput and label text colors
font, fontSize, fontWeightTypography. font must be available on the device.
styleInput shape: rounded, sharp, pill
cardNumberPlaceholder, cvvPlaceholder, expirationPlaceholderOverride input placeholder text
showCardIconToggle the card brand icon (Visa/Mastercard/Amex)

Dynamic height

The hosted form reflows responsively — at narrow widths the inputs wrap to multiple rows. To keep your Flutter container fitted, pass an onHeightChange callback to the controller and drive CoinflowCardFormWidget.height from it:

1double _formHeight = 52;
2
3late final _controller = CoinflowCardFormController(
4 onHeightChange: (h) => setState(() => _formHeight = h),
5);
6
7@override
8Widget build(BuildContext context) {
9 return CoinflowCardFormWidget(
10 merchantId: 'your-merchant-id',
11 controller: _controller,
12 height: _formHeight,
13 );
14}

The callback receives the rendered content height in logical pixels. Without this wiring the form may be clipped if it wraps.

Resources

  • Source: github.com/coinflow-labs-us/coinflow-flutter
  • pub.dev: coinflow_card_form
  • License: Apache 2.0
  • Checkout API: Card Checkout endpoint