Ejemplo de código (tarjetas)
Para facilitar y optimizar su proceso de integración, vea a continuación un ejemplo completo de cómo incluir una tarjeta de crédito y débito como medio de pago con Payment Brick y cómo, luego de realizar la integración, enviar el pago a Mercado Pago.
Configurar la integración
Client-Side
NOTAAtenciónSi es necesario cerrar y volver a abrir el Brick (cuando un usuario vuelve al carrito para cambiar algún detalle de compra, por ejemplo) es necesario eliminar la instancia actual del Brick y crear una nueva cuando sea necesario mostrarlo otra vez.
Para ello, utilice el método
unmount disponible en el controller de Brick, en este caso: window.paymentBrickController.unmount().html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Bricks</title>
</head>
<body>
<div id="paymentBrick_container"></div>
<script src="https://sdk.mercadopago.com/js/v2"></script>
<script>
const mp = new MercadoPago('YOUR_PUBLIC_KEY');
const bricksBuilder = mp.bricks();
const renderPaymentBrick = async (bricksBuilder) => {
const settings = {
initialization: {
amount: 100, // monto a ser pago
},
customization: {
paymentMethods: {
creditCard: 'all',
debitCard: 'all',
},
},
callbacks: {
onReady: () => {
/*
Callback llamado cuando Brick está listo
Aquí puedes ocultar loadings de su sitio, por ejemplo.
*/
},
onSubmit: ({ selectedPaymentMethod, formData }) => {
// callback llamado al hacer clic en el botón de envío de datos
return new Promise((resolve, reject) => {
fetch("/processar-pago", {
method: "POST",
headers: {
"Content-Type": "application/json",
},
body: JSON.stringify(formData)
})
.then((response) => {
// recibir el resultado del pago
resolve();
})
.catch((error) => {
// manejar la respuesta de error al intentar crear el pago
reject();
})
});
},
onError: (error) => {
// callback solicitado para todos los casos de error de Brick
console.error(error);
},
},
};
window.paymentBrickController = await bricksBuilder.create(
'payment',
'paymentBrick_container',
settings
);
};
renderPaymentBrick(bricksBuilder);
</script>
</body>
</html>Envía el pago a Mercado Pago
Server-Side
<?php
require_once 'vendor/autoload.php';
MercadoPago\SDK::setAccessToken("YOUR_ACCESS_TOKEN");
$contents = json_decode(file_get_contents('php://input'), true);
$payment = new MercadoPago\Payment();
$payment->transaction_amount = $contents['transaction_amount'];
$payment->token = $contents['token'];
$payment->installments = $contents['installments'];
$payment->payment_method_id = $contents['payment_method_id'];
$payment->issuer_id = $contents['issuer_id'];
$payer = new MercadoPago\Payer();
$payer->email = $contents['payer']['email'];
$payer->identification = array(
"type" => $contents['payer']['identification']['type'],
"number" => $contents['payer']['identification']['number']
);
$payment->payer = $payer;
$payment->save();
$response = array(
'status' => $payment->status,
'status_detail' => $payment->status_detail,
'id' => $payment->id
);
echo json_encode($response);
?>
var mercadopago = require('mercadopago');
mercadopago.configurations.setAccessToken("YOUR_ACCESS_TOKEN");
var payment_data = {
amount: req.body.amount,
...
}
mercadopago.payment.save(payment_data)
.then(function(response) {
const { status, status_detail, id } = response.body;
res.status(response.status).json({ status, status_detail, id });
})
.catch(function(error) {
console.error(error);
});
PaymentClient client = new PaymentClient();
PaymentCreateRequest paymentCreateRequest =
PaymentCreateRequest.builder()
.transactionAmount(request.getTransactionAmount())
.token(request.getToken())
.description(request.getDescription())
.installments(request.getInstallments())
.paymentMethodId(request.getPaymentMethodId())
.payer(
PaymentPayerRequest.builder()
.email(request.getPayer().getEmail())
.firstName(request.getPayer().getFirstName())
.identification(
IdentificationRequest.builder()
.type(request.getPayer().getIdentification().getType())
.number(request.getPayer().getIdentification().getNumber())
.build())
.build())
.build();
client.create(paymentCreateRequest);
require 'mercadopago'
sdk = Mercadopago::SDK.new('YOUR_ACCESS_TOKEN')
payment_data = {
transaction_amount: params[:transactionAmount].to_f,
token: params[:token],
description: params[:description],
installments: params[:installments].to_i,
payment_method_id: params[:paymentMethodId],
payer: {
email: params[:cardholderEmail],
identification: {
type: params[:identificationType],
number: params[:identificationNumber]
},
first_name: params[:cardholderName]
}
}
payment_response = sdk.payment.create(payment_data)
payment = payment_response[:response]
puts payment
using System;
using MercadoPago.Client.Common;
using MercadoPago.Client.Payment;
using MercadoPago.Config;
using MercadoPago.Resource.Payment;
MercadoPagoConfig.AccessToken = "YOUR_ACCESS_TOKEN";
var paymentRequest = new PaymentCreateRequest
{
TransactionAmount = decimal.Parse(Request["transactionAmount"]),
Token = Request["token"],
Description = Request["description"],
Installments = int.Parse(Request["installments"]),
PaymentMethodId = Request["paymentMethodId"],
Payer = new PaymentPayerRequest
{
Email = Request["cardholderEmail"],
Identification = new IdentificationRequest
{
Type = Request["identificationType"],
Number = Request["identificationNumber"],
},
FirstName = Request["cardholderName"]
},
};
var client = new PaymentClient();
Payment payment = await client.CreateAsync(paymentRequest);
Console.WriteLine(payment.Status);
import mercadopago
sdk = mercadopago.SDK("ACCESS_TOKEN")
payment_data = {
"transaction_amount": float(request.POST.get("transaction_amount")),
"token": request.POST.get("token"),
"description": request.POST.get("description"),
"installments": int(request.POST.get("installments")),
"payment_method_id": request.POST.get("payment_method_id"),
"payer": {
"email": request.POST.get("cardholderEmail"),
"identification": {
"type": request.POST.get("identificationType"),
"number": request.POST.get("identificationNumber")
}
"first_name": request.POST.get("cardholderName")
}
}
payment_response = sdk.payment().create(payment_data)
payment = payment_response["response"]
print(payment)
curl -X POST \
-H 'accept: application/json' \
-H 'content-type: application/json' \
-H 'Authorization: Bearer YOUR_ACCESS_TOKEN' \
'https://api.mercadopago.com/v1/payments' \
-d '{
"transaction_amount": 100,
"token": "ff8080814c11e237014c1ff593b57b4d",
"description": "Blue shirt",
"installments": 1,
"payment_method_id": "visa",
"issuer_id": 310,
"payer": {
"email": "test@test.com",
"identification": {
"number": 19119119100,
"type": "CPF"
}
}
}'
Respuesta
json
{
"status": "approved",
"status_detail": "accredited",
"id": 3055677,
"date_approved": "2019-02-23T00:01:10.000-04:00",
"payer": {
...
},
"payment_method_id": "visa",
"payment_type_id": "credit_card",
"refunds": [],
...
}