Integrate with Flutter
To integrate Mercado Pago's Checkout Pro into a mobile application, you need to display the web payment flow within your app. For this, use Custom Tabs for Android and Safari View Controller for iOS.
In this documentation, you will find detailed instructions on how to perform this integration using Flutter and Custom Tabs. We will present the steps for installing the necessary libraries, configuring dependencies, and provide practical examples of how to open web pages using Custom Tabs.
Next, select the operating system and follow the corresponding step-by-step guide.
In this step, you will install and configure the necessary dependencies to implement Custom Tabs in your Flutter project.
Install the Flutter Custom Tabs dependency
To install the Flutter Custom Tabs dependency, which allows you to open web pages within a mobile application, run the following command in your project's root directory:
terminal
$ flutter pub add flutter_custom_tabs
This will add the line dependencies: flutter_custom_tabs: ^2.4.0
to the package's pubspec.yaml
file. The flutter pub get
command will be executed automatically.
To use Custom Tabs in your code, import the package in the Dart file where you want to display the checkout:
dart
import 'package:flutter_custom_tabs/flutter_custom_tabs.dart';
Implement Flutter Custom Tabs
To implement Custom Tabs in your Flutter application, follow the example below, which demonstrates how to open Mercado Pago's checkout in an integrated native browser:
dart
import 'package:flutter/material.dart'; import 'package:flutter_custom_tabs/flutter_custom_tabs.dart'; void main() { runApp(MyApp()); } class MyApp extends StatelessWidget { const MyApp({super.key}); @override Widget build(BuildContext context) { return MaterialApp( theme: ThemeData( primarySwatch: Colors.blue, ), home: Scaffold( body: Center( child: TextButton( child: const Text('Show Flutter homepage'), onPressed: () => _launchURL(context), ), ), ), ); } void _launchURL(BuildContext context) async { final theme = Theme.of(context); try { await launchUrl( Uri.parse('https://flutter.dev'), customTabsOptions: CustomTabsOptions( colorSchemes: CustomTabsColorSchemes.defaults( toolbarColor: theme.colorScheme.surface ), shareState: CustomTabsShareState.on, urlBarHidingEnabled: true, showTitle: true, closeButton: CustomTabsCloseButton( icon: CustomTabsCloseButtonIcons.back ), animations: const CustomTabsAnimations( startEnter: 'slide_up', startExit: 'android:anim/fade_out', endEnter: 'android:anim/fade_in', endExit: 'slide_down', ), ), ); } catch (e) { // An exception is thrown if there is no browser application installed on the Android device. debugPrint(e.toString()); } } }
You can customize the appearance of the displayed screen by specifying options for each platform. For this, use the CustomTabsOption configuration class, which allows you to define parameters such as colors, animations, and behaviors of the native browser tab. For more details, refer to the official documentation.
Return to the application with Deep Links
For the user to be able to return to your application after completing the payment, you will need to configure Deep Links. This allows the user to be automatically redirected to a specific screen in your application when finishing the payment flow or clicking a return button.
1. Configure return URLs in the payment preference
When creating the payment preference in your backend, add the back_urls
and auto_return
parameters. For more information, refer to the documentation on how to Create and configure a payment preference.
json
"back_urls": { "success": "tuapp://success", "failure": "tuapp://failure", "pending": "tuapp://pending" }, "auto_return": "approved"
2. Configure Deep Links reception and management in Flutter
Flutter allows you to manage Deep Links in both Android and iOS. For this, use packages such as uni_links
or go_router
to detect and manage internal navigation when the application is opened via Deep Link.