flutter_tappay 0.3.0 copy "flutter_tappay: ^0.3.0" to clipboard
flutter_tappay: ^0.3.0 copied to clipboard

outdated

Platform specific solution for tappay in flutter. It's still in progress. Currently, Direct pay only.

FlutterTappay #

pub package

A Flutter plugin to slove Tappay sdk. (only Direct pay for now.)

Usage #

To use this plugin, add flutter_tappay as a dependency in your pubspec.yaml file.

Preparation #

There is something that need to add before using this plugin, please follow the steps:

  1. Add default activity styles under res/values/styles.xml
    <style name="AppCompactTheme" parent="Theme.AppCompat.Light.DarkActionBar">
    </style>
  1. Add activity under AndroidManifest.xml, just below flutter activity.
    <activity
      android:name="github.tokenyet.flutter_tappay.TappayActivity"
      android:theme="@style/AppCompactTheme"
    >
    </activity>
  1. Add xmlns:tools="http://schemas.android.com/tools" in AndroidManifest.xml as example:
  <manifest xmlns:android="http://schemas.android.com/apk/res/android"
      xmlns:tools="http://schemas.android.com/tools"
      package="tw.idv.dowen.flutter_tappay_tester">
  1. Add tools:replace="android:label" in AndroidManifest.xml as example:
  <application
    tools:replace="android:label"
    android:name="io.flutter.app.FlutterApplication"
    android:label="flutter_tappay_tester"
    android:icon="@mipmap/ic_launcher">

That's it.

Example #

Flutter way(recommended):

// Import package
import 'package:flutter_tappay/flutter_tappay.dart';

// Instantiate it
FlutterTappay payer = FlutterTappay ();
payer.init(
    appKey: "app_whdEWBH8e8Lzy4N6BysVRRMILYORF6UxXbiOFsICkz0J9j1C0JUlCHv1tVJC",
    appId: 11334,
    serverType: FlutterTappayServerType.Sandbox
).then((_){
  setState(() {
    prepared = true;
  });
});

// Valid with your TextFormField (see example)
payer.validate(
        cardNumber: _cardNumber.text,
        dueMonth: _cardMonth.text,
        dueYear: _cardYear.text,
        ccv: _cardCCV.text,
      ).then((validationResult) {
        bool cardValid = validationResult.isCardNumberValid;
        bool dateValid = validationResult.isExpiryDateValid;
        bool ccvValid = validationResult.isCCVValid;
        _totalValid = cardValid && ccvValid && dateValid;
        if(cardValid == true)
          _isCardNumberValid = true;
        else
          _isCardNumberValid = _cardNumber.text != "" ? false : true;
        if(ccvValid == true)
          _isCardCCVValid = true;
        else
          _isCardCCVValid = _cardCCV.text != "" ? false : true;
        if(dateValid == true) {
          _isCardYearValid = true;
          _isCardMonthValid = true;
        } else {
          _isCardYearValid = _cardYear.text != "" ? false : true;
          _isCardMonthValid = _cardMonth.text != "" ? false : true;
        }

        setState(() {
        });
      });

// get token
  try {
    TappayTokenResponse response = await payer.sendToken(
      cardNumber: _cardNumber.text,
      dueYear: _cardYear.text,
      dueMonth: _cardMonth.text,
      ccv: _cardCCV.text,
    );
    setState(() {
      _token = response.prime;
    });
  } catch(err) {
    Scaffold.of(context).showSnackBar(
        SnackBar(
            content: Text("Payment error: ${err.toString()}")
        )
    );
  }

Platform-Native way:

// Import package
import 'package:flutter_tappay/flutter_tappay.dart';

// Instantiate it
FlutterTappay payer = FlutterTappay ();

// Listen to token
payer.onTokenReceived.listen((data) {
  setState(() {
    _token = data;
  });
}, onError: (err){ print("$err");}, onDone: (){ print("done");});

// Show Payment (The key and the id is the api that used in [official web demo](https://tappay.github.io/tappay-web-example/TapPay_Fields/example/index.html))
await FlutterTappay.showPayment(
  title: "Custom Title",
  btnName: "Custom BtnName",
  appKey: "app_whdEWBH8e8Lzy4N6BysVRRMILYORF6UxXbiOFsICkz0J9j1C0JUlCHv1tVJC",
  appId: 11334,
  serverType: FlutterTappayServerType.Sandbox
);

More Info #

It's really frustrated for flutter users to use ugly UI with native Android/iOS, If you are good at Android/iOS, please feel free to customize layout/activity_main.xml to make It more beauty, Moreover, pull request is welcome!

If you are using DirectPay only. The oher options might be just call API directly, since there is no rules for Tappay to prevent this happened, but this package is target to intergation with native method, that provided by official documentation.

Contribution #

  1. Android native way could have better UI, but I'm bad at Android layout, Welcome to make it better.
  2. Should add more support on Google/Samsung/Apple pay to both platform, currently, only DirectPay.
2
likes
0
pub points
0%
popularity

Publisher

verified publisherdowen.idv.tw

Platform specific solution for tappay in flutter. It's still in progress. Currently, Direct pay only.

Repository (GitHub)
View/report issues

License

unknown (LICENSE)

Dependencies

flutter

More

Packages that depend on flutter_tappay