flutter_openpay 1.0.0

  • Readme
  • Changelog
  • Example
  • Installing
  • 71

flutter_openpay #

A flutter plugin to tokenize cards using Openpay

pub package

Installation #

First, add flutter_openpay as a dependency in your pubspec.yaml file.

flutter_openpay: ^1.0.0

Android #

Add

<uses-permission android:name="android.permission.INTERNET"/>

before <application> to your app's AndroidManifest.xml file. This is required due to Openpay using its remote API to tokenize the card.

iOS #

For tokenizing the card information correctly, you need to add some keys to your iOS app's Info.plist file, located in <project root>/ios/Runner/Info.plist:

  • UIBackgroundModes with the fetch and remote-notifications keys - Required. Describe why your app needs to access background taks, suck talking to an external API (to tokenize the card). This is called Required background modes, with the keys App download content from network and App downloads content in response to push notifications respectively in the visual editor (since both methods aren't actually overriden, not adding this property/keys may only display a warning, but shouldn't prevent its correct usage).

    <key>UIBackgroundModes</key>
    <array>
       <string>fetch</string>
       <string>remote-notification</string>
    </array>
    

Usage #

There is only one method that should be used with this package:

FlutterOpenpay.tokenizeCard()

Will let you tokenize a card. This receives eight required parameters: the publicApiKey to specify your Openpay public key, the productionMode flag to indicate whether it should tokenize the card using the production or the sandbox API, the merchantId from Openpay, the cardholderName, the cardNumber, the cvv, the expiryMonth and the expiryYear. Returns a String with the token representing the card.

FlutterOpenpay.getDeviceSessionId()

Will let you generate a unique device session id, which you should use to access resources from the Openpay API. This receives three required parameters: the productionMode flag, the publicApiKey to specify your Openpay public key, and the merchantId from Openpay. Returns a String with the device session id.

Currently supported features #

  • [x] Tokenize card using Openpay.
  • [x] Generate device session id to access Openpay API resources.

Demo App #

Demo

Example #

See example app.

1.0.0 #

  • First release of Flutter Openpay plugin
  • Allows for card tokenization and device id collection

example/lib/main.dart

import 'dart:async';

import 'package:flutter/material.dart';
import 'package:flutter/services.dart';
import 'package:flutter_openpay/flutter_openpay.dart';

void main() => runApp(MyApp());

