RenderizaĆ§Ć£o padrĆ£o
Antes de realizar a renderizaĆ§Ć£o do Payment Brick, primeiro execute os passos de inicializaĆ§Ć£o compartilhados entre todos os Bricks. A partir disso, veja abaixo as informaƧƵes necessĆ”rias para vocĆŖ configurar e renderizar o Payment Brick.
Configurar o Brick
Crie a configuraĆ§Ć£o de inicializaĆ§Ć£o do Brick.
const renderPaymentBrick = async (bricksBuilder) => {
const settings = {
initialization: {
/*
"amount" Ć© o valor total a ser pago por todos os meios de pagamento com exceĆ§Ć£o da Conta Mercado Pago e Parcelamento sem cartĆ£o de crĆ©dito, que tem seu valor de processamento determinado no backend atravĆ©s do "preferenceId"
*/
amount: 100,
preferenceId: "<PREFERENCE_ID>",
},
customization: {
paymentMethods: {
ticket: "all",
creditCard: "all",
debitCard: "all",
mercadoPago: "all",
},
},
callbacks: {
onReady: () => {
/*
Callback chamado quando o Brick estiver pronto.
Aqui vocĆŖ pode ocultar loadings do seu site, por exemplo.
*/
},
onSubmit: ({ selectedPaymentMethod, formData }) => {
// callback chamado ao clicar no botĆ£o de submissĆ£o dos dados
return new Promise((resolve, reject) => {
fetch("/process_payment", {
method: "POST",
headers: {
"Content-Type": "application/json",
},
body: JSON.stringify(formData),
})
.then((response) => response.json())
.then((response) => {
// receber o resultado do pagamento
resolve();
})
.catch((error) => {
// lidar com a resposta de erro ao tentar criar o pagamento
reject();
});
});
},
onError: (error) => {
// callback chamado para todos os casos de erro do Brick
console.error(error);
},
},
};
window.paymentBrickController = await bricksBuilder.create(
"payment",
"paymentBrick_container",
settings
);
};
renderPaymentBrick(bricksBuilder);
const initialization = {
amount: 100,
preferenceId: "<PREFERENCE_ID>",
};
const customization = {
paymentMethods: {
ticket: "all",
creditCard: "all",
debitCard: "all",
mercadoPago: "all",
},
};
const onSubmit = async (
{ selectedPaymentMethod, formData }
) => {
// callback chamado ao clicar no botĆ£o de submissĆ£o dos dados
return new Promise((resolve, reject) => {
fetch("/process_payment", {
method: "POST",
headers: {
"Content-Type": "application/json",
},
body: JSON.stringify(formData),
})
.then((response) => response.json())
.then((response) => {
// receber o resultado do pagamento
resolve();
})
.catch((error) => {
// lidar com a resposta de erro ao tentar criar o pagamento
reject();
});
});
};
const onError = async (error) => {
// callback chamado para todos os casos de erro do Brick
console.log(error);
};
const onReady = async () => {
/*
Callback chamado quando o Brick estiver pronto.
Aqui vocĆŖ pode ocultar loadings do seu site, por exemplo.
*/
};
Para utilizar o mƩtodo de pagamento (paymentMethods
) do tipo "mercadoPago" Ć© preciso enviar uma preferĆŖncia durante a inicializaĆ§Ć£o do Brick, substituindo o valor <PREFERENCE_ID>
pelo ID da preferĆŖncia criada. As instruƧƵes para criaĆ§Ć£o da preferĆŖncia estĆ£o na seĆ§Ć£o Habilitar pagamento com Mercado Pago.
Renderizar o Brick
Uma vez criadas as configuraƧƵes, insira o cĆ³digo abaixo para renderizar o Brick.
<div id="paymentBrick_container"></div>
import { Payment } from '@mercadopago/sdk-react';
<Payment
initialization={initialization}
customization={customization}
onSubmit={onSubmit}
onReady={onReady}
onError={onError}
/>
O resultado de renderizar o Brick deve ser como na imagem abaixo.
Habilitar pagamento com Mercado Pago
Para utilizar o mĆ©todo de pagamento (paymentMethods) do tipo "mercadoPago" Ć© preciso enviar uma preferĆŖncia durante a inicializaĆ§Ć£o do Brick, substituindo o valor <PREFERENCE_ID> pelo ID da preferĆŖncia criada.
Para criar uma preferĆŖncia em seu backend, adicione o SDK do Mercado Pago e as credenciais necessĆ”rias ao seu projeto para habilitar o uso de preferĆŖncias.
<?php
// SDK do Mercado Pago
require __DIR__ . '/vendor/autoload.php';
// Adicione as credenciais
MercadoPago\SDK::setAccessToken('PROD_ACCESS_TOKEN');
?>
// SDK do Mercado Pago
const mercadopago = require ('mercadopago');
// Adicione as credenciais
mercadopago.configure({
access_token: 'PROD_ACCESS_TOKEN'
});
// SDK do Mercado Pago
import com.mercadopago.MercadoPagoConfig;
// Adicione as credenciais
MercadoPagoConfig.setAccessToken("PROD_ACCESS_TOKEN");
# SDK do Mercado Pago
require 'mercadopago'
# Adicione as credenciais
sdk = Mercadopago::SDK.new('PROD_ACCESS_TOKEN')
// SDK do Mercado Pago
using MercadoPago.Config;
// Adicione as credenciais
MercadoPagoConfig.AccessToken = "PROD_ACCESS_TOKEN";
# SDK do Mercado Pago
import mercadopago
# Adicione as credenciais
sdk = mercadopago.SDK("PROD_ACCESS_TOKEN")
Em seguida, configure a preferĆŖncia de acordo com o seu produto ou serviƧo.
Os exemplos de cĆ³digo abaixo configuram o purpose da preferĆŖncia como wallet_purchase
, onde o usuƔrio deverƔ fazer login quando for redirecionado para sua conta do Mercado Pago.
<?php
// Cria um objeto de preferĆŖncia
$preference = new MercadoPago\Preference();
// Cria um item na preferĆŖncia
$item = new MercadoPago\Item();
$item->title = 'Meu produto';
$item->quantity = 1;
$item->unit_price = 75.56;
$preference->items = array($item);
// o $preference->purpose = 'wallet_purchase'; permite apenas pagamentos logados
// para permitir pagamentos como guest, vocĆŖ pode omitir essa propriedade
$preference->purpose = 'wallet_purchase';
$preference->create();
?>
// Cria um objeto de preferĆŖncia
let preference = {
// o "purpose": "wallet_purchase" permite apenas pagamentos logados
// para permitir pagamentos como guest, vocĆŖ pode omitir essa propriedade
"purpose": "wallet_purchase",
"items": [
{
"id": "item-ID-1234",
"title": "Meu produto",
"quantity": 1,
"unit_price": 75.76
}
]
};
mercadopago.preferences.create(preference)
.then(function (response) {
// Este valor Ć© o preferenceId que serĆ” enviado para o Brick na inicializaĆ§Ć£o
const preferenceId = response.body.id;
}).catch(function (error) {
console.log(error);
});
// Cria um objeto de preferĆŖncia
PreferenceClient client = new PreferenceClient();
// Cria um item na preferĆŖncia
List<PreferenceItemRequest> items = new ArrayList<>();
PreferenceItemRequest item =
PreferenceItemRequest.builder()
.title("Meu produto")
.quantity(1)
.unitPrice(new BigDecimal("100"))
.build();
items.add(item);
PreferenceRequest request = PreferenceRequest.builder()
// o .purpose('wallet_purchase') permite apenas pagamentos logados
// para permitir pagamentos como guest, vocĆŖ pode omitir essa linha
.purpose('wallet_purchase')
.items(items).build();
client.create(request);
# Cria um objeto de preferĆŖncia
preference_data = {
# o purpose: 'wallet_purchase', permite apenas pagamentos logados
# para permitir pagamentos como guest, vocĆŖ pode omitir essa propriedade
purpose: 'wallet_purchase',
items: [
{
title: 'Meu produto',
unit_price: 75.56,
quantity: 1
}
]
}
preference_response = sdk.preference.create(preference_data)
preference = preference_response[:response]
# Este valor Ć© o preferenceId que vocĆŖ usarĆ” no HTML na inicializaĆ§Ć£o no Brick
@preference_id = preference['id']
// Cria o objeto de request da preferĆŖncia
var request = new PreferenceRequest
{
// o Purpose = 'wallet_purchase', permite apenas pagamentos logados
// para permitir pagamentos como guest, vocĆŖ pode omitir essa propriedade
Purpose = "wallet_purchase",
Items = new List<PreferenceItemRequest>
{
new PreferenceItemRequest
{
Title = "Meu produto",
Quantity = 1,
CurrencyId = "BRL",
UnitPrice = 75.56,
},
},
};
// Cria a preferĆŖncia usando o client
var client = new PreferenceClient();
Preference preference = await client.CreateAsync(request);
# Cria um item na preferĆŖncia
preference_data = {
# o "purpose": "wallet_purchase", permite apenas pagamentos logados
# para permitir pagamentos como guest, vocĆŖ pode omitir essa propriedade
"purpose": "wallet_purchase",
"items": [
{
"title": "Meu Item",
"quantity": 1,
"unit_price": 75.76
}
]
}
preference_response = sdk.preference().create(preference_data)
preference = preference_response["response"]
curl -X POST \
'https://api.mercadopago.com/checkout/preferences' \
-H 'Content-Type: application/json' \
-H 'cache-control: no-cache' \
-H 'Authorization: Bearer **PROD_ACCESS_TOKEN**' \
-d '{
"purpose": "wallet_purchase",
"items": [
{
"title": "Meu produto",
"quantity": 1,
"unit_price": 75.76
}
]
}'