Pular para o conteúdo principal
Todos os sistemas operacionaisNovidadesv1
Entrar

Clique para pagar

Nesta página

Comece com Clique para Pagar#

Esta página fornece um guia completo para integrar com sucesso o widget Click to Pay com DEUNA.

Click to Pay se concentra no processamento eficiente de pagamentos e gerenciamento de cartões.

Como funciona#

Este widget utiliza tecnologia de pagamento avançada e segurança inteligente, baseada em Estrutura de comércio remoto seguro da EMVCo.

Requisitos#

O conteúdo a seguir lista todos os requisitos para uma integração bem-sucedida com o Click to Pay da Master Card:

Etapas de integração#

Agora que os requisitos técnicos estão definidos, você pode iniciar a integração.

1. Escolha sua integração

Você tem duas opções para Click to Pay na DEUNA.

Widget do cofre

O widget do cofre permite adicionar ou selecionar um cartão existente no Click to Pay.

Esta opção obtém o cartão selecionado e o devolve para gerar o pagamento através da API DEUNA, mas o processamento do pagamento não é de sua responsabilidade.

  • Métodos de integração:
  1. SDK iOS
  2. SDK Android
  3. Integração via URL

Widget de pagamento

O widget de pagamento permite que um usuário adicione ou selecione um cartão existente no Click to Pay.

Esta opção obtém o cartão selecionado e o devolve para gerar o pagamento, além de processar o pagamento.

  • Métodos de integração
  1. SDK Web
  2. SDK iOS
  3. SDK Android

2. Configure o componente Click to Pay

Ative o componente Click to Pay no Administrador DEUNA.

  1. Adicione o Click to Pay ao seu Conexões de administrador DEUNA.
  2. Pesquise “Click to Pay” e insira as credenciais da sua conta comercial Master Card.
  3. Se você escolheu a integração de URL: Em seu aplicativo, inicie um iFrame com a URL DEUNA (fornecida pela DEUNA).

URL para integração

sandboxPlain text
https://elements.sandbox.deuna.io/click_to_pay?publicApiKey=${apiKey}&firstName=${encodeURIComponent(firstname)}&lastName=${encodeURIComponent(lastname)}&email=${encodeURIComponent(email)}
productionPlain text
https://elements.deuna.com/click_to_pay?publicApiKey=${apiKey}&firstName=${encodeURIComponent(firstname)}&lastName=${encodeURIComponent(lastname)}&email=${encodeURIComponent(email)}

Atributos de parâmetros de consulta

AtributoDescrição
publicApiKey (obrigatório)Sua chave API pública DEUNA.
firstName (obrigatório)Nome do usuário.
lastName (obrigatório)Sobrenome do usuário.
email (opcional)E-mail do usuário. Caso não seja enviado para a integração, será exibida uma tela para recuperar o e-mail, pois isso é um requisito do Click to Pay para iniciar seu fluxo."
cssFile (opcional)DEUNA forneceu UUID. Isso se aplica apenas a arquivos CSS personalizados.
userToken(opcional)O token de portador do usuário da DEUNA. Quando isso for enviado, todas as ações dentro do widget serão feitas sobre este usuário da DEUNA. Além disso, ao enviar este userToken, não é necessário mandar para o email, firstName, lastName. Só será necessário userTokenvocê publicApiKey
int (opcional)Permite que você envie embedded ou modal como um valor para especificar o tipo de integração a ser realizada e assim habilitar determinadas funcionalidades dependendo da integração, como a seta indicadora para voltar ou fechar o modal.

3. Obtenha um card_id

Após integrar o componente em sua aplicação, você deve obter um card_id para processar o pagamento.

Aqui está um exemplo de como integrar o URL usando HTML, CSS e JavaScript:

  1. O componente DEUNA trata da comunicação com o Click to Pay, incluindo o salvamento do cartão.
  2. Após sucesso, DEUNA envia o postMessage com um válido card_id.
  3. O card_id é enviado na solicitação de compra do seu backend para processar o pagamento.
