Apple Pay

Step 1: Set up Apple Pay Component

The apple-pay component is part of Monri.js. To start, include the official Monri script on your page. This script must be loaded directly from Monri servers to stay PCI-compliant — do not 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 token generated by your backend when creating a payment.

⚠️ When switching to production, make sure to use production values for both tokens.

Step 2: Create Payment Form Container

Add a div where the Apple Pay button will be injected:

<div id="apple-pay-element"></div>

Step 3: Initialize and Mount apple-pay Component

Create and mount the component. You must pass trx_token and transaction data required for authorization.

const applePay = components.create("apple-pay", {
    trx_token: "<trx_token>", // Transaction token from backend
    locale: 'en-US', //https://developer.apple.com/documentation/applepayontheweb/applepaybuttonlocale
    buttonStyle: 'black', //'white' or 'white-outline'
    buttonType: 'buy', //https://developer.apple.com/documentation/applepayontheweb/applepaybuttontype
    environment: isTestSystem ? "test" : "prod",
    transaction: {
        ch_full_name: "John Doe",
        address: "Some Street 1",
        city: "Sarajevo",
        zip: "71000",
        phone: "+38761111222",
        country: "BA",
        email: "john.doe@example.com",
        orderInfo: "Apple Pay Demo",
        language: "en"
    }
});

// Mount Apple Pay button to the container
applePay.mount("apple-pay-element");

Step 4: Optional - Listen to Payment Events

You can optionally listen to success or error events:

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

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

Parameters

Option	Description
`trx_token`	Token received when creating the transaction on backend
`environment`	Either `'test'` or `'prod'`, depending on your system
`transaction`	Object with buyer and order data (see below)
`style`	(optional) Custom styles — limited styling options for Apple Pay

Transaction fields

Field	Description
`ch_full_name`	Cardholder full name
`address`	Billing address
`city`	City
`zip`	ZIP / Postal code
`phone`	Customer phone number
`country`	ISO country code (e.g., `BA` for Bosnia)
`email`	Customer email address
`orderInfo`	Short description of the order (for summary)
`language`	Language code (e.g., `en`, `hr`, `de`)

Notes

The Apple Pay button will appear only if the browser and device support Apple Pay.

trx_token must be generated from your backend and is valid only for a single use.

The transaction object is required, otherwise the component may fail to initialize properly.

Apple Pay does not render custom input fields, but inherits language and order summary info.