Receive card payments
With Mercado Pago you can collect card information in a secure way through our Tokenizer.
Step 1: Add viewport data
Set the viewport by adding the following code inside the <head> tag of your website:
Html
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"/>
Step 2: Add HTML code
This fragment of HTML code will insert a payment button. When the buyer presses the button, the checkout will be displayed. Include the following code in the place where the button will be located within your website:
Html
<form action="https://www.my-site.com/process-payment" method="POST">
<script
src="https://www.mercadopago.com.ar/integrations/v1/web-tokenize-checkout.js"
data-public-key="ENV_PUBLIC_KEY"
data-transaction-amount="100.00">
</script>
</form>
You can find the public key in the credentials page.
Step 3: Get the data
Web Tokenize Checkout will do a POST to the URL that you have defined in the action attribute of the HTML code snippet (In the example: /process-payment) with certain data. You must use this information to make the payment.
Data:
| Data | Description |
|---|---|
| token | Unique identifier of the tokenized card |
| payment_method_id | Payment method chosen by the buyer |
| installments | Amount of installments chosen by the buyer |
| issuer_id | ID of the issuer of the buyer's card |
You will not receive the transaction_amount neither the payer.email for security reasons.
<?php
$token = $_REQUEST["token"];
$payment_method_id = $_REQUEST["payment_method_id"];
$installments = $_REQUEST["installments"];
$issuer_id = $_REQUEST["issuer_id"];
?>
String token = request.getParameter("token");
String payment_method_id = request.getParameter("payment_method_id");
Int installments = request.getParameter("installments");
Int issuer_id = request.getParameter("issuer_id");
const token = req.body.token;
const payment_method_id = req.body.payment_method_id;
const installments = req.body.installments;
const issuer_id = req.body.issuer_id;
token = request.body.token
payment_method_id = request.body.payment_method_id
installments = request.body.installments
issuer_id = request.body.issuer_id
token = Request["token"]
payment_method_id = Request["payment_method_id"]
installments = Request["installments"]
issuer_id = Request["issuer_id"]
Step 4: Creating the payment
To make the payment, you must perform an API call using the SDK de Mercado Pago that corresponds with the programming language that you are using on your site.
You should only make an API call including the data you received from the checkout:
<?php
require_once 'vendor/autoload.php';
MercadoPago\SDK::setAccessToken("ENV_ACCESS_TOKEN");
//...
$payment = new MercadoPago\Payment();
$payment->transaction_amount = 187;
$payment->token = $token;
$payment->description = "Fantastic Granite Clock";
$payment->installments = $installments;
$payment->payment_method_id = $payment_method_id;
$payment->issuer_id = $issuer_id;
$payment->payer = array(
"email" => "nova@gmail.com"
);
// Guarda y postea el pago
$payment->save();
//...
// Imprime el estado del pago
echo $payment->status;
//...
?>
MercadoPago.SDK.setAccessToken("ENV_ACCESS_TOKEN");
//...
Payment payment = new Payment();
payment.setTransactionAmount(187)
.setToken(token)
.setDescription("Fantastic Granite Clock")
.setInstallments(installments)
.setPaymentMethodId(payment_method_id)
.setIssuerId(issuer_id)
.setPayer(new Payer()
.setEmail("nova@gmail.com"));
// Save and create the payment
payment.save();
//...
// Shows payment stauts
System.out.println(payment.getStatus());
//...
var mercadopago = require('mercadopago');
mercadopago.configurations.setAccessToken(config.access_token);
var payment_data = {
transaction_amount: 187,
token: token,
description: 'Fantastic Granite Clock',
installments: installments,
payment_method_id: payment_method_id,
issuer_id: issuer_id,
payer: {
email: 'nova@gmail.com'
}
};
// Save and do the payment POST
mercadopago.payment.save(payment).then(function (data) {
// ...
// Shows payment stauts
Console.log(payment.status);
}).catch(function (error) {
// ...
});
require 'mercadopago'
MercadoPago::SDK.access_token = "ENV_ACCESS_TOKEN";
payment = MercadoPago::Payment.new()
payment.transaction_amount = 187
payment.token = token
payment.description = 'Fantastic Granite Clock'
payment.installments = installments
payment.payment_method_id = payment_method_id
payment.issuer_id = issuer_id
payment.payer = {
email: "nova@gmail.com"
}
# Save and create the payment
payment.save()
using MercadoPago;
using MercadoPago.DataStructures.Payment;
using MercadoPago.Resources;
// ...
MercadoPago.SDK.SetAccessToken(ENV_ACCESS_TOKEN);
//...
Payment payment = new Payment()
{
TransactionAmount = float.Parse("187"),
Token = token,
Description = "Fantastic Granite Clock",
Installments = installments,
PaymentMethodId = payment_method_id,
IssuerId = issuer_id,
Payer = new Payer(){
Email = "nova@gmail.com"
}
};
// Save and create the payment
payment.Save();
//...
// Shows payment stauts
Console.log(payment.Status);
//...
The fields required to send are
token,transaction_amount,payment_method_idand thepayer.email.
Response:
Json
{
"status": "approved",
"status_detail": "accredited",
"id": 3055677,
"date_approved": "2017-02-23T00:01:10.000-04:00",
"payer": {
...
},
"payment_method_id": "master",
"payment_type_id": "credit_card",
"refunds": [],
...
}
Additional recommendations
Test cards
To make testing payments (with your TEST credentials), you need to use test cards.
Installments offer
We recommend you include the installments offer link of Mercado Pago, or implement one of our payment methods banner.