Documentación
Start typing to search…

Apple Pay

Apple Pay

Apple Pay es un sistema de pagos móviles y billetera digital de Apple que permite a los usuarios realizar compras seguras en tiendas físicas, aplicaciones y sitios web usando dispositivos Apple (iPhone, iPad, Mac y Apple Watch).


Operaciones soportadas

OperaciónDescripción
✅ Autorización de pagoBloquea fondos en la tarjeta del cliente.
✅ Captura de pagoCompleta la transacción y transfiere los fondos.
✅ Pago directoCombina autorización y captura en un solo paso.
✅ ReembolsoDevuelve el monto completo de una transacción.
✅ Reembolso parcialDevuelve parte del monto capturado.
✅ Cancelación de autorizaciónRevierte una autorización que no fue capturada.

1. Configurar Apple Pay como método de pago

Para realizar la integración de Apple 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 apartado de Apple Pay.

Adicional deberás de configurar un procesador de pago de soporte que sea compatible con Apple Pay, ej. Stripe.


2. Implementar botón de pago

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

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

Recursos necesarios:

CSS

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

JS

  • 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.
  • country_code: Código del país con el que vas a generar tu transacción.
  • currency: Código de la moneda con la que vas a realizar el pago.
  • total_amount: Monto total de la transacción.

📘

Documentació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>ApplePay web component</title>
    <link
      rel="stylesheet"
      href="https://cdn.jsdelivr.net/npm/[email protected]/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 - ApplePay Web Component</h1>
      </section>

      <section class="row">
        <article class="col-12 col-md-6 offset-md-3">
          <div class="form-check my-3">
            <input type="checkbox" id="is-valid2pay" class="form-check-input" />
            <label for="is-valid2pay" class="form-check-label"> Is valid to pay </label>
          </div>
        </article>

        <article class="col-12 col-md-6 offset-md-3">
          <orkestapay-applepay-button id="orkestapay-applepay-button" />
        </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 checkIsValid2Pay = document.getElementById("is-valid2pay");
      checkIsValid2Pay.checked = true;

      const { public_key, merchant_id, is_sandbox, country_code, currency, total_amount } = initValues();

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

        const applepayButton = document.getElementById("orkestapay-applepay-button");
        await customElements.whenDefined("orkestapay-applepay-button");

        applepayButton.params = {
          payment_details: {
            country_code,
            currency,
            total_amount,
            isValid2Pay,
          },
          theme: { button_color: "dark" },
        };
        applepayButton.addEventListener("paymentMethodCreated", handlePaymentMethodCreated);
      })();

      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);
        this.paymentStatus = "COMPLETED";

        // Implementar lógica para enviar el "payment_method_id" al backend y continuar con el proceso de pago
      }

      function isValid2Pay() {
        return checkIsValid2Pay.checked;
      }

      function initValues() {
        return {
          public_key: "<REPLACE_WITH_YOUR_PUBLIC_KEY>",
          merchant_id: "<REPLACE_WITH_YOUR_MERCHANT_ID>",
          is_sandbox: true,
          country_code: "MX",
          currency: "MXN",
          total_amount: "100.00",
        };
      }
    </script>
  </body>
</html>

🚧

NOTA

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


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.

📘

Documentación

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


🚧

IMPORTANTE

Para realizar las pruebas de pago, es necesario:

  1. Realizar las pruebas en dispositivos Apple con Safari para que el botón de pago se visualice.
  2. Deberás de contar con tarjetas guardadas en tu dispositivo.
  3. Ejecutar el código bajo un protocolo seguro (HTTPS)

Updated about 1 month ago