HTML
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Click to Pay Integration</title>
    <style>
      /* Estilos básicos para el iframe */
      #click-to-pay-iframe {
          width: 100%;
          height: 500px; /* Ajusta la altura según tus necesidades */
          border: none;
      }
    </style>
  </head>
  <body>
    <iframe
      id="click-to-pay-iframe"
      src="https://elements.sandbox.deuna.io/click_to_pay?publicApiKey=${apiKey}&firstName=${encodeURIComponent(firstname)}&lastName=${encodeURIComponent(lastname)}&email=${encodeURIComponent(email)}"
      allow="payment"
    >
    </iframe>

    <script>
      // Escucha los mensajes de postMessage para recibir el card_id (a.k.a card token)
      window.addEventListener('message', function(event) {
          if (event.origin !== "https://elements.sandbox.deuna.io") {
              return;
          }
          let firstParsedData;
          if (typeof event.data === 'string') {
              firstParsedData = JSON.parse(event.data);
          } else {
              firstParsedData = event.data;
          }

          const parsedData = JSON.parse(firstParsedData);
          console.log('postMessage:', parsedData);

          if (
            parsedData &&
            parsedData.type === "vaultSaveSuccess"
        ) {
          // obtener el card_id (a.k.a card token)
          const cardId = parsedData.data.metadata.createdCard.id;

          // crear pago con el card_id
        }
      });
    </script>
  </body>
</html>

4. Processe um cartão

Depois que um cartão é processado com sucesso na DEUNA, você recebe um postMessage evento com um card_id na resposta.

Use a card_id para processar o pagamento em seu back-end.

Eventos de exemplo

Javascript
window.addEventListener("message", (event) => {
  if (event.origin !== "URL_DE_CONFIANZA") { // Reemplaza con tu URL de confianza
    return;
  }

  switch (event.data.type) {
    case 'VaultStarted':
      // Click to Pay ready
      break;

    case 'VaultSaveSuccess':
      // Card saved, get the card_id
      const cardId = event.data.metadata.createdCard.id;
      // Use this card_id to process payments
      break;

    case 'VaultSaveError':
    case 'VaultFailed':
      // Error management
      const errorCode = event.data.metadata.errorCode;
      const errorMessage = event.data.metadata.errorMessage;
      break;

    case 'VaultProcessing':
      // Pago en proceso
      break;

    //Add more cases as needed
  }
});

5. Processar um pagamento

Depois que o pagamento for iniciado por meio de seu back-end, você precisará processar o pagamento por meio de uma compra V2.

Este endpoint é responsável por criar um pedido e processar o pagamento em DEUNA se um order token não é passado para ele e umorder objeto é enviado a ele com todas as informações necessárias.

Aqui está uma lista de campos obrigatórios para Click to Pay:

CampoDescriçãoValor
order.callback_urls.on_successURL de redirecionamento após autorizar a compra com sua conta PayPal Wallet.https://example.com/
payment_source.method_typeTipo de método de pagamento DEUNA.wallet
payment_source.processorIdentificador do método de pagamento da Carteira PayPal.paypal_wallet

Exemplo de solicitação

JavaScript
const requestBody = {
    payer_info: {
        email: "foo@bar.com"
    },
    payment_source: {
        method_type: "credit_card",
        card_info: {
            card_id: "8d369b6e-113a-4640-9e63-dc29957fc86aza"
        }
    },
    // ... Resto del body
};

fetch('https://api.sandbox.deuna.io/v2/merchants/orders/purchase', {
    method: 'POST',
    headers: {
        'x-api-key': 'YOUR_PRIVATE_API_KEY',
        'Content-Type': 'application/json'
    },
    body: JSON.stringify(requestBody)
})
.then(response => response.json())
.then(data => console.log(data))
.catch(error => console.error('Error:', error));
curl --location 'https://api.sandbox.deuna.io/v2/merchants/orders/purchase' \
--header 'x-api-key: YOUR_PRIVATE_API_KEY' \
--header 'Content-Type: application/json' \
--data-raw '{
    "payer_info": {
        "email": "foo@bar.com"
    },
    "payment_source": {
        "method_type": "credit_card",
        "card_info": {
            "card_id": "8d369b6e-113a-4640-9e63-dc29957fc86aza"
        }
    },
    "order": {
        "order_id": "testapi-0003",
        "currency": "MXN",
        "items": [
          {
              "id": "216",
              "name": "10 Cellphones",
              "description": "",
              "options": "string option",
              "total_amount": {
                  "original_amount": 2000,
                  "amount": 2000,
                  "currency": "MXN",
                  "currency_symbol": "$"
              },
              "unit_price": {
                  "amount": 200,
                  "currency": "MXN",
                  "currency_symbol": "$"
              },
              "tax_amount": {
                  "amount": 0,
                  "currency": "MXN",
                  "currency_symbol": "$"
              },
              "quantity": 1,
              "uom": "string",
              "upc": "string",
              "sku": "",
              "isbn": "",
              "brand": "",
              "manufacturer": "",
              "category": "",
              "color": "",
              "size": "",
              "weight": {
                  "amount": 0,
                  "unit": "kg"
              },
              "image_url": "https://images-sandbox.getduna.com/95463fb5-6279-4ec3-8ff9-fe07aacd2142/db5b698c57654116_domicilio_216_750x750_1662162887.png?d=200x200&format=webp",
              "details_url": "",
              "type": "physcal",
              "taxable": true
          }
        ],
        "sub_total": 2000,
        "total_amount": 2000,
        "store_code": "all",
        "billing_address": {
            "address1": "presa angostura 36PH",
            "address2": "",
            "address_type": "home",
            "city": "CDMX",
            "country_code": "MX",
            "email": "foo@bar.com",
            "first_name": "efren",
            "identity_document": "162915134",
            "is_default": true,
            "last_name": "garcia",
            "phone": "+525222222222",
            "state_code": "MX",
            "state_name": "miguel hidalgo",
            "zipcode": "11500"
        }
    }
}'
PHP
$curl = curl_init();

