Quick API payment test

To perform a quick payment test, just perform 4 very simple steps from your shell and you will be generating payments with Zenkipay.

1. Service authentication.
2. Register order.
3. Build html example for payment.
4. Pay order from wallet.

1.- Service authentication

You must copy the authentication credentials "Customer ID and customer secret key" to call the Zenkipay authentication service and obtain a token that will be used to call the rest of the services, including the service to generate order.

Request to the service

After copying the authentication credentials you mustlook for the texts "REPLACE_WITH_YOUR_CLIENT_ID and REPLACE_WITH_YOUR_CLIENT_SECRET" in the script below and replace with the values obtained in the account registration process to be able to execute the call to the service through shell:

• clientId: Client ID
• clientSecret: Client secret key

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"
}
'

Service Response

As a result of the call to the authentication service, a JWT token will be returned, which will be used to generate the payment order.

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

It saves very well the JWT token that returns the service in the "accessToken" property, this value will be used to call other services in the Zenkipay API.

2.- Register order

After having the access token, a payment order must be registered by calling the order creation service in the Zenkipay API, as part of the body of the request the information of the shopping cart must be indicated.

Request to the service

The order creation service must be called and as part of the request the "authorization" header must be sent and as the value of the header the value of the "accessToken" obtained in step 1. You shouldlook for the text "REPLACE_WITH_YOUR_ACCESS_TOKEN" in the script below and replace it with the JWT token.

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"
}
'

Service Response

Creating a purchase order will return the order information and payment status.

{
  "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.- Build html example for payment

Once the payment order is generated, an HTML must be created where Zenkipay JavaScript is used to add the payment button and a modal is displayed where the payment process is carried out.

Prior to the creation of the HTML, it is important to identify the properties "orderId and paymentSignature" that return the "Create order" service. These values must be replaced within the suggested HTML to perform the proof of payment.

To make the payment it is recommended to create a sample HTML file named "HolaMundo.html" and as content of the HTML file add the example that is shared below:

<!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>

Within the HTML file you must look for the texts "REPLACE_WITH_YOUR_ZENKI_ORDER_ID and REPLACE_WITH_YOUR_PAYMENT_SIGNATURE" and replace them with the values obtained at the time of creating the order.

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

4.- Pay order from wallet

Once the example HTML page is open, you must click on the payment button to display the payment modal.

Now you must enter the shopper's email and click on Continue.

Select a wallet or also you can choose the QR code option.

You must wait a few moments for the payment to be confirmed.

Once the transaction is confirmed, you will be able to view the paid order from the previous example on the test screen.

Well done!, you have generated your first payment with crypto, you are ready to generate your productive credentials.