stripe_native_card_field

Description:

stripe native card field

A simple and clean Stripe Element Card clone, rebuilt in native Flutter widgets.
DISCLAIMER #
This is not an officially maintained package by Stripe, but using the html stripe
elements they provide in flutter was inconvenient for me, so I made this package.
Features #
Got to use emojis and taglines for attention grabbing and algorithm hacking:

⚡ Blazingly fast ( its as fast as the rest of flutter )
🧹 Cleaner & Easier to Use ( fewer dependencies than the official stripe elements )
🛡 Safe and Supports all Flutter Targets ( its native flutter with minimal dependencies )
☑ Seemless UI/UX ( hard to match stripe quality, but I think I got pretty close )
💳 Built-in Stripe Integration ( guess that one is obvious )
☯ Chi Energy Boost ( alright I'm fishing... )

Why StripeNativeCardField? #

Fewer dependencies: no more depending on Flutter Webview
Customizable: the entire field can inherit native Flutter styling, i.e. BoxDecoration()
Native Implementation: compiles and loads like the rest of your app, unlike embeded html
Automatic validation: no inputFormatters or RegExp needed on your side

The card data can either be retrieved with the onValidCardDetails callback, or
you can have the element automatically create a Stripe card token when the fields
are filled out, and return the token with the onTokenReceived callback.
Card Provider Detection #

Supported Card Providers in Docs
Customizable Styles #

This dark mode style example provided here
For documentation on all of the available customizable aspects of the CardTextField, go
to the API docs here.
Smooth UX #

Mimics the Stripe html elements behavior wherever possible. Auto focusing / transitioning text fields, backspacing focuses to last field,
automatically validating user input, etc.
Getting started #

Install the package by running flutter pub add stripe_native_card_field

Usage #
Include the package in a file:
import 'package:stripe_native_card_field/stripe_native_card_field.dart';
copied to clipboard
For Raw Card Data #
Provide a callback for the CardTextField to return you the data when its complete.
CardTextField(
width: 500,
onValidCardDetails: (details) {
// Save the card details to use with your call to Stripe, or whoever
setState(() => _cardDetails = details);
},
);
copied to clipboard
For Stripe Token #
Simply provide a function for the onStripeResponse callback!
CardTextField(
width: 500,
stripePublishableKey: 'pk_test_abc123', // Your stripe key here
onStripeResponse: (Map<String, dynamic> data) {
// Save the stripe token to send to your backend
setState(() => _tokenData = data);
},
);
copied to clipboard
If you want more fine-grained control of when the stripe call is made, you
can create a GlobalKey and access the CardTextFieldState, calling the
getStripeResponse() function yourself. See the provided example
for details. If you choose this route, do not provide an onStripeResponse callback, or you will end up
making two calls to stripe!
Additional information #
Repository located here
Please email me at [email protected] for any issues or PRs.