Direct API JavaScript Library

You can also use the Direct API Integration Type by including our JavaScript library directly into your vanilla js or favourite framework:

import { PrCards } from <"https://pr-az-neo-pro-cards-cdn-f4fwbrh7e6ffdecc.a01.azurefd.net/js-library/pr-cards.js">;

...
<script>
export default {
  name: 'module',
  data(){
    return {
      prCards: null
    }
  },
  methods: {
    async loadWidget() {
      const PrCardsModule = await import(/* webpackIgnore: true */ 'https://pr-az-neo-pro-cards-cdn-f4fwbrh7e6ffdecc.a01.azurefd.net/js-library/pr-cards.js');
      const { PrCards } = PrCardsModule;
      this.prCards = new PrCards();
      ...
    }
  ...
  }
...
};
</script>

...  
useEffect(() => {  
    const loadScript = async () => {  
      const { PrCards } = await import('<https://pr-az-neo-pro-cards-cdn-f4fwbrh7e6ffdecc.a01.azurefd.net/js-library/pr-cards.js')>;  
        if (PrCards) {  
          const instance = new PrCards();  
          setPrCards(instance);  
      };  
    };  
    loadScript();  
    return () => {  
    };  
  }, \[]);  
...

Nuxt Framework: The commentary webpackIgnore: true is required so that webpack does not include it in the final build and the class exposed by our library can be used.

Sequence diagram

The transaction will follow the normal status flow.

Step-by-Step Integration

Backend: Generate the Transaction ID:
Before initiating the payment, you must send a POST transaction request from your backend to our Payments API. This step ensures all required customer data is provided, and a TransactionID is returned for further use in the frontend.
Backend-to-Frontend Communication:
The TransactionID received from the POST request must be securely passed from your backend to the frontend. This ensures the frontend can initialize the payment process without exposing sensitive API calls directly in the browser.
Frontend: Initialize the Payment Form:
Once the TransactionID is received on the frontend, use it to initialize the payment iframe using the init method from the Host-to-Host JavaScript library.
Payment form:
If the backend call is successfully completed, generating a valid transactionID and passing it correctly to the backend for initialization, you will see the following payment form on your front end:

Code breakdown

Library usage

To use the library, create a new instance of the exposed class:

// START OF THE FULL CODE
const prCards = new PrCards();

`init` Method

The main method to initialize the library is init. This method will inject an iframe containing the payment form into your page.

prCards.init({  
  transactionId: "7b5d6f98-23b3-4813-b1a3-ccc816189286", // Transaction ID obtained via the Payments API through backend
  containerId: "payment-form", // ID of the div where the iframe will be injected

transactionId (string, UID):
This is the unique ID for the transaction. You can obtain this ID through the Payretailers API response. Example: "0e6728c1-7a11-45ea-93a2-cc3090100f68"
containerId (string):
The ID of the div where the iframe will be injected. Example: "payment-form"

Styles (object):

The styles for the iframe. You can customize the width, height, and other CSS properties for the iframe.

styles:{  
  height: "100%",  
  width: "100%",  
  border: "none",  
  borderRadius: "8px",  
  position: "absolute",  
  top: "0",  
  left: "0",  
  bottom: "0",  
  right: "0",  
}

Callbacks

These events will be displayed in the browser's console for debugging:

onError: Triggered when there’s an issue (e.g., validation errors, transaction failures).
onSuccess: Triggered when the payment is successfully processed.
onLoad: Triggered when the payment iframe is fully loaded.

 callbacks: {  
    onError: (data) => {  
      console.log(data);  
      prCards.destroy(); // Destroy the iframe if there is an error  
      alert(data.message); // Alert the user with the error message  
      // Additional error handling can be added here  
    },  
    onSuccess: (data) => {  
      prCards.destroy(); // Destroy the iframe once payment is successful  
      alert(data.transactionId); // Alert with the transaction ID  
      // Additional success handling can be added here  
    },  
    onLoad: () => {  
      // Code to handle the loading state of the payment form  
      // Example: Close an animation that shows the form  
    },  
  }  
});
// END OF THE FULL CODE

Implementation example

<!DOCTYPE html>
<html lang="es">
<head>
   ...
</head>
<body>
...
  <div id="payment-form"></div> // The payment form will be loaded here
  <script>
    import { PrCards } from "https://pr-az-neo-pro-cards-cdn-f4fwbrh7e6ffdecc.a01.azurefd.net/js-library/pr-cards.js";

    const prCards = new PrCards();


    fetch('/your-backend-endpoint')  // Fetch the transactionId from your backend
      .then(response => response.json())
      .then(data => {
        const options = {
            transactionId: data.transactionId, // Use the transactionId received from your backend
            containerId: "payment-form",
            styles: {
              height: "100%",
              width: "100%",
              border: "none",
              borderRadius: "8px",
              position: "absolute",
              top: "0",
              left: "0",
              bottom: "0",
              right: "0",
            },
            callbacks: {
              onError: (message) => {
                console.log(message);
                ...
              },
              onSuccess: (message) => {
                console.log(message);
                ...
              },
              onLoad: () => {
                console.log("Iframe loaded successfully");
                ...
              },
            }
        };
        prCards.init(options);
      })
      .catch(error => {
        console.error("Error fetching transactionId:", error);
      });
  </script>
...
</body>
</html>

JSON response example

{
	"uid": "xxxxxxxx-xxxx-xxxx-yyyy-yyyyyyyyyyyy",
	"type": "payment",
	"status": "PENDING",
	"message": null,
	"trackingId": "UIDFromYourEnd",
	"amount": 10000,
	"currency": "MXN",
	"description": "Payment description",
	"createdAt": "2024-11-28T12:00:41.279598Z",
	"updatedAt": "2024-11-28T12:00:42.4415129Z",
	"pspTransactionId": "xxxxxxxxxxxxxxxxyyyyyyyyyyyyyyyy",
	"isValidPaymentMethod": null,
	"pspCouponAmount": "100",
	"customer": {
		"firstName": "John",
		"lastName": "Doe",
		"middleName": "",
		"country": "MX",
		"city": "Ciudad de México",
		"zip": "",
		"address": "República de Perú 177",
		"phone": "5299999999999",
		"deviceId": "",
		"ip": null,
		"personalId": "TEST123456ABCDEF12",
		"uniqueCustomerIdentifier": null,
		"accountCreationDate": null,
		"accountCreationCountry": null,
		"email": "[email protected]"
	},
	"form": {
		"action": "https://paywall.payretailers.com/transaction/xxxxxxxx-xxxx-xxxx-yyyy-yyyyyyyyyyyy",
		"method": "GET"
	},
	"paymentMethod": {
		"id": "xxxxxxxx-xxxx-xxxx-yyyy-yyyyyyyyyyyy",
		"name": "Tarjetas de Crédito",
		"type": "Credit Card",
		"paymentMethodTag": "CREDIT_CARD"
	},
	"billing": {
		"currency": "MXN",
		"amount": 10000
	}