Receba Pagamentos
Esta guia irá ajudá-lo a integrar o componente visual de pagamento do Mercado Pago em sua aplicação. Este componente gerencia a seleção do meio de pagamento, a coleta de dados do meio de pagamento do usuário e a comunicação do resultado do pagamento.
A integração consiste em duas etapas:
- Integração em seu servidor: nesta etapa, você receberá a informação sobre o pagamento.
- Integração em sua aplicação: nesta etapa, você irá configurar o componente visual.
- Crie a preferência de pagamento a partir de seu servidor nos servidores do MercadoPago.
- Inicie o Checkout em sua aplicação utilizando a ID da preferência.
- O Checkout efetuará o pagamento nos servidores do MercadoPago.
- Inscreva-se nas notificações para obter informações sobre seus novos pagamentos e atualizações de status.
Configure seu servidor
Para poder iniciar o fluxo de pagamento, é necessário obter as informações sobre o produto ou serviço a ser pago.
Esta entidade é a preferência de pagamento e contém:
- Descrição e preço.
- Informações do seu comprador (e-mail, nome, endereço, etc.).
- Meios de pagamentos aceitos.
- ID de referência do seu sistema.
<?php
require ('mercadopago.php');
MercadoPago\SDK::configure(['ACCESS_TOKEN' => 'ENV_ACCESS_TOKEN']);
?>
import com.mercadopago.*;
MercadoPago.SDK.configure("ENV_ACCESS_TOKEN");
var mercadopago = require('mercadopago');
mercadopago.configure({
access_token: 'ENV_ACCESS_TOKEN'
});
require 'mercadopago'
MercadoPago::SDK.configure(ACCESS_TOKEN: ENV_ACCESS_TOKEN)
Depois você deverá adicionar os atributos das suas preferências de pagamento:
<?php
$preference = new MercadoPago\Preference();
$item = new MercadoPago\Item();
$item->title = "Blue shirt";
$item->quantity = 10;
$item->currency_id = "BRL";
$item->unit_price = 10;
$payer = new MercadoPago\Payer();
$payer->email = "test_user_19653727@testuser.com";
$preference->items = array($item);
$preference->payer = $payer;
$preference->save();
?>
Preference preference = new Preference();
Item item = new Item();
item.setId("1234")
.setTitle("Blue shirt")
.setQuantity(10)
.setCategoryId("BRL")
.setUnitPrice((float)10);
Payer payer = new Payer();
payer.setEmail("john@yourdomain.com");
preference.setPayer(payer);
preference.appendItem(item);
preference.save();
var preference = {}
var item = {
title: 'Blue shirt',
quantity: 10,
currency_id: 'BRL',
unit_price: 10
}
var payer = {
email: "demo@mail.com"
}
preference.items = [item]
preference.payer = payer
mercadopago.preferences.create(preference).then(function (data) {
// Do Stuff...
}).catch(function (error) {
// Do Stuff...
});
preference = MercadoPago::Preference.new()
item = MercadoPago::Item.new()
item.title="Blue shirt"
item.quantity= 10
item.currency_id = 'BRL'
item.unit_price = 10
payer = MercadoPago::Payer.new()
payer.email="john@yourdomain.com"
preference.items = [item]
preference.payer = payer
preference.save
Conteúdo da preferência
Quanto mais informações você nos enviar, melhor será a aprovação dos pagamentos e a experiência de seus usuários.
Payer
É necessário o envio do e-mail
de seu comprador.
json
{
...,
"payer": {
"name": "Maria",
"surname": "Silva",
"email": "john@yourdomain.com",
"date_created": "2015-06-02T12:58:41.425-04:00",
"phone": {
"area_code": "11",
"number": "987654321"
},
"identification": {
"type": "DNI",
"number": "123456789"
},
"address": {
"street_name": "Av. das Nações Unidas",
"street_number": 7304,
"zip_code": "52"
}
},
...
}
Integre o fluxo de pagamentos do Mercado Pago em sua aplicação
1. Conecte sua aplicação com seu servidor
No SDK, nós oferecemos uma classe chamada CustomServer para que a conexão com seu servidor seja mais fácil. O método createPreference faz um POST e envia como corpo da mensagem o mapa que tiver definido (preferenceMap
). Indique sua URL base (https://your-base-url.com) e a URI (/your-create-preference-uri) onde espera os dados para criar a preferência.
O CustomServer irá transformar a resposta do seu serviço (que deve ter a mesma estrutura que a do MercadoPago) em um objeto CheckoutPreference, cuja ID é o ponto de entrada para o nosso checkout.
Crie a preferência em seu servidor a partir de sua aplicação com o seguinte código:
public void submit(View view) {
// Create a map with payment’s details.
Map<String, Object> preferenceMap = new HashMap<>();
preferenceMap.put("item_id", "1");
preferenceMap.put("amount", new BigDecimal(10));
preferenceMap.put("currency_id", "BRL");
preferenceMap.put("payer_email", "john@yourdomain.com");
final Activity activity = this;
LayoutUtil.showProgressLayout(activity);
CustomServer.createCheckoutPreference(activity, "https://your-base-url.com", "/your-create-preference-uri", preferenceMap, new Callback<CheckoutPreference>() {
@Override
public void success(CheckoutPreference checkoutPreference) {
startMercadoPagoCheckout(checkoutPreference);
LayoutUtil.showRegularLayout(activity);
}
@Override
public void failure(ApiException apiException) {
// Ups, something went wrong
}
});
}
let preferenceBody : [String : Any] = ["item_id" : "id", "quantity" : 3]
CustomServer.createCheckoutPreference(url: "https://your-base-url.com/", uri: "your-create-preference-uri", bodyInfo: preferenceBody as NSDictionary, success: { (checkoutPrefernece) in
startMercadoPagoCheckout(checkoutPreference)
}) { (error) in
// Handle error
}
2. 2. Crie um botão de pagamento
Como exemplo, sugerimos que inicie o fluxo do Mercado Pago a partir de um botão.
- Crie uma Atividade para inserir o botão (MainActivity, por exemplo). 2. Adicione um campo de texto para mostrar o resultado do pagamento. 3. Cole o seguinte código de exemplo em res/layout/activity_main.xml.
<FrameLayout xmlns:android='http://schemas.android.com/apk/res/android'
xmlns:tools='http://schemas.android.com/tools'
android:layout_width='match_parent'
android:layout_height='match_parent'
android:paddingLeft='@dimen/activity_horizontal_margin'
android:paddingRight='@dimen/activity_horizontal_margin'
android:paddingTop='@dimen/activity_vertical_margin'
android:paddingBottom='@dimen/activity_vertical_margin'
android:orientation='vertical'
tools:context='.MainActivity'>
<include layout="@layout/mpsdk_view_progress_bar"/>
<LinearLayout
android:id="@+id/mpsdkRegularLayout"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<Button
android:layout_width='match_parent'
android:layout_height='50dp'
android:layout_marginTop='25dp'
android:gravity='center'
android:text='Pagar $10'
android:onClick='submit'/>
<TextView
android:layout_width='match_parent'
android:layout_height='wrap_content'
android:id='@+id/mp_results'
android:paddingTop='50dp'/>
</LinearLayout>
</FrameLayout>
- Crie um ViewController para inserir o botão (MainViewController, por exemplo). 2. Insira um botão no .xib correspondente. 3. Adicione um campo de texto para mostrar o resultado do pagamento. 4. Cole o seguinte código de exemplo em sua classe MainViewController.swift. 5. No próximo passo, você trabalhará no evento associado ao clique do botão (startCheckout).
import UIKit
import MercadoPagoSDK
class MainViewController: UIViewController {
@IBOutlet weak var payButton: UIButton!
@IBOutlet weak var paymentResult: UITextField!
override func viewDidLoad() {
super.viewDidLoad()
self.payButton.addTarget(self,
action: #selector(MainViewController.startCheckout),
for: .touchUpInside)
}
}
3. Inicie o Checkout!
Após ter criado a preferência de pagamento e definido um evento a partir do qual deseja iniciar o fluxo de pagamento, você poderá iniciar o nosso Checkout com o seguinte código:
private void startMercadoPagoCheckout(CheckoutPreference checkoutPreference) {
new MercadoPagoCheckout.Builder()
.setActivity(activity)
.setPublicKey("ENV_PUBLIC_KEY").setCheckoutPreference(checkoutPreference)
.startForPayment();
}
O fluxo do nosso checkout está baseado em NavigationController. Caso sua aplicação também esteja baseada em NavigationControllers, você pode iniciar o fluxo do Checkout utilizando o NavigationController da sua aplicação, ou você pode criar um, iniciar o Checkout sobre ele e, em seguida, apresentá-lo.
public func startMercadoPagoCheckout(_ checkoutPreference CheckoutPreference) {
let checkout = MercadoPagoCheckout(publicKey: "ENV_PUBLIC_KEY", accessToken: nil, checkoutPreference: checkoutPreference,
navigationController: self.navigationController!)
checkout.start()
}
4. Obtenha a resposta
O SDK sempre retornará o resultado do pagamento.
Se houve qualquer erro que não pôde ser evitado ou o usuário abandonou o fluxo, ele retornará um objeto que representa o erro para que você possa entender o que aconteceu.
Estes são os atributos mais importantes de pagamento:
- id: Identificação do pagamento.
- status: Status do pagamento.
- payment_method_id: Identificador do meio de pagamento selecionado pelo usuário.
- payment_type_id: Tipo de meio de pagamento selecionado.
- card: Objeto que identifica o cartão do usuário.
- issuer_id: Identificação do banco do cartão selecionado pelo usuário.
- installments: Número de parcelas selecionado.
Os possíveis estados de um pagamento são:
Você poderá obter a resposta com o seguinte código:
@Override
protected void onActivityResult(int requestCode, int resultCode, Intent data) {
if (requestCode == MercadoPagoCheckout.CHECKOUT_REQUEST_CODE) {
if (resultCode == MercadoPagoCheckout.PAYMENT_RESULT_CODE) {
Payment payment = JsonUtil.getInstance().fromJson(data.getStringExtra("payment"), Payment.class);
((TextView) findViewById(R.id.mp_results)).setText("Resultado del pago: " + payment.getStatus());
//Done!
} else if (resultCode == RESULT_CANCELED) {
if (data != null && data.getStringExtra("mercadoPagoError") != null) {
MercadoPagoError mercadoPagoError = JsonUtil.getInstance().fromJson(data.getStringExtra("mercadoPagoError"), MercadoPagoError.class);
((TextView) findViewById(R.id.mp_results)).setText("Error: " + mercadoPagoError.getMessage());
//Resolve error in checkout
} else {
//Resolve canceled checkout
}
}
}
}
MercadoPagoCheckout.setPaymentCallback { (payment) in
self.payment = payment
}
checkout.setCallbackCancel {
// Resolved cancel checkout
self.navigationController?.popToRootViewController(animated: true)
}
Configuração de cor
É possível alterar as cores da interface gráfica do fluxo de pagamento, bem como escurecer a fonte utilizando a classe DecorationPreference. Você pode fazer isso utilizando o seguinte código:
private void startMercadoPagoCheckout(CheckoutPreference checkoutPreference) {
DecorationPreference decorationPreference = new DecorationPreference.Builder()
.setBaseColor(ContextCompat.getColor(context, R.color.your_color))
.enableDarkFont() //Optional
.build();
new MercadoPagoCheckout.Builder()
.setActivity(activity)
.setDecorationPreference(decorationPreference)
.setPublicKey("ENV_PUBLIC_KEY")
.setCheckoutPreference(checkoutPreference)
.startForPayment();
}
public func startMercadoPagoCheckout(_ checkoutPreference CheckoutPreference) {
let decorationPreference: DecorationPreference = DecorationPreference()
decorationPreference.setBaseColor(color: UIColor.purple)
decorationPreference.enableDarkFont()
MercadoPagoCheckout.setDecorationPreference(decorationPreference)
let checkout = MercadoPagoCheckout(publicKey: "ENV_PUBLIC_KEY", accessToken: nil, checkoutPreference: checkoutPreference,
navigationController: self.navigationController!)
checkout.start()
}
O SDK permite configurar a cor no formato hexadecimal, ou seja, por exemplo: setBaseColor("#060d72").
Ative as notificações de pagamento
As notificações informam automaticamente sobre seus novos pagamentos e atualizações de status.
Isto permitirá que você gerencie seu estoque e mantenha seu sistema sincronizado.
Para mais informações, consulte a seção de Notificações.
Teste a integração
Você pode testar sua integração antes de partir para a produção, a fim de verificar o funcionamento e fazer os ajustes necessários.
Para isso, deve-se utilizar usuários e cartões de teste.
Para mais informações, consulte a seção de Testes.
Próximos passos
- Visite a seção Personalização para adequar o fluxo de pagamento às suas necessidades.
- Para informações sobre como testar, vá para a seção testando a integração.