.
-cardInput.render('#container');
-```
-
-If you have a checkout flow that requires you to generate a payment token before you create a payment on your server, you can initialize MONEI Components by providing the following parameters:
+// Render the Component into the container
+cardElement.render('#card-element');
-- **accountId** `string` - Your MONEI account ID. Instead of passing **paymentId** you can initialize a card input with the **accountId** and **sessionId** (optional). Generate a payment token before you create the payment itself.
-- **sessionId** `string` - Unique session ID in your system. Provide a different **sessionId** for each customer. Use this parameter to ensure that the customer who generated the token is the same as the one doing the payment. Only required if you pass a token to your server. If you provide a **sessionId** when initializing MONEI component you will need to provide the same value when you [create a payment](/apis/rest/schemas/payment/) on your server.
-- **amount** `positive integer` (not required for CardInput) - Amount intended to be collected by this payment. A positive integer representing how much to charge in the smallest currency unit (e.g., 100 cents to charge 1.00 USD). You'll need to pass the same value when creating the payment.
-- **currency** `string` (not required for CardInput) - Three-letter [ISO currency code](https://en.wikipedia.org/wiki/ISO_4217), in uppercase. Must be a supported currency. You'll need to pass the same value when creating the payment.
+// Next step: Confirm the payment (see below)
+```
-Check the [Payment Methods](/payment-methods/card.mdx) section for more details about how to initialize components for each payment method.
+### 3. Confirm the payment (Client-side)
-### 3. Confirm the payment `Client-side`
+To complete the payment, you need to confirm it using the `monei.confirmPayment` function.
-To complete the payment you need to confirm it using monei.js [confirmPayment](monei-js/reference.md#confirmpayment-function) function
+You need to provide the `paymentId` (obtained in Step 1) and a `paymentToken` generated with the Component.
-You need to provide a `paymentId` (obtained in [step 1](#1-create-a-payment-server-side)) and `paymentToken` generated with Component. Check the [Payment Methods](/payment-methods/card.mdx) section for more details about how to generate `paymentToken` for each payment method.
+```js title="client.js"
+// Assumes cardElement is the initialized CardInput component from Step 2
-You can also provide additional parameters like `customer.email`. Check all available [parameters](/apis/rest/payments-confirm/).
+// Function to create a token and then confirm the payment
+function handlePayment() {
+ monei
+ .createToken(cardElement) // Create token from the card input
+ .then(function (result) {
+ console.log('Token creation result:', result);
+ if (result.error) {
+ // Inform the user if there was an error creating the token.
+ console.error('Token Error:', result.error.message);
+ } else {
+ // Token created successfully, now confirm the payment.
+ confirmPaymentWithToken(result.token);
+ }
+ })
+ .catch(function (error) {
+ console.error('Error during token creation:', error);
+ });
+}
-```js title="client.js"
-monei
- .createToken(cardInput)
- .then(function (result) {
- console.log(result);
- if (result.error) {
- // Inform the user if there was an error.
- } else {
- // Send the token to MONEI.
- moneiTokenHandler(result.token);
- }
- paymentButton.disabled = false;
- })
- .catch(function (error) {
- paymentButton.disabled = false;
- console.log(error);
- });
-
-// Confirm the payment
-function moneiTokenHandler(token) {
- return monei
- .confirmPayment({paymentId: '{{payment_id}}', paymentToken: token})
+// Function to handle the payment confirmation using the generated token
+function confirmPaymentWithToken(paymentToken) {
+ monei
+ .confirmPayment({paymentId: paymentId, paymentToken: paymentToken})
.then(function (result) {
- // At this moment you can show a customer the payment result
- // But you should always rely on the result passed to the callback endpoint on your server
- // to update the order status
- console.log(result);
+ console.log('Payment confirmation result:', result);
+ // At this moment you can show a customer the payment result (e.g., redirect)
+ // But you should ALWAYS rely on the result passed to the callback endpoint
+ // on your server (Step 4) to update the final order status.
+ if (result.error) {
+ console.error('Confirmation Error:', result.error.message);
+ } else {
+ console.log('Payment status (client-side):', result.status);
+ // Example: window.location.href = '/thank-you?paymentId=' + paymentId;
+ }
})
.catch(function (error) {
- console.log(error);
+ console.error('Error during payment confirmation:', error);
});
}
+
+// You would typically call handlePayment() when the user clicks your pay button.
+// Example: document.getElementById('your-pay-button').addEventListener('click', handlePayment);
```
-After you confirm the payment, MONEI will automatically show a popup window with a 3d secure confirmation screen (if needed, depending on the payment method).
+After you confirm the payment, MONEI handles any necessary steps like 3D Secure authentication.
-:::note
-As an alternative process you can submit generated `paymentToken` to your sever and then [confirm payment](/apis/rest/payments-confirm/) on the server-side.
+:::note Alternative Flow
+As an alternative process, you can submit the generated `paymentToken` to your server and then [confirm the payment server-side](/apis/rest/payments-confirm/).
:::
-### 4. An asynchronous request is sent to your server.
+### 4. Process Webhook Notification (Server-side)
+
+After the client-side interaction and any necessary background processing (like 3D Secure or bank authorization), MONEI sends the final, authoritative payment status via an asynchronous HTTP POST request to the `callbackUrl` you provided in Step 1.
+
+The request body contains the full [Payment object](/apis/rest/schemas/payment/) in JSON format.
-MONEI will notify you about the payment status by sending an HTTP POST request to the `callbackUrl`. The request body will contain full [payment object](/apis/rest/schemas/payment/) in JSON format.
+This webhook is the **only reliable way** to confirm the definitive payment outcome.
-This ensures that you get the payment status even when a customer closes the browser window or loses internet connection.
+**Crucially, you must:**
-The request also contains a `MONEI-Signature` header. [Verify this signature](guides/verify-signature.mdx) to confirm that the received request is sent from MONEI.
+1. **Verify the `MONEI-Signature` header** included in the request. This confirms the webhook genuinely came from MONEI. See the [Verify Signatures guide](/guides/verify-signature.mdx) for implementation details.
+2. **Return a `200 OK` HTTP status code** immediately upon receiving the webhook to acknowledge receipt. Any other status code tells MONEI the notification failed.
-To acknowledge receipt of the request, your endpoint must return a `200` HTTP status code to MONEI. All other response codes, including `3xx` codes, indicate to MONEI that you did not receive the event.
+If MONEI doesn't receive a `200 OK`, it will retry sending the webhook.
-If MONEI does not receive a `200` HTTP status code, the notification attempt is repeated. After multiple failures to send the notification over multiple days, MONEI marks the request as failed and stops trying to send it to your endpoint.
+Once the signature is verified, inspect the `status` field in the Payment object (`SUCCEEDED`, `FAILED`, `CANCELED`, etc.) to determine whether to fulfill the order or handle the failure.
## Before you go live
diff --git a/docs/integrations/pay-by-link.mdx b/docs/integrations/pay-by-link.mdx
index c1a0db5..1bca42f 100644
--- a/docs/integrations/pay-by-link.mdx
+++ b/docs/integrations/pay-by-link.mdx
@@ -8,24 +8,29 @@ Send your customers a unique link via email, WhatsApp or SMS to pay online in on

-## Before you begin
+## Overview
-This page explains how to create payment links programmatically using [MONEI Payments API](/apis/rest/payments-create/). You can also create payment links in your [MONEI Dashboard](https://dashboard.monei.com/).
+This page explains how to create payment links programmatically using the [MONEI Payments API](/apis/rest/payments-create/). You can also create and manage payment links manually via your [MONEI Dashboard](https://dashboard.monei.com/).
-To test your integration:
+Pay By Link generates a unique URL for a specific payment amount that directs the customer to a secure MONEI-hosted payment page.
-- Use your [test mode](testing.md) Account ID and API Key.
-- Make sure you have all payment methods configured. Check the [Payment Methods](/payment-methods/card.mdx) section for more details about each payment method.
-- You can check the status of a test payment in your [MONEI Dashboard → Payments](https://dashboard.monei.com/payments) (in test mode).
+## Before You Begin
-## Integration
+- You'll need a MONEI account and your API keys (test or live). Find them in your [MONEI Dashboard](https://dashboard.monei.com/settings/api).
+- Use your [test mode keys](testing.md) for integration testing.
+- Ensure relevant [payment methods](/payment-methods/overview.mdx) are enabled in your account settings for the hosted page.
+- You can monitor test payments in your [MONEI Dashboard → Payments](https://dashboard.monei.com/payments) (ensure Test Mode is active).
-### 1. Create a Payment `Server-side`
+## Integration Steps
-Create a [Payment](/apis/rest/schemas/payment/) on your server with an amount and currency.
+Creating and processing a Pay By Link payment involves creating a payment on your server, sending the generated link to the customer, and processing the final payment status via webhooks.
+
+### 1. Create Payment (Server-side)
+
+Create a [Payment](/apis/rest/schemas/payment/) on your server with an amount, currency, and optionally customer details.
-import Tabs from '@theme/Tabs';
import TabItem from '@theme/TabItem';
+import Tabs from '@theme/Tabs';
```shell script title="POST https://api.monei.com/v1/payments"
curl --request POST 'https://api.monei.com/v1/payments' \
---header 'Authorization: pk_test_3c140607778e1217f56ccb8b50540e00' \
+--header 'Authorization: YOUR_API_KEY' \
--header 'Content-Type: application/json' \
--data-raw '{
"amount": 110,
@@ -47,28 +53,43 @@ curl --request POST 'https://api.monei.com/v1/payments' \
"orderId": "14379133960355",
"description": "Test Shop - #14379133960355",
"customer": {
- "email": "john.doe@microapps.com"
- }
+ "email": "email@example.com",
+ "phone": "+34666555444"
+ },
+ "callbackUrl": "https://example.com/checkout/callback",
+ "completeUrl": "https://example.com/checkout/complete", // Optional: Redirect after payment attempt
+ "cancelUrl": "https://example.com/checkout/cancel" // Optional: Redirect if user cancels
}'
-
```
+(Replace `YOUR_API_KEY` with your actual MONEI API key)
+
```js title="server.js"
-const {Monei} = require('@monei-js/node-sdk');
-const monei = new Monei('pk_test_36cf3e8a15eff3f5be983562ea6b13ec');
-monei.payments.create({
+import {Monei} from '@monei-js/node-sdk';
+
+// Replace YOUR_API_KEY with your actual MONEI API key
+const monei = new Monei('YOUR_API_KEY');
+
+const payment = await monei.payments.create({
amount: 110,
currency: 'EUR',
orderId: '14379133960355',
description: 'Test Shop - #14379133960355',
customer: {
- email: 'john.doe@microapps.com'
- }
+ email: 'email@example.com',
+ phone: '+34666555444'
+ },
+ callbackUrl: 'https://example.com/checkout/callback',
+ completeUrl: 'https://example.com/checkout/complete', // Optional
+ cancelUrl: 'https://example.com/checkout/cancel' // Optional
});
+
+// You will need the paymentId from the response in the next step
+const paymentId = payment.id;
```
@@ -76,76 +97,125 @@ monei.payments.create({
```php title="server.php"
-$monei = new Monei\MoneiClient('pk_test_36cf3e8a15eff3f5be983562ea6b13ec');
-$monei->payments->create([
- 'amount' => 110,
- 'currency' => 'EUR',
- 'orderId' => '14379133960355',
- 'description' => 'Test Shop - #14379133960355',
- 'customer' => [
- 'email' => 'john.doe@microapps.com'
- ]
-]);
+payments->create(
+ new CreatePaymentRequest([
+ 'amount' => 110,
+ 'currency' => 'EUR',
+ 'order_id' => '14379133960355',
+ 'description' => 'Test Shop - #14379133960355',
+ 'customer' => new PaymentCustomer([
+ 'email' => 'email@example.com',
+ 'phone' => '+34666555444'
+ ]),
+ 'callback_url' => 'https://example.com/checkout/callback',
+ 'complete_url' => 'https://example.com/checkout/complete', // Optional
+ 'cancel_url' => 'https://example.com/checkout/cancel' // Optional
+ ])
+);
+
+// You will need the paymentId from the response in the next step
+$paymentId = $payment->getId();
+?>
```
-
+
+
+
+
+```python title="server.py"
+import Monei
+from Monei import CreatePaymentRequest, PaymentCustomer
+
+# Replace YOUR_API_KEY with your actual MONEI API key
+monei = Monei.MoneiClient(api_key="YOUR_API_KEY")
+
+payment = monei.payments.create(
+ CreatePaymentRequest(
+ amount=110,
+ currency="EUR",
+ order_id="14379133960355",
+ description="Test Shop - #14379133960355",
+ customer=PaymentCustomer(
+ email="email@example.com",
+ phone="+34666555444"
+ ),
+ callback_url="https://example.com/checkout/callback",
+ complete_url="https://example.com/checkout/complete", // Optional
+ cancel_url="https://example.com/checkout/cancel" // Optional
+ )
+)
+
+// You will need the paymentId from the response in the next step
+payment_id = payment.id
+```
+
+
+
-The following parameters are required:
+**Key Parameters:**
-- **amount** `positive integer` - Amount intended to be collected by this payment. A positive integer representing how much to charge in the smallest currency unit (e.g., 100 cents to charge 1.00 USD)
-- **currency** `string` - Three-letter [ISO currency code](https://en.wikipedia.org/wiki/ISO_4217), in uppercase. Must be a supported currency.
-- **orderId** `string` - An order ID from your system. A unique identifier that can be used to reconcile the payment with your internal system.
+- **amount** `positive integer`: Amount in the smallest currency unit.
+- **currency** `string`: Three-letter ISO currency code.
+- **orderId** `string`: Your unique order identifier.
+- **customer.email** / **customer.phone** `string`: At least one is required if you want MONEI to send the link automatically (Step 2).
+- **callbackUrl** `string`: Your server endpoint for webhook notifications (crucial for final status).
+- **completeUrl** / **cancelUrl** `string` (Optional): URLs for redirecting the customer after interaction.
Check all available [request parameters](/apis/rest/payments-create/).
-### 2. Send a payment link to your customer
+The response contains the `payment.id`, needed for the next step.
-In the response from the first request you'll get the payment `id`:
+### 2. Send Link & Handle Interaction (Server-side / Client-side)
-```json
-{
- "id": "af6029f80f5fc73a8ad2753eea0b1be0",
- "amount": 110,
- "currency": "EUR",
- "orderId": "84370745531439",
- ...
-}
-```
+You have two main options to get the link to the customer:
-Use payment `id` to send a payment link to your customer. If you provided customer `email` in the first request, MONEI will send the payment link to your customer via email. If you only provided customer `phone`, MONEI will try to send the payment link via WhatsApp, if the phone number is not registered in WhatsApp, MONEI will send the payment link via SMS.
+**Option A: MONEI Sends the Link (Recommended for Simplicity)**
-You can also specify the delivery `channel` manually in the request body.
+Make a POST request to the `/v1/payments/{payment_id}/link` endpoint. If you provided `customer.email` or `customer.phone` in Step 1, MONEI will automatically send the link via the appropriate channel (email, WhatsApp, or SMS).
-```shell script title="POST https://api.monei.com/v1/payment/af6029f80f5fc73a8ad2753eea0b1be0/link"
-curl --request POST 'https://api.monei.com/v1/payment/af6029f80f5fc73a8ad2753eea0b1be0/link' \
---header 'Authorization: pk_test_3c140607778e1217f56ccb8b50540e00' \
+```shell script title="POST https://api.monei.com/v1/payments/{payment_id}/link"
+curl --request POST 'https://api.monei.com/v1/payments/{payment_id}/link' \
+--header 'Authorization: YOUR_API_KEY' \
--header 'Content-Type: application/json' \
--data-raw '{
- "language": "es",
+ "language": "es", // Optional: Set language for email/SMS template
+ "channel": "email" // Optional: Force channel (email, whatsapp, sms)
}'
-
```
+(Replace `{payment_id}` and `YOUR_API_KEY`)
+
```js title="server.js"
-const {Monei} = require('@monei-js/node-sdk');
-const monei = new Monei('pk_test_36cf3e8a15eff3f5be983562ea6b13ec');
-monei.payments.sendLink({
- language: 'es'
+// Assumes paymentId is obtained from the previous step
+await monei.payments.sendLink(paymentId, {
+ language: 'es', // Optional
+ channel: 'email' // Optional
});
```
@@ -154,13 +224,64 @@ monei.payments.sendLink({
```php title="server.php"
-$monei = new Monei\MoneiClient('pk_test_36cf3e8a15eff3f5be983562ea6b13ec');
-$monei->payments->sendLink([
- 'language' => 'es'
+payments->sendLink($paymentId, [
+ 'language' => 'es', // Optional
+ 'channel' => 'email' // Optional
]);
+?>
```
-
+
+
+
+
+```python title="server.py"
+# Assumes payment_id is obtained from the previous step
+monei.payments.sendLink(payment_id, language='es', channel='email') # Optional params
+```
+
+
+
-See the full list of [request parameters](/apis/rest/payments-send-link/).
+**Option B: You Send the Link**
+
+The [Payment object](/apis/rest/schemas/payment/) returned in Step 1 contains `payment.nextAction.redirectUrl`. This is the payment link.
+
+```json title="Example Partial Response from Step 1"
+{
+ "id": "af6029f80f5fc73a8ad2753eea0b1be0",
+ // ... other fields ...
+ "nextAction": {
+ "type": "CONFIRM",
+ "mustRedirect": true,
+ "redirectUrl": "https://secure.monei.com/payments/af6029f80f5fc73a8ad2753eea0b1be0" // <-- This is the Pay By Link URL
+ }
+}
+```
+
+You can take this `redirectUrl` and send it to your customer through your own communication channels (email, SMS, in-app message, etc.).
+
+**Customer Interaction:**
+
+1. The customer clicks the link.
+2. They are taken to the secure MONEI payment page.
+3. They choose a payment method, enter details, and complete any required authentication (like 3D Secure).
+4. After attempting payment or cancelling, they might be redirected to your `completeUrl` or `cancelUrl` if you provided them in Step 1.
+
+### 3. Process Webhook Notification (Server-side)
+
+Regardless of whether the customer is redirected, MONEI sends the final, authoritative payment status via an asynchronous HTTP POST request to the `callbackUrl` you provided in Step 1. The request body contains the full [Payment object](/apis/rest/schemas/payment/) in JSON format.
+
+This webhook is the **only reliable way** to confirm the definitive payment outcome.
+
+**Crucially, you must:**
+
+1. **Verify the `MONEI-Signature` header** included in the request. This confirms the webhook genuinely came from MONEI. See the [Verify Signatures guide](/guides/verify-signature.mdx) for implementation details.
+2. **Return a `200 OK` HTTP status code** immediately upon receiving the webhook to acknowledge receipt. Any other status code tells MONEI the notification failed.
+
+If MONEI doesn't receive a `200 OK`, it will retry sending the webhook.
+
+Once the signature is verified, inspect the `status` field in the Payment object (`SUCCEEDED`, `FAILED`, `CANCELED`, etc.) to determine whether to fulfill the order or handle the failure.
diff --git a/docs/integrations/use-payment-modal.mdx b/docs/integrations/use-payment-modal.mdx
index 8ef74da..5ed7596 100644
--- a/docs/integrations/use-payment-modal.mdx
+++ b/docs/integrations/use-payment-modal.mdx
@@ -6,17 +6,26 @@ description: MONEI Payment Modal is the simplest way to securely collect payment
MONEI Payment Modal is the simplest way to securely collect payments from your customers without them leaving your website.
-Collecting payments on your website consists of creating a payment object, and confirming the payment.
-

+Collecting payments on your website consists of creating a payment object, and confirming the payment.
+
:::important
Apple Pay is not available when using MONEI Payment Modal integration.
:::
-## Integration
+## Before You Begin
+
+- You'll need a MONEI account and your API keys (test or live). Find them in your [MONEI Dashboard](https://dashboard.monei.com/settings/api).
+- Use your [test mode keys](testing.md) for integration testing.
+- Ensure relevant [payment methods](/payment-methods/overview.mdx) are enabled in your account settings.
+- You can monitor test payments in your [MONEI Dashboard → Payments](https://dashboard.monei.com/payments) (ensure Test Mode is active).
+
+## Integration Steps
+
+Integrating the Payment Modal involves creating a payment on your server, using `monei.js` to handle the modal on the client-side, and processing the final payment status via webhooks.
-### 1. Create a Payment `Server-side`
+### 1. Create Payment (Server-side)
Create a [Payment](/apis/rest/schemas/payment/) on your server with an amount and currency. Always decide how much to charge on the server side, a trusted environment, as opposed to the client. This prevents malicious customers from being able to choose their own prices.
@@ -29,13 +38,14 @@ import Tabs from '@theme/Tabs';
values={[
{label: 'cURL', value: 'curl'},
{label: 'Node.js', value: 'node'},
- {label: 'PHP', value: 'php'}
+ {label: 'PHP', value: 'php'},
+ {label: 'Python', value: 'python'}
]}>
```shell script title="POST https://api.monei.com/v1/payments"
curl --request POST 'https://api.monei.com/v1/payments' \
---header 'Authorization: pk_test_3c140607778e1217f56ccb8b50540e00' \
+--header 'Authorization: YOUR_API_KEY' \
--header 'Content-Type: application/json' \
--data-raw '{
"amount": 110,
@@ -43,30 +53,37 @@ curl --request POST 'https://api.monei.com/v1/payments' \
"orderId": "14379133960355",
"description": "Test Shop - #14379133960355",
"customer": {
- "email": "john.doe@microapps.com"
+ "email": "email@example.com"
},
"callbackUrl": "https://example.com/checkout/callback"
}'
-
```
+(Replace `YOUR_API_KEY` with your actual MONEI API key)
+
```js title="server.js"
-const {Monei} = require('@monei-js/node-sdk');
-const monei = new Monei('pk_test_36cf3e8a15eff3f5be983562ea6b13ec');
-monei.payments.create({
+import {Monei} from '@monei-js/node-sdk';
+
+// Replace YOUR_API_KEY with your actual MONEI API key
+const monei = new Monei('YOUR_API_KEY');
+
+const payment = await monei.payments.create({
amount: 110,
currency: 'EUR',
orderId: '14379133960355',
description: 'Test Shop - #14379133960355',
customer: {
- email: 'john.doe@microapps.com'
+ email: 'email@example.com'
},
callbackUrl: 'https://example.com/checkout/callback'
});
+
+// You will need the paymentId from the response in the next step
+const paymentId = payment.id;
```
@@ -74,38 +91,81 @@ monei.payments.create({
```php title="server.php"
-$monei = new Monei\MoneiClient('pk_test_36cf3e8a15eff3f5be983562ea6b13ec');
-$monei->payments->create([
- 'amount' => 110,
- 'currency' => 'EUR',
- 'orderId' => '14379133960355',
- 'description' => 'Test Shop - #14379133960355',
- 'customer' => [
- 'email' => 'john.doe@microapps.com'
- ],
- 'callbackUrl' => 'https://example.com/checkout/callback'
-]);
+payments->create(
+ new CreatePaymentRequest([
+ 'amount' => 110,
+ 'currency' => 'EUR',
+ 'order_id' => '14379133960355',
+ 'description' => 'Test Shop - #14379133960355',
+ 'customer' => new PaymentCustomer([
+ 'email' => 'email@example.com'
+ ]),
+ 'callback_url' => 'https://example.com/checkout/callback'
+ ])
+);
+
+// You will need the paymentId from the response in the next step
+$paymentId = $payment->getId();
+?>
```
-
+
+
+
+
+```python title="server.py"
+import Monei
+from Monei import CreatePaymentRequest, PaymentCustomer
+
+# Replace YOUR_API_KEY with your actual MONEI API key
+monei = Monei.MoneiClient(api_key="YOUR_API_KEY")
+
+payment = monei.payments.create(
+ CreatePaymentRequest(
+ amount=110,
+ currency="EUR",
+ order_id="14379133960355",
+ description="Test Shop - #14379133960355",
+ customer=PaymentCustomer(
+ email="email@example.com"
+ ),
+ callback_url="https://example.com/checkout/callback"
+ )
+)
+
+# You will need the paymentId from the response in the next step
+payment_id = payment.id
+```
+
+
-The following parameters are required:
+**Key Parameters:**
-- **amount** `positive integer` - Amount intended to be collected by this payment. A positive integer representing how much to charge in the smallest currency unit (e.g., 100 cents to charge 1.00 USD)
-- **currency** `string` - Three-letter [ISO currency code](https://en.wikipedia.org/wiki/ISO_4217), in uppercase. Must be a supported currency.
-- **orderId** `string` - An order ID from your system. A unique identifier that can be used to reconcile the payment with your internal system.
-- **callbackUrl** `string` - The URL to which a payment result should be sent asynchronously.
+- **amount** `positive integer`: Amount in the smallest currency unit (e.g., 110 for €1.10).
+- **currency** `string`: Three-letter [ISO currency code](https://en.wikipedia.org/wiki/ISO_4217) (e.g., `EUR`).
+- **orderId** `string`: Your unique order identifier.
+- **callbackUrl** `string`: Your server endpoint URL for asynchronous webhook notifications.
Check all available [request parameters](/apis/rest/payments-create/).
-Included in the returned Payment object is a payment `id`, which is used on the client side to securely complete the payment process instead of passing the entire Payment object.
+Included in the returned Payment object is a payment `id`. You will use this `paymentId` on the client-side in the next step.
-### 2. Confirm the payment `Client-side`
+### 2. Handle Payment Interaction (Client-side)
-To complete the payment you need to confirm it using monei.js [confirmPayment](monei-js/reference.md#confirmpayment-function) function
+Use [`monei.js`](/monei-js/reference/) to confirm the payment. This will trigger the payment modal pop-up.
-Include `monei.js` on your checkout page by adding the script tag to the `head` of your HTML file.
+Include `monei.js` on your checkout page:
```html title="checkout.html"
@@ -113,56 +173,95 @@ Include `monei.js` on your checkout page by adding the script tag to the `head`
-
+
```
-You need to provide a `paymentId` (obtained in [step 1](#1-create-a-payment-server-side)). You can also provide additional parameters like `customer.email`. Check all available [parameters](/monei-js/reference.md#confirmpayment-function).
+Use the `paymentId` obtained in Step 1 to call `monei.confirmPayment`. You can also provide additional parameters like `customer.email`. Check all available [parameters](/monei-js/reference/#confirmpayment-function).
```js title="client.js"
-// Handle form submission.
+// Get the paymentId passed from your server
+const paymentId = '{{payment_id}}'; // Replace with the actual paymentId
+
const paymentForm = document.getElementById('payment-form');
const paymentButton = document.getElementById('payment-button');
+
paymentForm.addEventListener('submit', function (event) {
event.preventDefault();
paymentButton.disabled = true;
+
monei
- .confirmPayment({paymentId: '{{payment_id}}'})
+ .confirmPayment({paymentId: paymentId}) // Pass the paymentId here
.then(function (result) {
paymentButton.disabled = false;
- // At this moment you can show a customer the payment result
- // But you should always rely on the result passed to the callback endpoint on your server
- // to update the order status
- console.log(result);
- if (result.status === 'SUCCEEDED') {
+ // This result reflects the immediate outcome of the modal interaction (e.g., user closed, initial success).
+ // Always rely on the webhook (Step 3) for the definitive final payment status.
+ console.log('Payment confirmation result:', result);
+ if (result.status === 'SUCCEEDED' || result.status === 'PENDING') {
+ // Optionally, inform the user that payment is processing.
handleResult(result);
} else {
+ // Handle errors like user cancellation or immediate failures.
handleError(result);
}
})
.catch(function (error) {
paymentButton.disabled = false;
- console.log(error);
+ console.error('Error confirming payment:', error);
+ // Handle network errors or other issues.
});
});
+
+function handleResult(result) {
+ // Redirect to a success/pending page or update UI.
+ // Remember: Final confirmation comes via webhook.
+ console.log('Handling result:', result);
+ alert('Payment status: ' + result.status + '. Waiting for final confirmation.');
+}
+
+function handleError(result) {
+ // Show error message to the user.
+ console.error('Handling error:', result);
+ alert('Payment failed or was cancelled. Status: ' + result.status);
+}
```
-After the form is submitted MONEI will automatically show a popup window with a payment page to collect payment details and then a 3d secure confirmation screen (if needed)
+After the form is submitted, MONEI automatically shows a pop-up window with a payment page to collect payment details and handle any necessary 3D Secure confirmation.
-:::note
-As an alternative process you can redirect your customer to `payment.nextAction.redirectUrl` on the server-side. Check our [prebuilt payment page guide](integrations/use-prebuilt-payment-page.mdx)
+:::note Alternative: Prebuilt Page
+If you prefer redirecting the customer instead of using an on-site modal, see the [Prebuilt Payment Page guide](/integrations/use-prebuilt-payment-page.mdx).
:::
-### 3. An asynchronous request is sent to your server.
+### 3. Process Webhook Notification (Server-side)
-MONEI will notify you about the payment status by sending an HTTP POST request to the `callbackUrl`. The request body will contain full [payment object](/apis/rest/schemas/payment/) in JSON format.
+MONEI sends the final, authoritative payment status via an asynchronous HTTP POST request to the `callbackUrl` you provided in Step 1. The request body contains the full [Payment object](/apis/rest/schemas/payment/) in JSON format.
-This ensures that you get the payment status even when customer closed the browser window or lost internet connection.
+This webhook ensures you get the definitive status even if the customer closes their browser prematurely.
-The request also contains a `MONEI-Signature` header. [Verify this signature](guides/verify-signature.mdx) to confirm that received request is sent from MONEI.
+**Crucially, you must:**
-To acknowledge receipt of the request, your endpoint must return a `200` HTTP status code to MONEI. All other response codes, including `3xx` codes, indicate to MONEI that you did not receive the event.
+1. **Verify the `MONEI-Signature` header** included in the request. This confirms the webhook genuinely came from MONEI. See the [Verify Signatures guide](/guides/verify-signature.mdx) for implementation details.
+2. **Return a `200 OK` HTTP status code** immediately upon receiving the webhook to acknowledge receipt. Any other status code (including `3xx` redirects) tells MONEI the notification failed.
+
+If MONEI doesn't receive a `200 OK`, it will retry sending the webhook multiple times over several days before marking it as failed.
+
+```json title="Example Webhook Payload (POST to your callbackUrl)"
+{
+ "id": "af6029f80f5fc73a8ad2753eea0b1be0",
+ "amount": 110,
+ "currency": "EUR",
+ "orderId": "14379133960355",
+ "status": "SUCCEEDED", // Or FAILED, CANCELED, EXPIRED etc.
+ "customer": { ... },
+ // ... other payment details ...
+ "createdAt": 1594215339,
+ "updatedAt": 1594215345
+}
+```
-If MONEI does not receive a `200` HTTP status code, the notification attempt is repeated. After multiple failures to send the notification over multiple days, MONEI marks the request as failed and stops trying to send it to your endpoint.
+Once the signature is verified, inspect the `status` field in the Payment object to determine whether to fulfill the order or handle a failure.
diff --git a/docs/integrations/use-prebuilt-payment-page.mdx b/docs/integrations/use-prebuilt-payment-page.mdx
index ba7e073..c44f9bc 100644
--- a/docs/integrations/use-prebuilt-payment-page.mdx
+++ b/docs/integrations/use-prebuilt-payment-page.mdx
@@ -4,7 +4,7 @@ title: Use a prebuilt payment page
description: MONEI Hosted payment page is the simplest way to securely collect payments from your customers with multiple payment methods like Cards, PayPal, Bizum, GooglePay, Apple Pay & Click to Pay among others.
---
-MONEI Hosted Payment Page is the simplest way to securely collect payments from your customers.
+MONEI's Hosted Payment Page offers the simplest, PCI-compliant way to securely collect payments from your customers using various methods.

@@ -18,21 +18,32 @@ MONEI Hosted Payment Page is the simplest way to securely collect payments from
-MONEI's Hosted payment page makes it easy to build a first-class payments experience:
+**Key Features:**
-- **Designed to remove friction** — Real-time card validation with built-in error messaging
-- **Mobile-ready** — Fully responsive design
-- **International** — Supports 13 languages
-- **Multiple payment methods** — Supports [multiple payments methods](https://monei.com/blog/multiple-payment-options/)
-- **Customization and branding** — Customizable logo, buttons and background color
-- **3D Secure** — Supports 3D Secure - SCA verification process
-- **Fraud and compliance** — Simplified PCI compliance and SCA-ready
+- **Designed to remove friction:** Real-time card validation with built-in error messaging.
+- **Mobile-ready:** Fully responsive design.
+- **International:** Supports 13 languages.
+- **Multiple payment methods:** Supports various [payments methods](https://monei.com/blog/multiple-payment-options/).
+- **Customization and branding:** Customizable logo, buttons, and background color via your [MONEI Dashboard](https://dashboard.monei.com/settings/branding).
+- **3D Secure:** Built-in support for SCA verification.
+- **Fraud and compliance:** Simplified PCI compliance and SCA-ready.
You can customize the appearance in your [MONEI Dashboard → Settings → Branding](https://dashboard.monei.com/settings/branding).
-## Integration
+## Before You Begin
-### 1. Create a new payment on your server.
+- You'll need a MONEI account and your API keys (test or live). Find them in your [MONEI Dashboard](https://dashboard.monei.com/settings/api).
+- Use your [test mode keys](testing.md) for integration testing.
+- Ensure relevant [payment methods](/payment-methods/overview.mdx) are enabled in your account settings.
+- You can monitor test payments in your [MONEI Dashboard → Payments](https://dashboard.monei.com/payments) (ensure Test Mode is active).
+
+## Integration Steps
+
+The integration involves creating a payment on your server, redirecting your customer to MONEI's secure page, and handling their return to your site via redirects and webhooks.
+
+### 1. Create Payment (Server-side)
+
+First, make a server-side API call to create a new [Payment object](/apis/rest/schemas/payment/). This registers the payment intent with MONEI.
import TabItem from '@theme/TabItem';
import Tabs from '@theme/Tabs';
@@ -43,21 +54,33 @@ import Tabs from '@theme/Tabs';
values={[
{label: 'cURL', value: 'curl'},
{label: 'Node.js', value: 'node'},
- {label: 'PHP', value: 'php'}
+ {label: 'PHP', value: 'php'},
+ {label: 'Python', value: 'python'}
]}>
```shell script title="POST https://api.monei.com/v1/payments"
-curl --request POST 'https://api.monei.com/v1/payments' \
---header 'Authorization: pk_test_3c140607778e1217f56ccb8b50540e00' \
---header 'Content-Type: application/json' \
+curl --request POST 'https://api.monei.com/v1/payments' \\
+--header 'Authorization: YOUR_API_KEY' \\
+--header 'Content-Type: application/json' \\
--data-raw '{
"amount": 110,
"currency": "EUR",
"orderId": "14379133960355",
"description": "Test Shop - #14379133960355",
"customer": {
- "email": "john.doe@microapps.com"
+ "name": "John Doe",
+ "email": "email@example.com",
+ "phone": "+34666555444"
+ },
+ "billingDetails": {
+ "name": "John Doe",
+ "address": {
+ "country": "ES",
+ "city": "Malaga",
+ "line1": "Fake Street 123",
+ "zip": "29001"
+ }
},
"callbackUrl": "https://example.com/checkout/callback",
"completeUrl": "https://example.com/checkout/complete",
@@ -65,109 +88,204 @@ curl --request POST 'https://api.monei.com/v1/payments' \
}'
```
+(Replace `YOUR_API_KEY` with your actual MONEI API key)
+
```js title="server.js"
-const {Monei} = require('@monei-js/node-sdk');
-const monei = new Monei('pk_test_36cf3e8a15eff3f5be983562ea6b13ec');
-monei.payments.create({
+import {Monei} from '@monei-js/node-sdk';
+
+// Replace YOUR_API_KEY with your actual MONEI API key
+const monei = new Monei('YOUR_API_KEY');
+
+const payment = await monei.payments.create({
amount: 110,
currency: 'EUR',
orderId: '14379133960355',
description: 'Test Shop - #14379133960355',
customer: {
- email: 'john.doe@microapps.com'
+ name: 'John Doe',
+ email: 'email@example.com',
+ phone: '+34666555444'
+ },
+ billingDetails: {
+ name: 'John Doe',
+ address: {
+ country: 'ES',
+ city: 'Malaga',
+ line1: 'Fake Street 123',
+ zip: '29001'
+ }
},
callbackUrl: 'https://example.com/checkout/callback',
completeUrl: 'https://example.com/checkout/complete',
cancelUrl: 'https://example.com/checkout/cancel'
});
+
+// You will need the redirectUrl from the response in the next step
+const redirectUrl = payment.nextAction.redirectUrl;
```
```php title="server.php"
-$monei = new Monei\MoneiClient('pk_test_36cf3e8a15eff3f5be983562ea6b13ec');
-$monei->payments->create([
- 'amount' => 110,
- 'currency' => 'EUR',
- 'orderId' => '14379133960355',
- 'description' => 'Test Shop - #14379133960355',
- 'customer' => [
- 'email' => 'john.doe@microapps.com'
- ],
- 'callbackUrl' => 'https://example.com/checkout/callback',
- 'completeUrl' => 'https://example.com/checkout/complete',
- 'cancelUrl' => 'https://example.com/checkout/cancel'
-]);
+payments->create(
+ new CreatePaymentRequest([
+ 'amount' => 110,
+ 'currency' => 'EUR',
+ 'order_id' => '14379133960355',
+ 'description' => 'Test Shop - #14379133960355',
+ 'customer' => new PaymentCustomer([
+ 'name' => 'John Doe',
+ 'email' => 'email@example.com',
+ 'phone' => '+34666555444'
+ ]),
+ 'billing_details' => new PaymentBillingDetails([
+ 'name' => 'John Doe',
+ 'address' => new Address([
+ 'country' => 'ES',
+ 'city' => 'Malaga',
+ 'line1' => 'Fake Street 123',
+ 'zip' => '29001'
+ ])
+ ]),
+ 'callback_url' => 'https://example.com/checkout/callback',
+ 'complete_url' => 'https://example.com/checkout/complete',
+ 'cancel_url' => 'https://example.com/checkout/cancel'
+ ])
+);
+
+// You will need the redirectUrl from the response in the next step
+$redirectUrl = $payment->getNextAction()->getRedirectUrl();
+?>
+```
+
+
+
+
+```python title="server.py"
+import Monei
+from Monei import CreatePaymentRequest, PaymentCustomer, PaymentBillingDetails, Address
+
+# Replace YOUR_API_KEY with your actual MONEI API key
+monei = Monei.MoneiClient(api_key="YOUR_API_KEY")
+
+payment = monei.payments.create(
+ CreatePaymentRequest(
+ amount=110,
+ currency="EUR",
+ order_id="14379133960355",
+ description="Test Shop - #14379133960355",
+ customer=PaymentCustomer(
+ name="John Doe",
+ email="email@example.com",
+ phone="+34666555444"
+ ),
+ billing_details=PaymentBillingDetails(
+ name="John Doe",
+ address=Address(
+ country="ES",
+ city="Malaga",
+ line1="Fake Street 123",
+ zip="29001"
+ )
+ ),
+ callback_url="https://example.com/checkout/callback",
+ complete_url="https://example.com/checkout/complete",
+ cancel_url="https://example.com/checkout/cancel"
+ )
+)
+
+// You will need the redirectUrl from the response in the next step
+redirect_url = payment.next_action.redirect_url
```
-The following parameters are required:
+**Key Parameters:**
-- **amount** `positive integer` - Amount intended to be collected by this payment. A positive integer representing how much to charge in the smallest currency unit (e.g., 100 cents to charge 1.00 USD)
-- **currency** `string` - Three-letter [ISO currency code](https://en.wikipedia.org/wiki/ISO_4217), in uppercase. Must be a supported currency.
-- **orderId** `string` - An order ID from your system. A unique identifier that can be used to reconcile the payment with your internal system.
-- **completeUrl** `string` - The URL the customer will be directed to after transaction completed (successful or failed).
-- **callbackUrl** `string` - The URL to which a payment result should be sent asynchronously.
-- **cancelUrl** `string` - The URL the customer will be directed to if s/he decided to cancel the payment and return to your website.
+- **amount** `positive integer`: Amount in the smallest currency unit (e.g., 110 for €1.10).
+- **currency** `string`: Three-letter [ISO currency code](https://en.wikipedia.org/wiki/ISO_4217) (e.g., `EUR`).
+- **orderId** `string`: Your unique order identifier.
+- **completeUrl** `string`: Where the customer is redirected **after** attempting payment (success or failure).
+- **callbackUrl** `string`: Your server endpoint URL for asynchronous webhook notifications (crucial for final status).
+- **cancelUrl** `string**: Where the customer is redirected if they click **cancel** or **"Back to shop"\*\*.
Check all available [request parameters](/apis/rest/payments-create/).
-### 2. Redirect the customer to the `redirectUrl` from the response
+The API response includes the `payment.id` and, importantly, `payment.nextAction.redirectUrl`.
+
+### 2. Handle Payment Interaction (Client-side via Redirect)
-In the response from the first request you'll get the following response:
+The API response from Step 1 contains a `nextAction` object with a `redirectUrl`. You **must** redirect your customer's browser to this URL.
-```json
+```json title="Example Partial API Response"
{
- "id": "af6029f80f5fc73a8ad2753eea0b1be0",
- "amount": 110,
- "currency": "EUR",
- "orderId": "84370745531439",
- "description": "Test Shop - #84370745531439",
- "accountId": "aa9333ba-82de-400c-9ae7-087b9f8d2242",
- "livemode": false,
- "status": "PENDING",
- "customer": {
- "email": "john.doe@microapps.com"
- },
+ "id": "af6029f80f5fc73a8ad2753eea0b1be0", // MONEI Payment ID
+ // ... other fields ...
+ "status": "PENDING", // Initial status
"nextAction": {
"type": "CONFIRM",
- "mustRedirect": false,
- "redirectUrl": "https://secure.monei.com/payments/af6029f80f5fc73a8ad2753eea0b1be0"
- },
- "createdAt": 1594215339
+ "mustRedirect": true, // Indicates redirection is needed
+ "redirectUrl": "https://secure.monei.com/payments/af6029f80f5fc73a8ad2753eea0b1be0" // <-- REDIRECT CUSTOMER HERE
+ }
}
```
-Redirect the customer to the `nextAction.redirectUrl` to show him the MONEI Hosted payment page.
+This `redirectUrl` leads the customer to the secure, MONEI-hosted payment page where they will select a payment method and enter their details.
-:::note
-As an alternative process you can confirm the payment by using monei.js on the client-side. In this case your customer does not need to leave your website. Check our [payment modal guide](integrations/use-payment-modal.mdx).
+:::note Alternative: Payment Modal
+Instead of a full page redirect, you can use [`monei.js`](/monei-js/reference/) to present payment options within a modal on your own site. See the [Payment Modal Guide](/integrations/use-payment-modal.mdx) for details.
:::
-### 3. Customer completes the payment
+**Customer Actions:**
-Customer enters the Card information (or other payment information depending on the selected payment method) and goes through the 3D secure verification process (is redirected to the page provided by the issuer bank of the Card for confirmation of the transaction) if required.
+- The customer completes the payment details on the MONEI page.
+- They might undergo 3D Secure verification if required by their bank.
+- After completion, failure, or cancellation, they are redirected back to your site:
+ - To the `completeUrl` if they attempted payment.
+ - To the `cancelUrl` if they explicitly cancelled.
-### 4. Customer is redirected back to your server
+**Important:** The redirect to `completeUrl` **does not** guarantee payment success. You must rely on the webhook (Step 3) for the final status.
-- if customer clicks **"Back to \{\{shop.name}}"** link (you can provide `shop.name` parameter when you create a payment or in the [public business details settings](https://dashboard.monei.com/settings)), s/he is redirected to `cancelUrl`. (Usually this url is the checkout page on your website, where the user had started a checkout process)
-- in any other case the customer is redirected to the `completeUrl` with **payment_id** query parameter. Use [get payment](/apis/rest/payments-get/) endpoint to get the payment status.
+### 3. Process Webhook Notification (Server-side)
-### 5. An asynchronous request is sent to your server
+MONEI sends the final, authoritative payment status via an asynchronous HTTP POST request to the `callbackUrl` you provided in Step 1. The request body contains the full [Payment object](/apis/rest/schemas/payment/) in JSON format.
-MONEI will notify you about the payment status by sending an HTTP POST request to the `callbackUrl`. The request body will contain the full [payment object](/apis/rest/schemas/payment/) in JSON format.
+This webhook is the **only reliable way** to confirm the definitive payment outcome, regardless of customer browser actions or redirects.
-This ensures that you get the payment status even when the customer closed the browser window or lost Internet connection.
+**Crucially, you must:**
-The request also contains a `MONEI-Signature` header. [Verify this signature](guides/verify-signature.mdx) to confirm that the received request is sent from MONEI.
+1. **Verify the `MONEI-Signature` header** included in the request. This confirms the webhook genuinely came from MONEI. See the [Verify Signatures guide](/guides/verify-signature.mdx) for implementation details.
+2. **Return a `200 OK` HTTP status code** immediately upon receiving the webhook to acknowledge receipt. Any other status code tells MONEI the notification failed.
-To acknowledge the receipt of the request, your endpoint must return a `200` HTTP status code to MONEI. All other response codes, including `3xx` codes, indicate to MONEI that you did not receive the event.
+If MONEI doesn't receive a `200 OK`, it will retry sending the webhook.
-If MONEI does not receive a `200` HTTP status code, the notification attempt is repeated. After multiple failures to send the notification over multiple days, MONEI marks the request as failed and stops trying to send it to your endpoint.
+Once the signature is verified, inspect the `status` field in the Payment object (`SUCCEEDED`, `FAILED`, `CANCELED`, etc.) to determine whether to fulfill the order or handle the failure.
+
+```json title="Example Webhook Payload (POST to your callbackUrl)"
+{
+ "id": "af6029f80f5fc73a8ad2753eea0b1be0",
+ "amount": 110,
+ // ... other fields ...
+ "status": "SUCCEEDED", // <-- Check this for final status
+ "createdAt": 1594215339,
+ "updatedAt": 1594215345
+}
+```
diff --git a/docs/integrations/use-qr-payments.mdx b/docs/integrations/use-qr-payments.mdx
index 9d748a9..f11bbbd 100644
--- a/docs/integrations/use-qr-payments.mdx
+++ b/docs/integrations/use-qr-payments.mdx
@@ -4,11 +4,11 @@ title: Use QR code payments with MONEI Pay
description: MONEI Pay is the simplest way to securely accept in-store contactless payments and support all the most popular payment methods with QR codes.
---
-Accept in-store contactless payments and support all the most popular payment methods with QR codes.
+Accept in-store contactless payments and support all the most popular payment methods with QR codes using MONEI Pay.
-## Getting started
+## Getting started with MONEI Pay App
-MONEI Pay is the best way to accept payments in-store.
+MONEI Pay provides the easiest way to accept payments in-store using a dedicated app.
-Login into [pay.monei.com](https://pay.monei.com/) with your same credentials you use to access [dashboard.monei.com](https://dashboard.monei.com/) and start creating payments.
-
-You can also download the **MONEI Pay** app to create QR codes on the go.
+Login into [pay.monei.com](https://pay.monei.com/) or download the **MONEI Pay** app using your MONEI Dashboard credentials to start creating QR payment codes.
-## Demo
+## Creating QR Payments Programmatically
+
+This section covers how to generate QR payment codes using the MONEI API for custom integrations.
import {ArrowRightIcon} from '@heroicons/react/24/outline';
@@ -49,9 +49,18 @@ import {ArrowRightIcon} from '@heroicons/react/24/outline';
-## Create QR payments programmatically
+## Before You Begin
+
+- You'll need a MONEI account and your API keys (test or live). Find them in your [MONEI Dashboard](https://dashboard.monei.com/settings/api).
+- Use your [test mode keys](testing.md) for integration testing.
+- Ensure relevant [payment methods](/payment-methods/overview.mdx) (like Bizum, Card payments via QR) are enabled in your account settings.
+- You can monitor test payments in your [MONEI Dashboard → Payments](https://dashboard.monei.com/payments) (ensure Test Mode is active).
+
+## Integration Steps
-### 1. Create a new payment on your server.
+### 1. Create Payment (Server-side)
+
+Create a [Payment](/apis/rest/schemas/payment/) on your server with an amount and currency.
import TabItem from '@theme/TabItem';
import Tabs from '@theme/Tabs';
@@ -62,13 +71,14 @@ import Tabs from '@theme/Tabs';
values={[
{label: 'cURL', value: 'curl'},
{label: 'Node.js', value: 'node'},
- {label: 'PHP', value: 'php'}
+ {label: 'PHP', value: 'php'},
+ {label: 'Python', value: 'python'}
]}>