Aller au contenu principal
Tous les systèmes sont opérationnelsNouveautésv1
Se connecter

Cliquez pour payer

Sur cette page

Commencez par Click to Pay#

Cette page fournit un guide complet pour intégrer avec succès le Click to Pay Widget avec DEUNA.

Cliquez sur Payer se concentre sur le traitement efficace des paiements et la gestion des cartes.

Comment ça marche#

Ce widget utilise une technologie de paiement avancée et une sécurité intelligente, basée sur Cadre de commerce à distance sécurisé d'EMVCo.

Exigences#

Le contenu suivant énumère toutes les exigences pour une intégration réussie avec le Click to Pay de Master Card :

Étapes d'intégration#

Maintenant que les exigences techniques sont définies, vous pouvez démarrer l'intégration.

1. Choisissez votre intégration

Vous avez deux choix pour Click to Pay in DEUNA.

Widget de faille

Le widget voûte vous permet d'ajouter ou de sélectionner une carte existante dans Click to Pay.

Cette option permet d'obtenir la carte sélectionnée et de la renvoyer pour générer un paiement via l'API DEUNA, mais le traitement du paiement n'est pas de sa responsabilité.

  • Méthodes d'intégration:
  1. SDK iOS
  2. SDK Android
  3. Intégration via URL

Widget de paiement

Le widget de paiement permet à un utilisateur d'ajouter ou de sélectionner une carte existante dans Click to Pay.

Cette option permet d'obtenir la carte sélectionnée et de la retourner pour générer un paiement, et elle traite également le paiement.

  • Méthodes d'intégration
  1. SDK Web
  2. SDK iOS
  3. SDK Android

2. Configurer le composant Click to Pay

Activer le composant Cliquez pour payer à partir du Administrateur DEUNA.

  1. Ajouter le Click to Pay à votre DEUNA Connexions administratives.
  2. Recherchez « Cliquez pour payer » et entrez vos identifiants de compte d'affaires Master Card.
  3. Si vous avez choisi l'intégration d'URL : Dans votre application, démarrez un iFrame avec l'URL DEUNA (fournie par DEUNA).

URL para integración

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)}

attribut de requête params

AttributDescriptif
publicApiKey (obligatoire)Votre clé d'API publique DEUNA.
firstName (obligatoire)Prénom de l'utilisateur.
lastName (obligatoire)Nom de famille de l'utilisateur.
email (facultatif)Courriel de l'utilisateur. En caso no sea enviada a la integración,se mostrará una pantalla para recopilar el correo électrónico, ya que es un requisito de Click to Pay para iniciar su flujo."
cssFile (facultatif)DEUNA a fourni UUID. Ceci s'applique uniquement aux fichiers css personnalisés.
userToken(facultatif)Le bearer token de l’utilisateur DEUNA. Lorsqu’il est envoyé, toutes les actions du widget sont effectuées au nom de cet utilisateur. De plus, avec ce userToken, il n’est pas nécessaire d’envoyer le email, firstName, lastName. Seul le champ suivant sera requis : userTokenet de publicApiKey
int (facultatif)Permet d'envoyer embedded ou modal comme valeur pour spécifier le type d'intégration à effectuer et ainsi permettre à certaines fonctionnalités en fonction de l'intégration, comme la flèche indicateur de revenir en arrière ou fermer le modal.

3. Obtenez une card_id

Après avoir intégré le composant dans votre application, vous devez obtenir un card_id pour traiter le paiement.

Voici un exemple de la façon d'intégrer l'URL en utilisant HTML, CSS et JavaScript:

  1. Le composant DEUNA gère la communication avec Click to Pay, y compris l'enregistrement de la carte.
  2. Après le succès, DEUNA envoie le postMessage avec une valeur card_id.
  3. Le card_id est envoyé dans la demande d'achat de votre backend pour traiter le paiement.
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. Traiter une carte

Après un traitement réussi d'une carte dans DEUNA, vous obtenez postMessage événement avec un card_id dans la réponse.

Utilisez la card_id pour traiter le paiement dans votre moteur de paiement.

Exemple d'événements

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. Traitement d'un paiement

Après que le paiement est initié par votre moteur de paiement, vous devez traiter le paiement par un achat V2.

Ce paramètre est chargé de créer un ordre et de traiter le paiement dans DEUNA si order token n'est pas passé à elle et unorder objet lui est envoyé avec toutes les informations requises.

Voici une liste des champs obligatoires pour Click to Pay:

ChampDescriptifValeur
order.callback_urls.on_successRediriger l'URL après avoir autorisé l'achat avec votre compte PayPal Wallet.https://example.com/
payment_source.method_typeType de méthode de paiement DEUNA.wallet
payment_source.processorIdentifiant de méthode de paiement PayPal Wallet.paypal_wallet

Exemple de demande

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();
    }
}

Exemple d'achat

Voici un exemple d'achat Click to Pay dans DEUNA :

Personnalisation des composants CSS

Vous pouvez modifier l'apparence du widget via CSS.

6. Essayez l'intégration

Utilisez la Cliquez pour payer les cartes d'essai pour tester votre intégration avec DEUNA.

Dans cette section

Gestion du paiement Click to Pay