Passa al contenuto principale
Tutti i sistemi operativiNovitàv1
Accedi

Clicca per pagare

In questa pagina

Iniziare con Click to Pay#

Questa pagina fornisce una guida completa per integrare con successo il Widget Click to Pay con DEUNA.

Fare clic su Pay si concentra sull'elaborazione di pagamento efficiente e sulla gestione delle carte.

Come funziona#

Questo widget utilizza la tecnologia di pagamento avanzata e la sicurezza intelligente, basata su Quadro di commercio remoto sicuro di EMVCo.

Requisiti#

I seguenti contenuti elencano tutti i requisiti per una corretta integrazione con Master Card Click to Pay:

Procedura di integrazione#

Ora che i requisiti tecnici sono impostati, è possibile avviare l'integrazione.

1. Scegli la tua integrazione

Hai due scelte per Click to Pay in DEUNA.

widget di Vault

Il widget del vault consente di aggiungere o selezionare una scheda esistente in Click to Pay.

Questa opzione ottiene la carta selezionata e la restituisce per generare un pagamento tramite l'API DEUNA, ma l'elaborazione del pagamento non è sua responsabilità.

  • Metodi di integrazione:
  1. SDK iOS
  2. SDK Android
  3. Integrazione tramite URL

widget di pagamento

Il widget di pagamento consente all'utente di aggiungere o selezionare una carta esistente in Click to Pay.

Questa opzione ottiene la carta selezionata e lo restituisce per generare un pagamento, e anche elabora il pagamento.

  • Metodi di integrazione
  1. SDK Web
  2. SDK iOS
  3. SDK Android

2. Configurare il componente Click to Pay

Attivare il componente Click to Pay dal DEUNA Admin.

  1. Aggiungi il Click to Pay al tuo Connessione all'amministratore DEUNA.
  2. Cerca "Clicca a pagare" e inserisci le credenziali del tuo account Master Card.
  3. Se hai scelto l'integrazione URL: Nella tua app, avvia un iFrame con l'URL DEUNA (fornito da 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)}

attributi dei params di query

AttribuzioneDescrizione
publicApiKey (richiesto)La chiave delle API pubbliche DEUNA.
firstName (richiesto)Nome utente.
lastName (richiesto)Nome utente.
email (opzionale)E-mail dell'utente. En caso no sea enviada a la integración,se mostrará una pantalla para recopilar el correo electrónico, ya que es un requisito de Click to Pay para iniciar su flujo."
cssFile (opzionale)Il Dipartimento ha fornito UUID. Questo vale solo per i file css personalizzati.
userToken(opzionale)Il bearer token dell’utente DEUNA. Quando viene inviato, tutte le azioni nel widget vengono eseguite per questo utente. Inoltre, con questo userToken non è necessario inviare né il email, firstName, lastName. Sarà richiesto solo il userToken# publicApiKey
int (opzionale)Ti permette di inviare embedded o modal come valore per specificare il tipo di integrazione da eseguire e quindi abilitare determinate funzionalità a seconda dell'integrazione, come ad esempio la freccia dell'indicatore per tornare indietro o chiudere il modale.

3. Ottenere un card_id

Dopo aver integrato il componente nella vostra applicazione, è necessario ottenere un card_id per elaborare il pagamento.

Ecco un esempio di come integrare l'URL usando HTML, CSS e JavaScript:

  1. Il componente DEUNA gestisce la comunicazione con Click to Pay, incluso il salvataggio della carta.
  2. Dopo il successo, DEUNA invia il postMessage con un valido card_id.
  3. Il card_id viene inviato nella richiesta di acquisto dal tuo backend per elaborare il 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. Elaborare una carta

Dopo che una carta viene elaborata con successo in DEUNA, si ottiene un postMessage evento con un card_id nella risposta.

Usa il card_id per elaborare il pagamento nel tuo backend.

Esempio di eventi

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. Elaborare un pagamento

Dopo che il pagamento è iniziato attraverso il vostro backend, è necessario elaborare il pagamento tramite un acquisto V2.

Questo punto di vista è responsabile della creazione di un ordine e dell'elaborazione del pagamento in DEUNA se un order token non è passato ad esso e unorder oggetto viene inviato ad esso con tutte le informazioni richieste.

Ecco un elenco dei campi richiesti per Click to Pay:

CampoDescrizioneValore
order.callback_urls.on_successReindirizza URL dopo aver autorizzato l'acquisto con il tuo account PayPal Wallet.https://example.com/
payment_source.method_typeTipo di metodo di pagamento DEUNA.wallet
payment_source.processorPayPal Portafoglio metodo di pagamento identificatore.paypal_wallet

Esempio di richiesta

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

Esempio di acquisto

Questo è un esempio di acquisto Click to Pay in DEUNA::

Personalizzazione dei componenti CSS

È possibile modificare l'aspetto del widget attraverso CSS.

6. Prova l'integrazione

Usa il Clicca per pagare le carte di prova per testare la tua integrazione con DEUNA.

In questa sezione

Clicca per la gestione dei casi Pay