https://github.com/monei/monei-payments-demo
Sample store accepting universal payments on the web with MONEI
https://github.com/monei/monei-payments-demo
accept-payments card-payments javascript monei monei-account monei-components monei-payments node payment-methods payment-request payments
Last synced: about 1 month ago
JSON representation
Sample store accepting universal payments on the web with MONEI
- Host: GitHub
- URL: https://github.com/monei/monei-payments-demo
- Owner: MONEI
- Created: 2020-10-06T15:10:27.000Z (over 4 years ago)
- Default Branch: master
- Last Pushed: 2024-08-08T03:26:16.000Z (9 months ago)
- Last Synced: 2025-04-15T03:55:46.064Z (about 1 month ago)
- Topics: accept-payments, card-payments, javascript, monei, monei-account, monei-components, monei-payments, node, payment-methods, payment-request, payments
- Language: Handlebars
- Homepage: https://payments-demo.monei.com
- Size: 2.7 MB
- Stars: 6
- Watchers: 2
- Forks: 2
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# MONEI Payments Demo
This demo features a sample e-commerce store that uses [MONEI Components](https://docs.monei.com/docs/monei-js-overview) and the [Payments API](https://docs.monei.com/api/#tag/Payments) 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](https://payments-demo.monei.com).**
## Overview
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](https://docs.monei.com/docs/payment-methods/card/) 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](https://ngrok.com/) is integrated so the app is served locally over HTTPS.
🔧 | **Webhook signing**. We allow for [webhook signature verification](https://docs.monei.com/docs/verify-signature), which is a recommended security practice.
📱 | **Responsive design**. The checkout experience works on all screen sizes.
## Payments Integration with MONEI Components
The frontend code for the demo is in the `public/` directory.
The core logic of the MONEI integration is mostly contained within two files:
1. [`public/javascripts/payment.js`](public/javascript/payment.js) initializes and renders [MONEI Components](https://docs.monei.com/docs/monei-js/reference/) for different payment methods
2. [`server/routes.js`](server/routes.js) defines the routes on the backend that create MONEI payments and receive payment results with the callback.
## Getting Started with Node
You’ll need the following:
- [Node.js](http://nodejs.org) >=10.0.0
- Modern browser that supports ES6.
- MONEI account to accept payments ([sign up](https://dashboard.monei.com/?action=signUp) for free).
### Running the Node Server
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](https://dashboard.monei.com/settings/api) and. These environment variables are loaded and used in [`server/config.js`](/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://.ngrok.io
Use this URL in your browser to start the demo.
[](https://heroku.com/deploy)