Flutter SDK

Embed the Coinflow card tokenization form natively in a Flutter app.

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.

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.1.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, /* ... */)
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)

Resources