class MyApp extends StatefulWidget {
  @override
  _MyAppState createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {
  final _formKey = GlobalKey<FormState>();

  String _name = "";
  String _number = "";
  String _expMonth = "";
  String _expYear = "";
  String _cvc = "";
  String _token = "";
  String _deviceSessionId = "";

  @override
  void initState() {
    super.initState();
  }

  String validateCardNameField(String value) {
    if (value.length == 0) {
      return "Please write your name";
    }
    return null;
  }

  String validateCardNumberField(String value) {
    return null;
  }

  String validateExpMonthField(String value) {
    if (value.length != 2) {
      return "Write like MM";
    }

    if (int.tryParse(value) < 1 || int.tryParse(value) > 12) {
      return "$value not valid";
    }

    //Validar de acuerdo a la fecha que resulta de mes y año
    return null;
  }

  String validateExpYearField(String value) {
    if (value.length != 2) {
      return "Write like YY";
    }

    //Validar de acuerdo a la fecha que resulta de mes y año
    return null;
  }

  String validateBackNumberField(String value) {
    if (value.length != 3) {
      return "Three digits";
    }
    return null;
  }

  Future<void> submit() async {
    if (_formKey.currentState.validate()) {
      _formKey.currentState.save();

      String token;

      try {
        token = await FlutterOpenpay.tokenizeCard(
          cardholderName: _name,
          cardNumber: _number,
          cvv: _cvc,
          expiryMonth: _expMonth,
          expiryYear: _expYear,
          publicApiKey: 'pk_3a66482b770a4d1abd5bf21aaf01dffb',
          merchantId: 'mop7w9rqjzbkhcmwcoob',
          productionMode: false,
        );
      } catch (e) {
        print(e.toString());
        token = "Unable to tokenize card";
      }

      setState(() {
        _token = token;
      });
    }
  }

  Future<void> requestDeviceSessionId() async {
    String deviceSessionId;
    try {
      deviceSessionId = await FlutterOpenpay.getDeviceSessionId(
        merchantId: 'm3ts0hkttkzst0ygk8ha',
        publicApiKey: 'pk_3a6c4e052213416c84c9f2da10bcb7d2',
        productionMode: false,
      );
      setState(() {
        _deviceSessionId = deviceSessionId;
      });
    } catch (e) {
      print(e.toString());
      deviceSessionId = "Unable to tokenize card";
      setState(() {
        _deviceSessionId = deviceSessionId;
      });
    }
  }

  Widget cardNameField() {
    return Container(
      child: TextFormField(
        autofocus: true,
        keyboardType: TextInputType.text,
        enabled: true,
        decoration: InputDecoration(
            labelText: "Holder name", border: OutlineInputBorder()),
        onSaved: (String value) {
          _name = value;
        },
        validator: validateCardNameField,
      ),
    );
  }

  Widget cardNumberField() {
    return Container(
      child: TextFormField(
        keyboardType: TextInputType.number,
        maxLength: 16,
        enabled: true,
        decoration: InputDecoration(
            labelText: "Card number", border: OutlineInputBorder()),
        onSaved: (String value) {
          _number = value;
        },
        validator: validateCardNumberField,
      ),
    );
  }

  Widget cardExpirationMonthField() {
    return Expanded(
      flex: 2,
      child: TextFormField(
        maxLength: 2,
        keyboardType: TextInputType.number,
        enabled: true,
        decoration:
            InputDecoration(labelText: "MM", border: OutlineInputBorder()),
        onSaved: (String value) {
          _expMonth = value;
        },
        validator: validateExpMonthField,
      ),
    );
  }

  Widget cardExpirationYearField() {
    return Expanded(
      flex: 4,
      child: TextFormField(
        maxLength: 2,
        keyboardType: TextInputType.number,
        enabled: true,
        decoration:
            InputDecoration(labelText: "YY", border: OutlineInputBorder()),
        onSaved: (String value) {
          _expYear = value;
        },
        validator: validateExpYearField,
      ),
    );
  }

  Widget cardBackNumberField() {
    return Expanded(
      flex: 3,
      child: TextFormField(
        maxLength: 3,
        keyboardType: TextInputType.number,
        enabled: true,
        decoration:
            InputDecoration(labelText: "CVV", border: OutlineInputBorder()),
        onSaved: (String value) {
          _cvc = value;
        },
        validator: validateBackNumberField,
      ),
    );
  }

  Widget cardValidationRow() {
    return Row(
      children: <Widget>[
        cardExpirationMonthField(),
        SizedBox(width: 20),
        cardExpirationYearField(),
        SizedBox(width: 20),
        cardBackNumberField(),
      ],
    );
  }

  Widget tokenizeCardButton() {
    return new Container(
      width: 240,
      height: 48,
      child: new RaisedButton(
        child: new Text(
          'Register card',
          style: new TextStyle(color: Colors.white),
        ),
        onPressed: () => this.submit(),
        color: Colors.blue,
      ),
      margin: new EdgeInsets.only(top: 16.0),
    );
  }

  Widget deviceSessionIdButton() {
    return new Container(
      width: 240,
      height: 48,
      child: new RaisedButton(
        child: new Text(
          'Get device session id',
          style: new TextStyle(color: Colors.white),
        ),
        onPressed: requestDeviceSessionId,
        color: Colors.blue,
      ),
      margin: new EdgeInsets.only(top: 16.0),
    );
  }

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      theme: ThemeData(),
      title: "Openpay Tokenization Example",
      home: Scaffold(
        appBar: AppBar(
          title: Text("Openpay Tokenization Example"),
        ),
        body: SingleChildScrollView(
          child: Container(
            padding: EdgeInsets.all(16),
            child: new Form(
              key: _formKey,
              child: new Column(
                crossAxisAlignment: CrossAxisAlignment.stretch,
                children: <Widget>[
                  SizedBox(height: 16),
                  cardNameField(),
                  SizedBox(height: 16),
                  cardNumberField(),
                  cardValidationRow(),
                  tokenizeCardButton(),
                  SizedBox(height: 16),
                  Text("Token: $_token"),
                  deviceSessionIdButton(),
                  SizedBox(height: 16),
                  Text("Device session id: $_deviceSessionId"),
                ],
              ),
            ),
          ),
        ),
      ),
    );
  }
}

Use this package as a library

1. Depend on it

Add this to your package's pubspec.yaml file:


dependencies:
  flutter_openpay: ^1.0.0

2. Install it

You can install packages from the command line:

with Flutter:


$ flutter pub get

Alternatively, your editor might support flutter pub get. Check the docs for your editor to learn more.

3. Import it

Now in your Dart code, you can use:


import 'package:flutter_openpay/flutter_openpay.dart';
  
Popularity:
Describes how popular the package is relative to other packages. [more]
49
Health:
Code health derived from static analysis. [more]
100
Maintenance:
Reflects how tidy and up-to-date the package is. [more]
80
Overall:
Weighted score of the above. [more]
71
Learn more about scoring.

We analyzed this package on Jul 14, 2020, and provided a score, details, and suggestions below. Analysis was completed with status completed using:

  • Dart: 2.8.4
  • pana: 0.13.15
  • Flutter: 1.17.5

Analysis suggestions

Package does not support Flutter platform Linux

Because:

  • package:flutter_openpay/flutter_openpay.dart that declares support for platforms: Android, iOS

Package does not support Flutter platform Web

Because:

  • package:flutter_openpay/flutter_openpay.dart that declares support for platforms: Android, iOS

Package does not support Flutter platform Windows

Because:

  • package:flutter_openpay/flutter_openpay.dart that declares support for platforms: Android, iOS

Package does not support Flutter platform macOS

Because:

  • package:flutter_openpay/flutter_openpay.dart that declares support for platforms: Android, iOS

Package not compatible with SDK dart

Because:

  • flutter_openpay that is a package requiring null.

Maintenance suggestions

The package description is too short. (-20 points)

Add more detail to the description field of pubspec.yaml. Use 60 to 180 characters to describe the package, what it does, and its target use case.

Dependencies

Package Constraint Resolved Available
Direct dependencies
Dart SDK >=2.4.0 <3.0.0
flutter 0.0.0
Transitive dependencies
collection 1.14.12 1.14.13
meta 1.1.8 1.2.2
sky_engine 0.0.99
typed_data 1.1.6 1.2.0
vector_math 2.0.8 2.1.0-nullsafety
Dev dependencies
flutter_test