Skip to content

Latest commit

 

History

History
211 lines (174 loc) · 7.99 KB

README.md

File metadata and controls

211 lines (174 loc) · 7.99 KB
Raw

MercadoPago for React Native (Enterprise)

MercadoPago Certified

A native bridge to use Mercado Pago Mobile Checkout with React Native (Android & iOS) by using Java and Objective-C. Based on our successful Open Source plugin; InAppBrowser for React Native.

Demo 🎮

Do you want to see this native bridge in action? Check our demo creating a marketplace, yay! 🎉

Buy

You can buy this product here. Enteprise products are free for our Sponsors, check here.

Usage 📖

Methods Action
startPayment Initialize MercadoPago Mobile Checkout with a public Key, preference Id and options to customize the payment experience.

Options

Property Description
language (String) Set the Language locale string. (es is the default value). For more values check here. [es/en/pt]
color (String) The color to tint the background of the navigation bar and the toolbar. Delivering the best Checkout experience based on your color 🌈. [gray/#808080]
sessionId (String) Custom session ID for user-tracking specific features.
productId (String) Custom product ID.
enableESC (Boolean) Add the possibility to configure ESC behaviour. If set as true, then saved cards will try to use ESC feature. If set as false, then security code will be always asked. [true/false]
enableBankDeals (Boolean) Instores usage / money in usage. - Use case: Not all bank deals apply right now to all preferences. [true/false]
enableAmountRow (Boolean) Loyalty usage. - Use case: Show/hide bottom amount row. [true/false]
enableExpressPayment (Boolean) Add the possibility to enabled/disabled express checkout. [true/false]

PaymentResult

Property Description Type
id Id of the payment. string
status Status of the payment. string
detail Detail of the payment. string
description Description of the payment. string

Getting started 💻

npm install ../path/to/this/plugin --save

Mostly automatic installation

Using React Native >= 0.60

Linking the package manually is not required anymore with Autolinking.

  • iOS Platform:

    1. Update Podfile config:
    plugin 'cocoapods-user-defined-build-types'
enable_user_defined_build_types!

pod 'MercadoPagoSDK', :build_type => :dynamic_framework
    1. Install Pods
    gem install cocoapods-user-defined-build-types

cd ios && pod install && cd .. # CocoaPods on iOS needs this extra step

  • Android Platform:

    Modify your android/app/src/main/AndroidManifest.xml configuration:

    <manifest xmlns:android="http://schemas.android.com/apk/res/android" xmlns:tools="http://schemas.android.com/tools"
package="com.myapp">
  <application
    ...
    tools:replace="android:allowBackup">

Using React Native < 0.60

$ react-native link react-native-mercado-pago

Manual installation

iOS

  1. In XCode, in the project navigator, right click Libraries ➜ Add Files to [your project's name]
  2. Go to node_modules ➜ react-native-mercado-pago and add RNMercadoPago.xcodeproj
  3. In XCode, in the project navigator, select your project. Add libRNMercadoPago.a to your project's Build Phases ➜ Link Binary With Libraries
  4. Run your project (Cmd+R)<

Android

  1. Open up android/app/src/main/java/[...]/MainActivity.java
  • Add import com.proyecto26.mercadopago.RNMercadoPagoPackage; to the imports at the top of the file
  • Add new RNMercadoPagoPackage() to the list returned by the getPackages() method
  1. Append the following lines to android/settings.gradle: 
    include ':react-native-mercado-pago'
project(':react-native-mercado-pago').projectDir = new File(rootProject.projectDir, 	'../node_modules/react-native-mercado-pago/android')
  2. Insert the following lines inside the dependencies block in android/app/build.gradle: 
      implementation project(':react-native-mercado-pago')

Example 🎉

Create your preference id

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"
           }
     }'

A demo is included in the example project, payer email has to be different from the one of credentials.

Start payment with the preference Id

import MercadoPago from 'react-native-mercado-pago';

async startPayment() {
  try {
    const publicKey = 'TEST-dc0b51e0-0eb7-47ce-b145-5585a0189eb0';
    const preferenceId = '113196323-082708db-09c3-4c7d-a65a-727e237c76e0';
    const payment = await MercadoPago.startPayment(publicKey, preferenceId, {
      language: 'es',
      color: '#6200EE',
      sessionId: 'session-123',
      productId: 'product-123',
      enableESC: true,
      enableBankDeals: true,
      enableAmountRow: true,
      enableExpressPayment: true,
    });
    if (payment.type === 'success') {
      const {
        id,
        status,
        detail,
        description,
      } = payment
      Alert.alert('Success', `Payment Id: ${id}`);
    } else {
      Alert.alert('Canceled', 'Se canceló la transacción');
    }
  } catch (error) {
    Alert.alert(error.message);
  }
}

Testing 👨‍💻

Enterprise Support 💼

Save time, reduce risk, and improve code health! You can find commercial support and maintenance in the Open Source repository for this plugin here.

Happy coding 💯

Made with ❤️