mercado_pago_mobile_checkout 0.0.1

  • Readme
  • Changelog
  • Example
  • Installing
  • 76

px-flutter #

Mercado Pago's Unofficial Flutter checkout library


Made with ❤️ by Ricardo Markiewicz // @gazeria.

What is this? #

Flutter implementation of MercadoPago Mobile Checkout

Before to start #

This is a Work in progress project!, so please use with care and report the issues and feature request to our Github page. Thanks!

Getting Started #

  • Create an account in MercadoPago, you may need to choose the country where you want to accept payments.
  • Create an Application
  • Go to the credentials page (the url may change depending the country, but looks like https://www.mercadopago.com/mla/account/credentials) and get the Public Key of the new app ** SECURITY WARNING: Do not use the Access Token, ClientID or Client Secret in your mobile application.
  • Call your backend to create a Checkout Preference and get a PreferenceId ** TODO: Add more documentation about preferences
  • In your Flutter code, call MercadoPagoMobileCheckout.startCheckout() to allow the user to pay
  • Save the payment response into your database.

Setup #

Android #

Nothing special to do, just add the plugin and use it.

iOS #

At the moment we need to setup a UINavigationController manually because the one that Flutter provides do not work with MercadoPago px-ios.

You need to setup your root view controller as UINavigationController in your AppDelegate of the ios folder of your app:

// AppDelegate.swift

import UIKit
import Flutter

@UIApplicationMain
@objc class AppDelegate: FlutterAppDelegate {
  var navigationController: UINavigationController?;

  override func application(
    _ application: UIApplication,
    didFinishLaunchingWithOptions launchOptions: [UIApplication.LaunchOptionsKey: Any]?
  ) -> Bool {
    // Add this line before GeneratedPluginRegistrant
    let flutterViewController: FlutterViewController = window?.rootViewController as! FlutterViewController

    // This line is added by the Flutter App Generator
    GeneratedPluginRegistrant.register(with: self)

    // Add these lines after GeneratedPluginRegistrant
    self.navigationController = UINavigationController(rootViewController: flutterViewController);
    self.navigationController?.setNavigationBarHidden(true, animated: false);

    self.window = UIWindow(frame: UIScreen.main.bounds);
    self.window.rootViewController = self.navigationController;
    self.window.makeKeyAndVisible();
    // End of edit

    return super.application(application, didFinishLaunchingWithOptions: launchOptions)
  }
}

Installation #

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

dependencies:
  mercado_pago_mobile_checkout: ^0.0.1

Add the following import to your Dart code:

import 'package:`mercado_pago_mobile_checkout`/mercado_pago_mobile_checkout.dart';

F.A.Q. #

TODO

Need help? #

Create an issue in https://github.com/Gazer/px-flutter

0.0.1 #

  • TODO: Describe initial release.

example/lib/main.dart

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

import 'package:flutter/services.dart';
import 'package:mercado_pago_mobile_checkout/mercado_pago_mobile_checkout.dart';

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

// Get your app public from the credentials pages:
// https://www.mercadopago.com/mla/account/credentials
const publicKey = "YOUR KEY";

// The preferenceId should be fetch from your backend server. Do not
// expose your Access Token. Also you can create a preference using
// curl:
// ```bash
// curl -X POST \
//     'https://api.mercadopago.com/checkout/preferences?access_token=ACCESS_TOKEN' \
//     -H 'Content-Type: application/json' \
//     -d '{
//           "items": [
//               {
//               "title": "Dummy Item",
//               "description": "Multicolor Item",
//               "quantity": 1,
//               "currency_id": "ARS",
//               "unit_price": 10.0
//               }
//           ],
//           "payer": {
//               "email": "payer@email.com"
//           }
//     }'
// ```
const preferenceId = "YOUR ID";

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

class _MyAppState extends State<MyApp> {
  String _platformVersion = 'Unknown';

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

  // Platform messages are asynchronous, so we initialize in an async method.
  Future<void> initPlatformState() async {
    String platformVersion;
    // Platform messages may fail, so we use a try/catch PlatformException.
    try {
      platformVersion = await MercadoPagoMobileCheckout.platformVersion;
    } on PlatformException {
      platformVersion = 'Failed to get platform version.';
    }

    // If the widget was removed from the tree while the asynchronous platform
    // message was in flight, we want to discard the reply rather than calling
    // setState to update our non-existent appearance.
    if (!mounted) return;

    setState(() {
      _platformVersion = platformVersion;
    });
  }

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: const Text('Plugin example app'),
        ),
        body: Center(
          child: Column(
            children: <Widget>[
              Text('Running on: $_platformVersion\n'),
              RaisedButton(
                onPressed: () async {
                  var result = await MercadoPagoMobileCheckout.startCheckout(
                    publicKey,
                    preferenceId,
                  );
                  print(result);
                },
                child: Text("Pagar"),
              ),
            ],
          ),
        ),
      ),
    );
  }
}

Use this package as a library

1. Depend on it

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


dependencies:
  mercado_pago_mobile_checkout: ^0.0.1

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:mercado_pago_mobile_checkout/mercado_pago_mobile_checkout.dart';
  
Popularity:
Describes how popular the package is relative to other packages. [more]
60
Health:
Code health derived from static analysis. [more]
99
Maintenance:
Reflects how tidy and up-to-date the package is. [more]
81
Overall:
Weighted score of the above. [more]
76
Learn more about scoring.

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

  • Dart: 2.8.2
  • pana: 0.13.8-dev
  • Flutter: 1.17.1

Health issues and suggestions

Document public APIs. (-1 points)

5 out of 5 API elements have no dartdoc comment.Providing good documentation for libraries, classes, functions, and other API elements improves code readability and helps developers find and use your API.

Maintenance suggestions

Package is pre-v0.1 release. (-10 points)

While nothing is inherently wrong with versions of 0.0.*, it might mean that the author is still experimenting with the general direction of the API.

The package description is too short. (-9 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.1.0 <3.0.0
flutter 0.0.0
Transitive dependencies
collection 1.14.12
meta 1.1.8
sky_engine 0.0.99
typed_data 1.1.6
vector_math 2.0.8
Dev dependencies
flutter_test