This demo features a sample e-commerce store that uses MONEI Components and the Payments API to illustrate how to accept Credit Card, Bizum, PayPal, Apple Pay, Google Pay payments on the web.
You can see this demo app running in test mode on payments-demo.monei.com.
This demo provides an all-in-one example for integrating with MONEI on the web:
| Features | |
|---|---|
| ✨ | Beautiful UI components for Credit Card, Bizum, 4xcard by Cofidis, PayPal, Apple Pay, Google Pay payments. This demo uses pre-built MONEI Components customized to fit the app design, including the Card Input Component which provides real-time validation, formatting, and autofill. |
| 🔐 | Dynamic 3D Secure for Visa and Mastercard. The app automatically handles the correct flow to complete card payments with 3D Secure, whether it’s required by the card. |
| 🚀 | Built-in proxy for local HTTPS and webhooks. Card payments require HTTPS and asynchronous payment methods with redirects rely on webhooks to complete transactions—ngrok is integrated so the app is served locally over HTTPS. |
| 🔧 | Webhook signing. We allow for webhook signature verification, which is a recommended security practice. |
| 📱 | Responsive design. The checkout experience works on all screen sizes. |
The frontend code for the demo is in the public/ directory.
The core logic of the MONEI integration is mostly contained within two files:
public/javascripts/payment.jsinitializes and renders MONEI Components for different payment methodsserver/routes.jsdefines the routes on the backend that create MONEI payments and receive payment results with the callback.
You’ll need the following:
- Node.js >=10.0.0
- Modern browser that supports ES6.
- MONEI account to accept payments (sign up for free).
Copy the environment variables file from the root of the repository:
cp .env.example .env
Update .env with your own MONEI Account ID and API key and. These environment variables are loaded and used in server/config.js.
Install dependencies using npm:
npm install
Start the local server:
npm run start
Lastly, you will see the ngrok URL to serve our app via HTTPS. For example:
https://<example>.ngrok.io
Use this URL in your browser to start the demo.