$requestBody = json_encode(array(
    "payer_info" => array(
        "email" => "foo@bar.com"
    ),
    "payment_source" => array(
        "method_type" => "credit_card",
        "card_info" => array(
            "card_id" => "8d369b6e-113a-4640-9e63-dc29957fc86aza"
        )
    ),
    // Aquí puedes continuar añadiendo el resto del cuerpo de la solicitud
    "order" => array(
        "order_id" => "testapi-0003",
        "currency" => "MXN",
        "items" => array(
            // Aquí van los detalles de los items
        ),
        // Continúa con el resto de los detalles del pedido
    )
));

curl_setopt_array($curl, array(
  CURLOPT_URL => "https://api.sandbox.deuna.io/v2/merchants/orders/purchase",
  CURLOPT_RETURNTRANSFER => true,
  CURLOPT_ENCODING => "",
  CURLOPT_MAXREDIRS => 10,
  CURLOPT_TIMEOUT => 30,
  CURLOPT_HTTP_VERSION => CURL_HTTP_VERSION_1_1,
  CURLOPT_CUSTOMREQUEST => "POST",
  CURLOPT_POSTFIELDS => $requestBody, // Aquí se utiliza la variable
  CURLOPT_HTTPHEADER => array(
    "x-api-key: YOUR_PRIVATE_API_KEY", // Asegúrate de reemplazar con tu API key real
    "Content-Type: application/json"
  ),
));


$response = curl_exec($curl);
$err = curl_error($curl);

curl_close($curl);

if ($err) {
  echo "cURL Error #:" . $err;
} else {
  echo $response;
}
Ruby
require 'uri'
require 'net/http'
require 'json'

url = URI("https://api.sandbox.deuna.io/v2/merchants/orders/purchase")

http = Net::HTTP.new(url.host, url.port)
http.use_ssl = true

request_body = {
    payer_info: {
        email: "foo@bar.com"
    },
    payment_source: {
        method_type: "credit_card",
        card_info: {
            card_id: "8d369b6e-113a-4640-9e63-dc29957fc86aza"
        }
    }
    # ... Agrega aquí el resto del cuerpo de la solicitud
}.to_json

request = Net::HTTP::Post.new(url)
request["x-api-key"] = "YOUR_PRIVATE_API_KEY" # Reemplaza con tu API key
request["Content-Type"] = "application/json"
request.body = request_body

response = http.request(request)
puts response.read_body
Java
import java.net.URI;
import java.net.http.HttpClient;
import java.net.http.HttpRequest;
import java.net.http.HttpResponse;
import org.json.JSONObject;

public class Main {
    public static void main(String[] args) {
        HttpClient client = HttpClient.newHttpClient();
        
        JSONObject requestBody = new JSONObject()
            .put("payer_info", new JSONObject().put("email", "foo@bar.com"))
            .put("payment_source", new JSONObject()
                .put("method_type", "credit_card")
                .put("card_info", new JSONObject().put("card_id", "8d369b6e-113a-4640-9e63-dc29957fc86aza")))
            // ... Agrega aquí el resto del cuerpo de la solicitud

        HttpRequest request = HttpRequest.newBuilder()
            .uri(URI.create("https://api.sandbox.deuna.io/v2/merchants/orders/purchase"))
            .header("x-api-key", "YOUR_PRIVATE_API_KEY") // Reemplaza con tu API key
            .header("Content-Type", "application/json")
            .POST(HttpRequest.BodyPublishers.ofString(requestBody.toString()))
            .build();

        client.sendAsync(request, HttpResponse.BodyHandlers.ofString())
            .thenApply(HttpResponse::body)
            .thenAccept(System.out::println)
            .join();
    }
}

Exemplo de compra

Este é um exemplo de compra Click to Pay na DEUNA::

Personalização de componentes CSS

Você pode editar a aparência do widget por meio de CSS.

6. Experimente a integração

Use a Cartões de teste Click to Pay para testar sua integração com DEUNA.

Nesta seção

Click to Pay case management