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.

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

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

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

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
  

  2. 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">
  

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

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)<

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

2. 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')
   

3. Insert the following lines inside the dependencies block in android/app/build.gradle:

     implementation project(':react-native-mercado-pago')
   

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": "[email protected]"
           }
     }'

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

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);
  }
}

• Test the integration: https://www.mercadopago.com.co/developers/en/guides/marketplace/web-checkout/testing-marketplace/

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

Made with ❤️