stripe_native_card_field/README.md

104 lines
3.9 KiB
Markdown
Raw Normal View History

A simple and clean Stripe Element Card clone, rebuilt in native Flutter widgets.
# DISCLAIMER
2023-11-21 09:45:25 -07:00
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.
2023-11-21 09:45:25 -07:00
# Features
2023-11-21 09:45:25 -07:00
Got to use emojis and taglines for attention grabbing and algorithm hacking:
2023-11-21 13:38:02 -07:00
- ⚡ 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 )
2023-11-21 13:38:02 -07:00
- ☑ 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... )
2023-11-21 09:45:25 -07:00
## Why StripeNativeCardField?
2023-11-21 09:45:25 -07:00
- 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
2023-12-01 16:12:42 -07:00
The card data can either be retrieved with the `onValidCardDetails` callback, or
2023-11-21 09:45:25 -07:00
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
2023-11-21 09:45:25 -07:00
![Card Provider Detection](https://git.fosscat.com/n8r/stripe_native_card_field/raw/branch/main/readme_assets/card_provider_detection.gif)
2023-11-21 09:45:25 -07:00
2023-11-21 13:38:02 -07:00
[Supported Card Providers in Docs](https://pub.dev/documentation/stripe_native_card_field/latest/card_details/CardProviderID.html)
2023-11-21 09:45:25 -07:00
### Customizable Styles
2023-11-21 09:45:25 -07:00
2023-11-21 13:38:02 -07:00
![Customizable Style 1](https://git.fosscat.com/n8r/stripe_native_card_field/raw/branch/main/readme_assets/customizable_style.gif)
This dark mode style example provided [here](https://git.fosscat.com/n8r/stripe_native_card_field/raw/branch/main/example/lib/dark_customization.dart)
For documentation on all of the available customizable aspects of the `CardTextField`, go
to the [API docs here](https://pub.dev/documentation/stripe_native_card_field/latest/stripe_native_card_field/CardTextField-class.html).
2023-11-21 13:38:02 -07:00
### Smooth UX
2023-11-21 13:38:02 -07:00
![Smooth UX](https://git.fosscat.com/n8r/stripe_native_card_field/raw/branch/main/readme_assets/smooth_ux.gif)
2023-11-21 13:38:02 -07:00
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:
2023-11-21 09:45:25 -07:00
```dart
import 'package:stripe_native_card_field/stripe_native_card_field.dart';
```
2023-12-01 16:12:42 -07:00
### For Raw Card Data
2023-11-21 09:45:25 -07:00
2023-12-01 16:12:42 -07:00
Provide a callback for the `CardTextField` to return you the data when its complete.
```dart
CardTextField(
width: 500,
2023-12-01 16:12:42 -07:00
onValidCardDetails: (details) {
// Save the card details to use with your call to Stripe, or whoever
setState(() => _cardDetails = details);
},
);
```
2023-11-21 09:45:25 -07:00
### For Stripe Token
2023-12-01 16:12:42 -07:00
Simply provide a function for the `onStripeResponse` callback!
2023-11-21 09:45:25 -07:00
```dart
CardTextField(
width: 500,
stripePublishableKey: 'pk_test_abc123', // Your stripe key here
2023-12-01 16:12:42 -07:00
onStripeResponse: (Map<String, dynamic> data) {
2023-11-21 09:45:25 -07:00
// Save the stripe token to send to your backend
2023-12-01 16:12:42 -07:00
setState(() => _tokenData = data);
2023-11-21 09:45:25 -07:00
},
);
```
2023-12-01 16:12:42 -07:00
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](https://pub.dev/packages/stripe_native_card_field/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](https://git.fosscat.com/n8r/stripe_native_card_field)
2023-12-01 16:12:42 -07:00
Please email me at n8r@fosscat.com for any issues or PRs.