Prueba rápida de pago con API
  • 20 Jun 2023
  • Oscuro
    Ligero

Prueba rápida de pago con API

  • Oscuro
    Ligero

Article Summary

Para realizar una prueba de pago rápida, basta con realizar 4 pasos muy sencillos desde tu shell y estarás generando pagos con Zenkipay.

  1. Autenticación de servicios.
  2. Registrar orden.
  3. Construir HTML ejemplo para pago.
  4. Pagar orden desde monedero.

1.- Autenticación de servicios

Deberás de copiar las credenciales de autenticación "Identificador del cliente y clave secreta del cliente" para llamar el servicio de autenticación de Zenkipay y obtener un token que se usará para llamar al resto de servicios, incluido el servicio para generar orden.

Petición hacia el servicio

Después de copiar las credenciales de autenticación deberásde buscar los textos "REPLACE_WITH_YOUR_CLIENT_ID y REPLACE_WITH_YOUR_CLIENT_SECRET" en el script de abajo y reemplazar con los valores obtenidos en el proceso de alta de cuenta para poder ejecutar la llamada al servicio mediante shell:

  • clientId: Identificador del cliente
  • clientSecret: Clave secreta del cliente
curl --request POST \
     --url https://api.zenki.fi/v1/oauth/tokens \
     --header 'Accept: application/json' \
     --header 'Content-Type: application/json' \
     --data '
{
     "clientId": "REPLACE_WITH_YOUR_CLIENT_ID",
     "clientSecret": "REPLACE_WITH_YOUR_CLIENT_SECRET",
     "grantType": "client_credentials"
}
'
Tipo de permisos
La propiedad "grantType" siempre se deberá de llevar el valor "client_credentials", dado que es el modelo de funcionamiento del protocolo oAuth 2.0 que utiliza Zenkipay para autenticar los servicios.

Respuesta del servicio

Como resultado de la llamada al servicio de autenticación se regresará un token JWT, el cual se utilizará para generar la orden de pago.

{
  "tokenType": "Bearer",
  "expiresIn": 180,
  "accessToken": "eyJhbGciOiJSUzI1NiIsInR5cCIgOiAiSldUIiwia2lkIiA6ICIwenJMTnEwbzBab1R4NTlaeWVPaTI1RGxZLWl6cV91SVFSLThWS0RaWjlFIn0.eyJleHAiOjE2Njk4NTAzNTAsImlhdCI6MTY2OTg1MDE3MCwianRpIjoiMWI4MWZhMDItMzk2ZC00NGNjLWJlMzctZGU4ZWQyODg2MTEyIiwiaXNzIjoiaHR0cHM6Ly9kZXYtYXV0aC56ZW5raS5maS9hdXRoL3JlYWxtcy9wYnciLCJzdWIiOiIxMjgyNjJhOS00NDgxLTQ4OGItYTczNi1iNmI5MTA1NjQ4MzQiLCJ0eXAiOiJCZWFyZXIiLCJhenAiOiI1MDg3ODE3MDhjNzk5MTE5NTJkZGJlYWZkZjM5NjNmNTcxYjNjYzE4YzE5YmNkY2YiLCJhY3IiOiIxIiwiYWxsb3dlZC1vcmlnaW5zIjpbImh0dHBzOi8vcG9ydGFsLWRldi56ZW5raS5maSJdLCJyZWFsbV9hY2Nlc3MiOnsicm9sZXMiOlsiYXBpIiwiYXBpX3plbmtpcGF5Il19LCJzY29wZSI6InByb2ZpbGUgZW1haWwiLCJlbWFpbF92ZXJpZmllZCI6ZmFsc2UsImNsaWVudEhvc3QiOiIzNS44NS4yMy4xOTAiLCJjbGllbnRJZCI6IjUwODc4MTcwOGM3OTkxMTk1MmRkYmVhZmRmMzk2M2Y1NzFiM2NjMThjMTliY2RjZiIsInByZWZlcnJlZF91c2VybmFtZSI6InNlcnZpY2UtYWNjb3VudC01MDg3ODE3MDhjNzk5MTE5NTJkZGJlYWZkZjM5NjNmNTcxYjNjYzE4YzE5YmNkY2YiLCJjbGllbnRBZGRyZXNzIjoiMzUuODUuMjMuMTkwIn0.Ds5eQ-tkn4ckTUHI-mrJn6eYBaUa-6uZNxzrGRfYc5neI1TvB2RHu_IDsktDVi9XdR5P_P0mSpzar9jWJOrxxA_csTnn9ZXy8rDeRqjMm9j03xWz-tZcxiUM6xvN1qvOeBGFzISIP9y24jyL0Jqpl8YhkSGF8xBfFvfhOvEMvgLby5n7dTDoZVi2Bw8G1kZJKPejmBu8MJetl08OoVk_obp6lW3YetQPYTwsutOc_yIxBIUkPSH2Gj3wpBxBa8EfMES4J1SAT7Thpw_CmZ_PNB9rEDUJI4bzE7QM2Z0n4LNXzbo5JFuWudKwfhqOcryH0slmHOamJgbtR5EGryf8LQ"
}

