coinflow_card_form 0.1.0

Coinflow Card Form SDK for Flutter - Tokenize card data securely via WebView.

Coinflow Card Form SDK - Flutter

A Flutter SDK for integrating Coinflow's card tokenization forms into mobile apps.

Requirements

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

Installation

flutter pub add coinflow_card_form

Or add it to pubspec.yaml:

dependencies:
  coinflow_card_form: ^0.1.0

Usage

import 'package:flutter/material.dart';
import 'package:coinflow_card_form/coinflow_card_form.dart';

class PaymentPage extends StatefulWidget {
  const PaymentPage({super.key});

  @override
  State<PaymentPage> createState() => _PaymentPageState();
}

class _PaymentPageState extends State<PaymentPage> {
  final _controller = CoinflowCardFormController();

  Future<void> _tokenize() async {
    try {
      final response = await _controller.tokenize();
      debugPrint('Token: ${response.token}');
    } catch (e) {
      // surface error to user
    }
  }

  @override
  Widget build(BuildContext context) {
    return Column(
      children: [
        CoinflowCardFormWidget(
          variant: CardFormVariant.cardForm,
          merchantId: 'your-merchant-id',
          env: CoinflowEnv.sandbox,
          controller: _controller,
        ),
        FilledButton(
          onPressed: _tokenize,
          child: const Text('Tokenize'),
        ),
      ],
    );
  }
}

Call controller.tokenize() only after the form has loaded. Pass onLoad: to CoinflowCardFormController(onLoad: ...) or check controller.isLoaded before calling — invoking it earlier throws CoinflowException('Card form not yet loaded'). Concurrent calls also throw — only one tokenize can be in flight at a time.

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

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

Configuration

Merchant ID

Issued by Coinflow when you sign up — find it in the merchant dashboard. The same value works for both sandbox and production. Typically read from a compile-time env var:

static const merchantId = String.fromEnvironment('COINFLOW_MERCHANT_ID');

Pass with flutter run --dart-define=COINFLOW_MERCHANT_ID=your-id.

Environment

Selects which Coinflow backend the form talks to:

• CoinflowEnv.sandbox — test cards, no real money. Use during integration and QA.
• CoinflowEnv.prod — live cards, real money.

The other values (staging, local) are Coinflow-internal and not intended for integrators.

Typical pattern:

const env = bool.fromEnvironment('dart.vm.product')
    ? CoinflowEnv.prod
    : CoinflowEnv.sandbox;

Variants

• CardFormVariant.cardForm — full card entry (number, expiry, CVV)
• CardFormVariant.cardNumberForm — card number + expiry only; returns a token used to render cvvForm later
• CardFormVariant.cvvForm — CVV only; requires the token parameter

Theming

MerchantTheme styles the rendered form to match your app. All fields are optional — pass only what you want to override. Minimal example:

const theme = MerchantTheme(primary: '#FF6600', style: MerchantStyle.rounded);

Full example:

const theme = MerchantTheme(
  primary: '#165DFB',
  background: '#ffffff',
  backgroundAccent: '#F3F4F6',
  backgroundAccent2: '#E4E7EB',
  textColor: '#05092E',
  textColorAccent: '#030712',
  textColorAction: '#ffffff',
  ctaColor: '#165DFB',
  font: 'Red Hat Display',
  style: MerchantStyle.rounded,
);

Pass into CoinflowCardFormWidget(theme: theme, ...).

Theme fields

Field	Purpose
primary, ctaColor	Accent / action colors (hex strings)
background, backgroundAccent, backgroundAccent2	Form background tones
textColor, textColorAccent, textColorAction	Input and label text colors
font, fontSize, fontWeight	Typography. font must be available on the device.
style	Input shape: rounded, sharp, pill
cardNumberPlaceholder, cvvPlaceholder, expirationPlaceholder	Override input placeholder text
showCardIcon	Toggle the card brand icon (Visa/Mastercard/Amex)

License

Apache 2.0 — see LICENSE.