- 20 Jun 2023
- OscuroLigero
Prueba rápida de pago con API
- Actualizado en 20 Jun 2023
- OscuroLigero
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.
- Autenticación de servicios.
- Registrar orden.
- Construir HTML ejemplo para pago.
- 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"
}
'
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.