# MD for: https://www.mercadopago.com.co/developers/es/docs/subscriptions/additional-content/cardtoken.md \# Card token generation The integration of card payments is done via CardForm. In this integration mode, \*\*MercadoPago.js\*\* is responsible for the necessary flow to obtain the required information to create a payment. When initialized, a search is performed to collect the types of documents available for the country in question. As the card data is entered, an automatic search takes place for the issuer information and available installments for that payment method. As a result, the implementation of the flow is transparent for those who perform the integration. > NOTE > > Note > > In addition to the options available in this documentation, it is also possible to integrate \*\*card payments\*\* using the \*\*CardPayment Brick\*\*. Check \[Default rendering\](https://www.mercadopago.com.co/developers/en/docs/checkout-bricks/card-payment-brick/default-rendering#editor\_2) documentation of CardPayment for more details. Check below the diagram that illustrates the card payment process using the CardForm. !\[API-integration-flowchart\](https://www.mercadopago.com.co/images/api/api-integration-flowchart-cardform-2-en-v1.png) To integrate card payments into Checkout API , follow the steps below. ## Import MercadoPago.js The first step in the card payment integration process is capturing card data. This capture is made by including the MercadoPago.js library in your project, followed by the payment form. Use the code below to import the library before adding the payment form. * [bash ](#editor%5F2) * [html ](#editor%5F1) html bash ``` ``` Copiar ``` npm install @mercadopago/sdk-js ``` Copiar \## Configure credentials Credentials are unique keys with which we identify an integration in your account. They are made to capture payments in virtual stores and other applications securely. This is the first step of a complete code structure that must be followed for the correct integration of payment via card. * [html ](#editor%5F3) * [javascript ](#editor%5F4) html javascript ``` ``` Copiar ``` import { loadMercadoPago } from "@mercadopago/sdk-js"; await loadMercadoPago(); const mp = new window.MercadoPago("YOUR_PUBLIC_KEY"); ``` Copiar \## Add payment form The capture of card data is done through the CardForm of the MercadoPago.js library. Our CardForm will connect to your HTML payment form, making it easy to obtain and validate all the data needed to process the payment. To add the payment form, insert the HTML below directly into the project. * [html ](#editor%5F5) html ```
Loading...
``` Copiar \## Initialize payment form After adding the payment form, you will need to initialize it. This step consists of relating the ID of each form field with the corresponding attributes. The library will be responsible for filling out, obtaining and validating all necessary data at the time of payment confirmation. > NOTE > > Important > > When submitting the form, a token, also known as\`CardToken\`, is generated, securely representing the card data. You can access it via the \`cardForm.getCardFormData()\` function, as shown abive in the \`onSubmit\` callback. Furthermore, this token is also stored in a hidden input within the form where it can be found with the name \`MPHiddenInputToken\`. Keep in mind that the \`CardToken\` can \*\*only be used once\*\* and expires within \*\*7 days\*\*. * [javascript ](#editor%5F6) javascript ``` const cardForm = mp.cardForm({ amount: "100.5", iframe: true, form: { id: "form-checkout", cardNumber: { id: "form-checkout__cardNumber", placeholder: "Card Number", }, expirationDate: { id: "form-checkout__expirationDate", placeholder: "MM/YY", }, securityCode: { id: "form-checkout__securityCode", placeholder: "Security Code", }, cardholderName: { id: "form-checkout__cardholderName", placeholder: "Cardholder", }, issuer: { id: "form-checkout__issuer", placeholder: "Issuing bank", }, installments: { id: "form-checkout__installments", placeholder: "Installments", }, identificationType: { id: "form-checkout__identificationType", placeholder: "Document type", }, identificationNumber: { id: "form-checkout__identificationNumber", placeholder: "Document number", }, cardholderEmail: { id: "form-checkout__cardholderEmail", placeholder: "Email", }, }, callbacks: { onFormMounted: error => { if (error) return console.warn("Form Mounted handling error: ", error); console.log("Form mounted"); }, onSubmit: event => { event.preventDefault(); const { paymentMethodId: payment_method_id, issuerId: issuer_id, cardholderEmail: email, amount, token, installments, identificationNumber, identificationType, } = cardForm.getCardFormData(); fetch("/process_payment", { method: "POST", headers: { "Content-Type": "application/json", }, body: JSON.stringify({ token, issuer_id, payment_method_id, transaction_amount: Number(amount), installments: Number(installments), description: "Product Description", payer: { email, identification: { type: identificationType, number: identificationNumber, }, }, }), }); }, onFetching: (resource) => { console.log("Fetching resource: ", resource); // Animate progress bar const progressBar = document.querySelector(".progress-bar"); progressBar.removeAttribute("value"); return() => { progressBar.setAttribute("value", "0"); }; } }, }); ``` Copiar \## Send payment To continue the card payment integration process, it is necessary for the backend to receive the form information with the generated token and the complete data as indicated in the previous steps. In the example from the previous section, we sent all the necessary data to create the payment to the \`process\_payment\` endpoint of the backend. With all the information collected in the backend, send a POST with the necessary attributes, paying attention to the parameters \`token\`, \`transaction\_amount\`, \`installments\`, \`payment\_method\_id\` and the \`payer.email\` to the endpoint \[/v1/payments \](https://www.mercadopago.com.co/developers/en/reference/online-payments/subscriptions/create-payment/post) and execute the request or, if you prefer, send the information using our SDKs. > NOTE > > Important > > To increase the chances of payment approval and prevent the anti-fraud analysis from authorizing the transaction, we recommend entering as much information about the buyer when making the request. For more details on how to increase approval chances, see \[How to improve payment approval.\](https://www.mercadopago.com.co/developers/en/docs/subscriptions/how-tos/improve-payment-approval/reasons-for-rejection) > \> Also, it is mandatory to send the attribute \`X-Idempotency-Key\` to ensure the execution and reexecution of requests without the risk of accidentally performing the same action more than once. To do so, update our \[SDKs Library\](https://www.mercadopago.com.co/developers/en/docs/sdks-library/landing), or generate a UUID V4 and send it in the \_header\_ of your requests. * [csharp ](#editor%5F11) * [curl ](#editor%5F14) * [go ](#editor%5F13) * [java ](#editor%5F9) * [node ](#editor%5F8) * [php ](#editor%5F7) * [python ](#editor%5F12) * [ruby ](#editor%5F10) php node java ruby csharp python go curl ``` setCustomHeaders(["X-Idempotency-Key: "]); $payment = $client->create([ "transaction_amount" => (float) $_POST[''], "token" => $_POST[''], "description" => $_POST[''], "installments" => $_POST[''], "payment_method_id" => $_POST[' $_POST[''], "payer" => [ "email" => $_POST[''], "identification" => [ "type" => $_POST[' $_POST[''] ] ] ], $request_options); echo implode($payment); ?> ``` Copiar ``` import { Payment, MercadoPagoConfig } from 'mercadopago'; const client = new MercadoPagoConfig({ accessToken: '' }); payment.create({ body: { transaction_amount: req.transaction_amount, token: req.token, description: req.description, installments: req.installments, payment_method_id: req.paymentMethodId, issuer_id: req.issuer, payer: { email: req.email, identification: { type: req.identificationType, number: req.number }}}, requestOptions: { idempotencyKey: '' } }) .then((result) => console.log(result)) .catch((error) => console.log(error)); ``` Copiar Find the payment status in the _status_ field. ``` Map customHeaders = new HashMap<>(); customHeaders.put("x-idempotency-key", ); MPRequestOptions requestOptions = MPRequestOptions.builder() .customHeaders(customHeaders) .build(); MercadoPagoConfig.setAccessToken("YOUR_ACCESS_TOKEN"); 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, requestOptions); ``` Copiar Find the payment status in the _status_ field. ``` require 'mercadopago' sdk = Mercadopago::SDK.new('YOUR_ACCESS_TOKEN') custom_headers = { 'x-idempotency-key': '' } custom_request_options = Mercadopago::RequestOptions.new(custom_headers: custom_headers) 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[:email], identification: { type: params[:identificationType], number: params[:identificationNumber] } } } payment_response = sdk.payment.create(payment_data, custom_request_options) payment = payment_response[:response] puts payment ``` Copiar Find the payment status in the _status_ field. ``` using System; using MercadoPago.Client.Common; using MercadoPago.Client.Payment; using MercadoPago.Config; using MercadoPago.Resource.Payment; MercadoPagoConfig.AccessToken = "YOUR_ACCESS_TOKEN"; var requestOptions = new RequestOptions(); requestOptions.CustomHeaders.Add("x-idempotency-key", ""); 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["email"], Identification = new IdentificationRequest { Type = Request["identificationType"], Number = Request["identificationNumber"], }, }, }; var client = new PaymentClient(); Payment payment = await client.CreateAsync(paymentReques, requestOptions); Console.WriteLine(payment.Status); ``` Copiar Find the payment status in the _status_ field. ``` import market sdk = Mercadopago.SDK("ACCESS_TOKEN") request_options = mercadopago.config.RequestOptions() request_options.custom_headers = { 'x-idempotency-key': '' } 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("email"), "identification": { "type": request.POST.get("type"), "number": request.POST.get("number") } } } payment_response = sdk.payment().create(payment_data, request_options) payment = payment_response["response"] print(payment) ``` Copiar ``` accessToken := "{{ACCESS_TOKEN}}" cfg, err := config.New(accessToken) if err != nil { fmt.Println(err) return } client := payment.NewClient(cfg) request := payment.Request{ TransactionAmount: , Token: , Description: , PaymentMethodID: , Payer: &payment.PayerRequest{ Email: , Identification: &payment.IdentificationRequest{ Type: , Number: , }, }, } resource, err := client.Create(context.Background(), request) if err != nil { fmt.Println(err) } fmt.Println(resource) ``` Copiar Find the payment status in the _status_ field. ``` curl -X POST \ -H 'accept: application/json' \ -H 'content-type: application/json' \ -H 'Authorization: Bearer YOUR_ACCESS_TOKEN' \ -H 'X-Idempotency-Key: SOME_UNIQUE_VALUE' \ 'https://api.mercadopago.com/v1/payments' \ -d '{ "transaction_amount": 100, "token": "ff8080814c11e237014c1ff593b57b4d", "description": "Blue shirt", "installations": 1, "payment_method_id": "visa", "issuer_id": 310, "payer": { "email": "PAYER_EMAIL" } }' ``` Copiar The response will show the following result \`\`\`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": \[\], ... } \`\`\` > WARNING > > Attention > > When creating a payment it is possible to receive 3 different statuses: "Pending", "Rejected" and "Approved". To keep up with updates, you need to configure your system to receive payment notifications and other status updates. See \[Notifications\](https://www.mercadopago.com.co/developers/en/docs/checkout-api-payments/additional-content/your-integrations/notifications) for more details. ## Code example > GIT > > Checkout API > > For complete code samples, check out the \[Full Integration Examples\](https://github.com/mercadopago/card-payment-sample) available on GitHub.