---
title: "Apple Pay"
slug: "apple-pay"
updated: 2025-07-31T06:09:11Z
published: 2025-07-31T06:09:11Z
canonical: "docs.monri.com/apple-pay"
---

> ## Documentation Index
> Fetch the complete documentation index at: https://docs.monri.com/llms.txt
> Use this file to discover all available pages before exploring further.

# 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 `&lt;authenticity-token&gt;` with the value from your merchant dashboard.

Replace `&lt;client-secret&gt;` 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.