marcosgomesneto / medusa-payment-mercadopago

Mercadopago Transparent Checkout Provider for Meduas Commerce accept Credit Card and PIX

Mercado Pago Transparent Checkout for MedusaJS

Receive payments on your Medusa commerce application using Mercadopago Transparent Checkout.

Features

• Authorize payments with Credit Card using Transparent Checkout.
• Authorize payments with PIX (Brazilian) using Transparent Checkout.
• Support Webhooks
• Webhook security validation

---

Prerequisites

• Medusa backend
• Mercadopago account

Contribute with:

• ⭐ Starred this repository
• Follow me in github
• Report Inssues

---

How to Install

1. Run the following command in the directory of the Medusa backend:

#Using npm
npm install @marcosgn/medusa-payment-mercadopago

#Using yarn
yarn add @marcosgn/medusa-payment-mercadopago

2. Set the following environment variables in .env:

MERCADOPAGO_ACCESS_TOKEN=APP_USR...
MERCADOPAGO_WEBHOOK_URL=http....

# Optional, but recommended in production
MERCADOPAGO_WEBHOOK_SECRET=5573326353c523ebbc84af5ad376b860ad5225339d05535c804974b2393d0f30

Generate your token here: Mercadopago developers

3. In medusa-config.js add the following at the end of the plugins array:

const plugins = [
  // ...
  {
    resolve: `@marcosgn/medusa-payment-mercadopago`,
    options: {
      accessToken: process.env.MERCADOPAGO_ACCESS_TOKEN,
      webhookSecret: process.env.MERCADOPAGO_WEBHOOK_SECRET,
      webhookUrl: process.env.MERCADOPAGO_WEBHOOK_URL,
    },
  },
];

---

Test the Plugin

1. Run the following command in the directory of the Medusa backend to run the backend:

#Using npm
npm run dev

#Using
yarn dev

2. Enable Mercadopago Credit Card or/and Pi in a region in the admin panel. You can refer to this User Guide to learn how to do that. Alternatively, you can use the Admin APIs.

3. Place an order using a storefront or the Store APIs. You should be able to use Mercadopago as a payment method.

Storefront Usage

Transparent checkout documentation for storefront Mercadopago Docs

Credit Card Payment

const client = useMedusaClient();

//Set provider
await client.carts.setPaymentSession(cartId, {
  provider_id: "mercadopago-creditcard",
});

//Update required props in payment session
await client.carts.updatePaymentSession(cartId, paymentProviderId, {
  data: {
    token: "...", //Credit Card Token
    installment: "1",
    cpfCnpj: "000000000000",
    holderName: "John Doe",
    identificationType: "CPF",
    issuerId: "...",
    paymentMethodId: "master",
  },
});

//Complete and capture payment
const response = await client.carts.complete(cartId);

Pix Payment

const client = useMedusaClient();

await client.carts.setPaymentSession(cartId, {
  provider_id: "mercadopago-pix",
});

//Complete and recive PIX Qrcode
const response = await client.carts.complete(cartId);

//Copy and Paste Code
const copyPasteCode = response.data.payment_session.data.qrCode;
//QRCode image in base64 format
const base64Image = response.data.payment_session.data.qrCodeBase64;

---