MONEI Payment Request Component gives you a single integration for Apple Pay and Google Pay. Customers see a Google Pay or an Apple Pay button, depending on what their device and browser combination supports.
Apple Pay with the Payment Request Component requires macOS 10.12.1+ or iOS 10.1+.
This page explains how to add Payment Request Component to your payment page. To accept Apple Pay and Google Pay payments you need to have at least one configured credit card processor.
To configure credit card processors go to MONEI Dashboard → Settings → Payment Methods → Credit card payments.
Before you start, you need to:
- Add a payment method to your browser. For example, you can save a card in Chrome, or add a card to your Wallet for Safari.
- Serve your application over HTTPS. This is a requirement both in development and in production. One way to get up and running is to use a service like ngrok.
- Verify your domain with Apple Pay, both in development and production.
To test your integration:
- Use your test mode Account ID and API Key.
- You can use any real credit card details, you will not be charged in the test mode (credit card details are automatically replaced with the test card).
- You can check the status of the test payment in your MONEI Dashboard → Payments (in test mode).
Download this domain association file and host it at
/.well-known/apple-developer-merchantid-domain-associationon your site.
For example, if you’re registering https://example.com, make that file available at https://example.com/.well-known/apple-developer-merchantid-domain-association.
Next, contact MONEI Support Team register your domain with Apple.
1. Create a Payment
Create a 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.
The following parameters are required:
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)
string- Three-letter ISO currency code, in uppercase. Must be a supported currency.
string- An order ID from your system. A unique identifier that can be used to reconcile the payment with your internal system.
string- The URL to which a payment result should be sent asynchronously.
Payment Request Component is also available as React and Vue component. Check out our examples.
Check all available request parameters.
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.
2. Add Payment Request Component to your payment page
monei.js on your checkout page by adding the script tag to the
head of your HTML file.
Add MONEI Payment Request Component to your payment page. Create empty DOM node (container) with unique ID in your payment form.
Initialize Payment Request Component
Check MONEI JS Reference for more options.
3. Confirm the payment
To complete the payment you need to confirm it using monei.js confirmPayment function
You need to provide a
paymentId (obtained in step 1) and
paymentToken generated with Payment Request Component. You can also provide additional parameters like
customer.email. Check all available parameters.
As an alternative process you can submit generated
paymentToken to your sever and then confirm payment on the server-side.
MONEI will notify you about a payment status by sending an HTTP POST request to the
callbackUrl. The request body will contain full payment object in JSON format.
This ensures that you get the payment status even when customer closed the browser window or lost internet connection.
The request also contains a
MONEI-Signature header. Verify this signature to confirm that received request is sent from MONEI.
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 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.