Guarda muy bien el token JWT que regreso el servicio en la propiedad "accessToken", este valor será utilizado para llamar a otros servicios en el API de Zenkipay.

2.- Registrar orden

Después de tener el token de acceso, se deberá registrar una orden de pago llamando el servicio de crear orden en el API de Zenkipay, como parte del cuerpo de la petición se deberá indicar la información del carrito de compra.

Petición hacia el servicio

Se deberá llamar al servicio de crear orden y como parte de la petición se deberá de enviar el encabezado "authorization" y como valor del encabezado el valor del "accessToken" obtenido en el paso 1. Deberásde buscar el texto "REPLACE_WITH_YOUR_ACCESS_TOKEN" en el script de abajo y reemplazar con el token JWT.

curl --request POST \
     --url https://api.zenki.fi/v1/pay/orders \
     --header 'Accept: application/json' \
     --header 'Content-Type: application/json' \
     --header 'authorization: Bearer REPLACE_WITH_YOUR_ACCESS_TOKEN' \
     --data '
{
     "breakdown": {
          "currencyCodeIso3": "USD",
          "totalItemsAmount": 200,
          "shipmentAmount": 50,
          "subtotalAmount": 250,
          "taxesAmount": 10,
          "localTaxesAmount": 1.6,
          "grandTotalAmount": 261.6
     },
     "items": [
          {
               "quantity": 2,
               "unitPrice": 100,
               "name": "Libreta"
          }
     ],
     "version": "v1.0.0",
     "orderId": "f335944568592b",
     "type": "WITHOUT_CARRIER",
     "countryCodeIso2": "MX"
}
'

Respuesta del servicio

Al crear una orden de compra se regresará la información de la orden y el estado del pago.

{
  "version": "v1.0.0",
  "zenkiOrderId": "e6ce5f34d9d644828f170cb3fc72fd71",
  "status": "PENDING",
  "createdAt": 1669851118132,
  "breakdown": {
    "totalItemsAmount": 200,
    "shipmentAmount": 50,
    "subtotalAmount": 250,
    "taxesAmount": 10,
    "localTaxesAmount": 1.6,
    "importCosts": 0,
    "discountAmount": 0,
    "grandTotalAmount": 261.6,
    "currencyCodeIso3": "USD"
  },
  "items": [
    {
      "quantity": 2,
      "unitPrice": 100,
      "name": "Libreta"
    }
  ],
  "paymentSignature": "T69f5b291794a7443b1c24ded54ba2f9239f9272c6c9c19d4ebaf5effb6003576",
  "orderId": "f335944568592b",
  "type": "WITHOUT_CARRIER"
}


3.- Construir html ejemplo para pago

Una vez generada la orden de pago, se deberá crear un HTML en donde se utilice el JavaScript de Zenkipay para agregar el botón de pago y se muestre un modal donde se realice el proceso de pago.

Previo a la creación del HTML, es importante identificar las propiedades "orderId y paymentSignature" qué regreso el servicio de "Crear orden". Estos valores se deberán de reemplazar dentro del HTML sugerido para realizar la prueba de pago.

