AirCash

Step 1: Set up AirCash Component

The air-cash component is available as part of Monri.js. To get started, include the following script on your page. This script must be loaded directly from monri.com to remain PCI-compliant —you cannot self-host or bundle it.

Test Environment

<script src="https://ipgtest.monri.com/dist/components.js"></script>

Production Environment

<script src="https://ipg.monri.com/dist/components.js"></script>

Then, create an instance of Monri and initialize components:

const monri = Monri('<authenticity-token>');
const components = monri.components({clientSecret: '<client-secret>'});

Replace <authenticity-token> with the value from your merchant dashboard.

Replace <client-secret> with the value obtained when creating a payment via your backend.

⚠️ When switching to production, ensure you're using your production authenticity_token and client_secret.

Step 2: Create your Payment Form Container

Create a DOM element where the air-cash component will be injected.

<div id="air-cash-element"></div>

Step 3: Initialize and Mount air-cash Component

You can now create and mount the component. Optional styles can be passed depending on screen size:

// Create an instance of the air-cash Components.
const airCash = components.create("air-cash", {
    trx_token: "<trx_token>",
    environment: isTestSystem ? "test" : "prod",
    // define styling options for air-cash Components
    style: {}
});
// Add an instance of the AirCash component into the `air-cash-element` <div>.
airCash.mount("air-cash-element");

Step 4: Optional - Listen to Payment Events

You can optionally listen to success or error events:

airCash.on('paymentSuccess', (result) => {
    console.log('Payment successful', result);
});

airCash.on('paymentError', (error) => {
    console.error('Payment error', error);
});

Notes

Ensure the container #air-cash-element exists before calling mount.

Use media queries or window.innerWidth to adjust styles for mobile/desktop.

QR codes or bank options are rendered automatically inside the component.

AirCash supports real-time payments and is optimized for bank selection and QR scanning.