Back

Payment Integrations to Mercado Pago

Research by Franacisco Crizul, Mariano Amado, and Matias Leyba

Mercado Pago is the biggest online payment platform in Latin America. When using this platform, the client can choose their preferred payment method, with few restrictions –even QR codes are accepted– which turns this into the best possible option for Latin American entrepreneurs.

Our team members, Francisco, Mariano, and Matias, researched Mercado Pago’s different integrations.

When working for last-mile delivery and e-commerce, at Dixtra we faced several situations where integrating our products to this kind of platform became key.

In this article, we go over the different integration options, and we use an app created by us, Listala, as a Case Study to show different results.

Integration Options

Checkout API

It allows total control over the UX/UI within the platform without showing external screens.

Pros:

Customizable interphase Payment notifications in real-time to the Back-end It allows using marketplace (commissions, for example)

Cons:

Requires Back-end and Front-end development Version maintenance of the Front-end A new Front-end version needs to be developed in each new project Requires testing Demands more research on how the Mercado Libre API works

Checkout PRO

It provides another abstraction level, using a UX/UI developed by Mercado Pago.

Pros:

Easy implementation and management Fewer errors It allows using Marketplace Multiplatform Enables payment notifications in real-time to the BE It will allow integrations to support e-commerce It allows new plugin developments for non-supported e-commerce It’s responsive

Cons:

Web experience (not native) UI/UX defined by Mercado Pago (with their logos, too) The only customizable features are color, spinners, and texts

Dixtra_Blog Post_CheckoutPRO.jpg

Mobile Checkout

This option offers a native experience with a UX/UI developed by Mercado Pago.

Pros:

Native User Experience Easy Implementation

Cons:

Maintenance It’s only for mobile No customizable UI It doesn’t work in Marketplace Requires native code

Use Cases

Let’s use Listala as an example.

Listala is a stock management app for entrepreneurs developed by Dixtra for Latin America.

Checkout Api

To integrate Listala with Mercado Pago is easy as A-B-C

Dixtra_Blog Post_Use Case Checkout API.jpg

Checkout Pro

The app allows making payments directly from Mercado Pago through the website. The API gives access through the SDK of Mercado Pago.

The solution offered by Checkout Pro

Standardized integration with Checkout Pro through creating templates, libraries, and/or examples for each language/framework that can also be used in future projects.

On one side, it covers the backend code in charge of getting access to Checkout PRO; on the other, it uses the frontend to get the web flow of Checkout PRO to run results.

Checkout API

Listala is a project where the user experience and aesthetics are essential to the result. But let’s pretend we’re also facing an app where time and money are not an impediment.

In this supposed success case, we want to integrate Mercado Pago but keep the UX/UI provided by the app designers.

The solution implies the UI development and the implementation of new operations in the backend, using the checkout API provided by Mercado Pago.

This solution offers template creation, boilerplate codes to integrate the Checkout API functionalities and an existing backend easily and fast.

This requires Libis development or examples in different languages/frameworks for front-end by services interaction.

The proposed solution for Checkout API

We managed to create a service for Dixtra, to manage several payment accounts. Although it sounds like a meaningful idea, it can also present other difficulties: an error in the system can bring down all previous efforts.

Scenario with Mobile Checkout

When using Mobile Checkout, Mercado Pago offers a native view in charge of the whole payment flow.

The app shoots the functionality once it gets the operation results. The only aspects that can be personalized to match the app’s branding are the color palette.

Proposed Solution for Mobile Checkout

The development team should use templates to facilitate their work, alongside languages and frameworks. If necessary, they can also develop libraries to hook the native code with the different languages.

It’s also important to keep in mind that different SDKs versions are needed, as they can vary from project to project, and they might become incompatible in the future.

Although we can currently find different non-official libraries for some frameworks (such as React Native and Flutter), the main problem is that they need to be constantly under maintenance.

E-Commerce Support

Our investigation shows that there are several solutions Mercado Pago supports, as well as other e-commerce that Mercado Pago recognizes:

  • ecwid
  • volusion

A different option is integrating an e-commerce platform not supported by Mercado Pago (this can be done by developing plugins, for example). An example of this is BigCommerce, a solid competitor to Shopify.

Conclusion

Checkout Pro offers a well-defined UX/UI that can’t be modified. Because it’s a web interface, it works on any platform with barely any maintenance from the development team.

With that in mind, we consider this the best option for projects where time is short.