Para realizar el pago se recomienda crear un archivo HTML de ejemplo con nombre "HolaMundo.html" y como contenido del archivo HTML agrega el ejemplo que a continuación se comparte:

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>Pay with Zenkipay</title>
    <meta charset="UTF-8" />
    <meta data-fr-http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <style type="text/css">
      .container {
        gap: 2rem;
        display: flex;
        align-items: center;
        flex-direction: column;
        justify-content: center;
        margin: 2rem;
      }
      .button {
        gap: 8px;
        display: flex;
        flex-wrap: nowrap;
        align-items: center;
        justify-content: center;
        font-family: Arial, Helvetica, sans-serif;
        background-color: #fff;
        border-radius: 0.5rem;
        border-color: #000;
        border-style: solid;
        border-width: 1px;
        color: #533b7f;
        cursor: pointer;
        width: min-content;
        padding: 0.375rem 1rem;
      }
      .label {
        font-size: 1rem;
        font-weight: 500;
        line-height: 100%;
        white-space: nowrap;
      }
      .decorator {
        background-color: #533b7f;
        height: 100%;
        width: 1px;
      }
      .logo {
        height: 1.875rem;
      }
      .alert {
        color: #383d41;
        font-family: Arial, Helvetica, sans-serif;
      }
    </style>
  </head>
  <body>
    <main class="container">
      <button id="btn-pay-with-zenkipay" class="button">
        <span class="label">Pay with Crypto</span>
        <span class="decorator"> </span>
        <img
          class="logo"
          alt="Zenkipay"
          src="https://resources.zenki.fi/zenkipay/script/v2/assets/images/logo-zenkipay-default.svg"
        />
      </button>
      <section id="message" class="alert"></section>
    </main>
    <script
      type="text/javascript"
      src="https://resources.zenki.fi/zenkipay/script/v2/zenkipay.js"
    ></script>
    <script type="text/javascript">
      const message = document.getElementById('message');

      const zenkipayOptions = {
        orderId: 'REPLACE_WITH_YOUR_ZENKI_ORDER_ID',
        paymentSignature: 'REPLACE_WITH_YOUR_PAYMENT_SIGNATURE',
      };

      const btnZenkipay = document.getElementById('btn-pay-with-zenkipay');
      btnZenkipay.addEventListener('click', () => {
        zenkipay.openModal(zenkipayOptions, handleOpenModalEvents);
      });

      function handleOpenModalEvents(error, details) {
        if (error) {
          const arr = [error.message];
          if (details && details.postMsgType) {
            arr.unshift(details.postMsgType.toUpperCase());
          }
          message.innerText = arr.join(': ');
          return;
        }

        const { postMsgType, data } = details;
        const arr = [postMsgType.toUpperCase()];
        if (data && data.orderId) {
          arr.push('orderID: ' + data.orderId);
        }
        message.innerText = arr.join(': ');
      }
    </script>
  </body>
</html>

Dentro del archivo HTML se deberán de buscar los textos "REPLACE_WITH_YOUR_ZENKI_ORDER_ID y REPLACE_WITH_YOUR_PAYMENT_SIGNATURE" y reemplazar con los valores obtenidos al momento de crear la orden.

const zenkipayOptions = 
{ 
  orderId: 'REPLACE_WITH_YOUR_ZENKI_ORDER_ID',
  paymentSignature: 'REPLACE_WITH_YOUR_PAYMENT_SIGNATURE'
};

4.- Pagar orden desde monedero

Una vez abierta la página HTML de ejemplo, se deberá de dar clic en el botón de pago para visualizar el modal de pago.

Ahora se deberá de ingresar el correo del comprador y dar clic en Continuar.

Selecciona una billetera o también puedes seleccionar la opción Código QR

Se deberá esperar unos momentos para que se confirme el pago.

Una vez confirmada la transacción, podrás visualizar en la pantalla de pruebas la orden pagada del ejemplo anterior.

¡Bien hecho!, haz generado tu primer pago con crypto, ya estás listo para generar tus credenciales productivas.

Guía completa de integración mediante API
Para mayor detalle de cómo integrar tu tienda, consulta nuestra guía completa.




¿Te ha sido útil este artículo?