@minskylab/medusa-payment-mercadopago

medusa-payment-mercadopago

This is a Medusa plugin that adds Mercado Pago as a payment provider to Medusa ecommerce stores.

The plugin provides a seamless integration between Mercado Pago and MedusaJS, enabling online merchants to easily accept payments from customers in their local currency. The repository includes documentation on how to install and configure the plugin, as well as examples of its usage.

Installation

In the root of your Medusa server, run the following command to install the plugin:

npm install @minskylab/medusa-payment-mercadopago

or

yarn add @minskylab/medusa-payment-mercadopago

Configuration

Register for a MercadoPago account and get your credentials. To configure the plugin, you'll need to set the following environment variables in your environment file (.env)

MERCADOPAGO_ACCESS_TOKEN=<your access token>
MERCADOPAGO_SUCCESS_BACKURL=<your backurl when payment is successful>
MERCADOPAGO_WEBHOOK_URL=<your medusa server url>

Next, in medusa-config.js add the following at the end of the plugins array:

const plugins = [
  // other plugins
  {
    resolve: `@minskylab/medusa-payment-mercadopago`,
    options: {
      access_token: process.env.MERCADOPAGO_ACCESS_TOKEN,
      success_backurl: process.env.MERCADOPAGO_SUCCESS_BACKURL,
      webhook_url: process.env.MERCADOPAGO_WEBHOOK_URL,
    },
  },
];

Client side configuration

medusa-payment-mercadopago returns a preference id you should send to Mercadopago Checkout as the preference id.

By using the returned ID, the plugin can obtain the necessary URL to initiate the payment flow with the product information.

Using Preference ID

medusa-payment-mercadopago inserts a preferenceId into the PaymentSession's data.

Provide this id to initialize your checkout.

Add Mercadopago Checkout Pro

To add Checkout Pro to your client-side, you'll need to install the Mercado Pago frontend SDK. In this example, we'll be using the react-sdk-mercadopago package to integrate the SDK with React.

Once you've installed the SDK, you can initialize the checkout by providing your PUBLIC KEY and the preferenceId. Take a look at the example below for guidance.

In this example, we've used a button to open Checkout Pro in a modal format, allowing the user to complete their purchase.

import { useMercadopago } from "react-sdk-mercadopago";

const MERCADOPAGO_PUBLIC_KEY = process.env.NEXT_PUBLIC_MERCADOPAGO_PUBLIC_KEY || "";

const MercadoPagoButton = ({ session }: { session: PaymentSession }) => {
  const mercadoPago = useMercadopago.v2(MERCADOPAGO_PUBLIC_KEY, {
    locale: "es-PE",
  });

  const checkout = mercadoPago?.checkout({
    preference: {
      id: session.data.preferenceId, //preference ID
    },
  });

  return (
    <Button
      size="md"
      onClick={() => checkout.open()}
    >
      Pagar
    </Button>
  );
};

Contributing

Contributions are welcome! Please feel free to submit a pull request or open an issue if you encounter any problems.

License

This project is licensed under the MIT License