Click to Pay

Actualizado en 14 Nov 2024
4 Minutos para leer

Resumen del artículo

¿Te ha resultado útil este resumen?

Gracias por sus comentarios

Click to Pay

Click to Pay es un método de pago digital que permite a los usuarios realizar compras en línea de forma rápida y segura sin necesidad de ingresar manualmente los datos de la tarjeta. Utiliza una experiencia de pago simplificada y está respaldado por las principales redes de tarjetas, como Visa, Mastercard, American Express y Discover, facilitando transacciones con un solo clic en sitios web y aplicaciones compatibles.

Operaciones soportadas

Operación	Descripción
✅ Autorización de pago	Bloquea fondos en la tarjeta del cliente.
✅ Captura de pago	Completa la transacción y transfiere los fondos.
✅ Pago directo	Combina autorización y captura en un solo paso.
✅ Reembolso	Devuelve el monto completo de una transacción.
✅ Reembolso parcial	Devuelve parte del monto capturado.
✅ Cancelación de autorización	Revierte una autorización que no fue capturada.

Integración

1. Configurar Click to Pay como método de pago

Para realizar la integración de Click to Pay, primero deberás de realizar una serie de configuraciones desde el portal de OrkestaPay. Visita nuestra guía de configuración de Proveedores y busca el método de pago Click to Pay.

2. Tokenizar los datos de pago de Click to Pay

Para realizar la tokenización de los datos de pago hay que seguir los siguientes pasos:

Incluir scripts de OrkestaPay: Utilizar los scripts de OrkestaPay en tu aplicación web.
Inicializar parámetros: Aquí se definen las credenciales de OrkestaPay, así como datos referentes al pago a procesar.
Renderizar el botón de pago: Colocar el botón de Click to Pay en tu frontend.

Recursos necesarios:

CSS

https://checkout.orkestapay.com/web/components/payment-methods/styles.css

https://checkout.orkestapay.com/script/orkestapay.js
https://checkout.orkestapay.com/web/components/payment-methods/main.js

Ejemplo de código

En el siguiente snippet de código hay ciertos parámetros que son necesarios de reemplazar:

public_key : Llave pública, estas credenciales las puedes obtener en el portal de OrkestaPay.
merchant_id: ID del comercio, estas credenciales las puedes obtener en el portal de OrkestaPay.
is_sandbox: Define si las credenciales que estás por operar son de pruebas o productivas.
email: Correo electrónico del cliente.

INFORMACIÓN
Para consultar las credenciales de OrkestaPay, puedes visitar nuestra guía Obtener llaves de API.

<!DOCTYPE html>
<html lang="en">
  <head>
    <base href="/" />
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="apple-touch-icon" type="image/x-icon" href="favicon.ico" />
    <link rel="icon" type="image/x-icon" href="favicon.ico" />
    <title>Click2Pay web component</title>
    <link
      rel="stylesheet"
      href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css"
      integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH"
      crossorigin="anonymous"
    />
    <link rel="stylesheet" href="https://checkout.orkestapay.com/web/components/payment-methods/styles.css" />
    <style>
      .code {
        color: inherit;
        overflow-wrap: break-word;
        white-space: pre-wrap;
      }
    </style>
  </head>
  <body>
    <main class="container">
      <section class="row mt-5">
        <h1 id="card-title" class="col-12 text-center">OrkestaPay - Click2Pay Web Component</h1>
      </section>

      <section class="row">
        <article id="button-container" class="col-12 col-md-6 offset-md-3"></article>
        <article class="pt-3 col-12">
          <div id="payment-method-details" class="w-100 alert" role="alert"></div>
        </article>
      </section>
    </main>

    <noscript> Please enable JavaScript to continue using this application. </noscript>

    <script type="text/javascript" src="https://checkout.orkestapay.com/script/orkestapay.js"></script>
    <script type="text/javascript" src="https://checkout.orkestapay.com/web/components/payment-methods/main.js"></script>
    <script type="text/javascript">
      const { public_key, merchant_id, is_sandbox, email } = initValues();

      (async function main() {
        initOrkestaPay({ is_sandbox, merchant_id, public_key });

        const click2PayButton = document.createElement("orkestapay-click2pay-button");
        await customElements.whenDefined("orkestapay-click2pay-button");

        click2PayButton.params = {
          consumer: { email },
          theme: { button_color: "dark" },
        };
        click2PayButton.addEventListener("paymentMethodCreated", handlePaymentMethodCreated);

        const container = document.getElementById("button-container");
        container.appendChild(click2PayButton);
      })();

      function handlePaymentMethodCreated({ detail }) {
        const code = document.createElement("code");
        code.innerHTML = JSON.stringify(detail, null, 2);
        code.classList.add("code");

        const paymentMethodDetails = document.getElementById("payment-method-details");
        paymentMethodDetails.classList.remove("alert-danger");
        paymentMethodDetails.classList.add("alert-success");
        paymentMethodDetails.replaceChildren(code);
      }

      function initValues() {
        return {
          public_key: "<REPLACE_WITH_YOUR_PUBLIC_KEY>",
          merchant_id: "<REPLACE_WITH_YOUR_MERCHANT_ID>",
          is_sandbox: true,
          email: "<REPLACE_WITH_CUSTOMER_EMAIL>",
        };
      }
    </script>
  </body>
</html>

Nota
Este código es un ejemplo básico que debes adaptar a tu entorno real.

Ejemplo de respuesta (handlePaymentMethodCreated)

{
  "payment_method_id": "pym_d1c61b939db04b1d9aee207aae5d97da",
  "type": "CLICK_TO_PAY",
  "card": {
    "bin": "518600",
    "last_four": "8785",
    "brand": "MASTERCARD",
    "card_type": "CREDIT",
    "holder_name": "Federico Balderas",
    "holder_last_name": "",
    "expiration_month": "12",
    "expiration_year": "2028",
    "one_time_use": true
  },
  "status": "ACTIVE",
  "created_at": "1731621376182",
  "updated_at": "1731621376182"
}

3. Solicitar el pago

Con el payment_method_id de la respuesta, puedes continuar con el proceso regular de pago con OrkestaPay desde el backend.

Información
Para conocer más sobre la integración de pago directo, visita nuestra guía Integración de pago.

Tarjetas de prueba

Puedes probar tu integración en Sandbox utilizando las tarjetas de prueba que se enumeran a continuación.

Mastercard

Número de tarjeta	Fecha de expiración	CVV
5186001700008785	Cualquier fecha futura	Cualquier número de 3 dígitos
5186001700009908	Cualquier fecha futura	Cualquier número de 3 dígitos
5186001700009726	Cualquier fecha futura	Cualquier número de 3 dígitos
5186001700008876	Cualquier fecha futura	Cualquier número de 3 dígitos
5186001700001434	Cualquier fecha futura	Cualquier número de 3 dígitos

Documentación oficial
Para más información sobre pruebas con Click to Pay, dirígete a su documentación oficial: https://developer.mastercard.com/unified-checkout-solutions/documentation/testing/test_cases/click_to_pay_case/

¿Te ha sido útil este artículo?

What's Next

Google Pay™

Tabla de contenido

Click to Pay
Operaciones soportadas
Integración
Mastercard