This is an example account funding app that outlines an end-to-end integration with Plaid. This app focusses on the Europe specific Payment Initiation product.
Plaid Pattern apps are provided for illustrative purposes and are not meant to be run as production applications.
- Docker Version 2.0.0.3 (31259) or higher, installed, running, and signed in. If you're on Windows, check out this link to get set up in WSL.
- Plaid API keys - sign up for a free Sandbox account if you don't already have one
- Sign up for a free ngrok account to obtain an authtoken
Note: We recommend running these commands in a unix terminal. Windows users can use a WSL terminal to access libraries like make.
-
Clone the repo.
git clone https://github.com/plaid/payment-initiation-pattern-app.git cd payment-initiation-pattern-app -
Create the
.envfile.cp .env.template .env
- Update the
.envfile with your Plaid API keys and, if you are testing OAuth, OAuth redirect uri (in sandbox this ishttp://localhost:3002/oauth-link).
- Update the
-
If you have entered an OAuth redirect uri in the .env file, you will also need to configure an allowed redirect URI for your client ID through the Plaid developer dashboard.
-
Update the
ngrok.ymlfile in the ngrok folder with your ngrok authtoken. -
Verify Payment Initiation is enabled for your client ID through the Plaid Developer Dashboard in Sandbox and/or Production). If it is not enabled, contact your Plaid Account Executive or Account Manager to enable your client ID for the Payment Initiation product.
-
Start the services. The first run may take a few minutes as Docker images are pulled/built for the first time.
make start
-
Open http://localhost:3002 in a web browser.
-
View the logs
make logs
-
When you're finished, stop the services.
make stop
All available commands can be seen by calling make help.
As a modern full-stack application, Pattern consists of multiple services handling different segments of the stack:
clientruns a React-based single-page web frontendserverruns an application back-end server using NodeJS and Expressdatabaseruns a PostgreSQL databasengrokexposes a ngrok tunnel from your local machine to the Internet to receive webhooks
We use Docker Compose to orchestrate these services. As such, each individual service has its own Dockerfile, which Docker Compose reads when bringing up the services.
More information about the individual services is given below.
The Pattern web client is written in JavaScript using React. It presents an example account funding workflow to the user, including an implementation of OAuth. The app runs on port 3002 by default, although you can modify this in docker-compose.yml.
Aside from websocket listeners (see below), all HTTP calls to the Pattern server are defined in src/services/api.js.
The Pattern server is configured to send a message over a websocket whenever it receives a webhook from Plaid. On the client side websocket listeners are defined in src/components/Sockets.jsx that wait for these messages and update data in real time accordingly.
The application server is written in JavaScript using Node.js and Express. It interacts with the Plaid API via the Plaid Node SDK, and with the database using node-postgres. While we've used Node for the reference implementation, the concepts shown here will apply no matter what language your backend is written in.
For webhooks to work, the server must be publicly accessible on the internet. For development purposes, this application uses ngrok to accomplish that. The ngrok session is only valid for 2 hours and the server must be re-started after that.
A redirect_uri parameter is included in the linkTokenCreate call and set in this sample app to the PLAID_SANDBOX_REDIRECT_URI you have set in the .env file (http://localhost:3002/oauth-link). This is the page that the user will be redirected to upon completion of the OAuth flow at their OAuth institution. You will also need to configure http://localhost:3002/oauth-link as an allowed redirect URI for your client ID through the Plaid developer dashboard.
To test the OAuth flow you may use the Chrome browser to simulate a mobile device. Learn how to do this under "Mobile Device Viewport Mode" here: https://developer.chrome.com/docs/devtools/device-mode/
If you want to test OAuth in Production, you need to use https and set PLAID_PRODUCTION_REDIRECT_URI=https://localhost:3002/oauth-link in .env. In order to run your localhost on https, you will need to create a self-signed certificate and add it to the client root folder. MacOS users can use the following instructions to do this. Note that self-signed certificates should be used for testing purposes only, never for actual deployments. Windows users can use these instructions below.
If you are using MacOS, in your terminal, change to the client folder:
cd clientUse homebrew to install mkcert:
brew install mkcertThen create your certificate for localhost:
mkcert -install
mkcert localhostThis will create a certificate file localhost.pem and a key file localhost-key.pem inside your client folder.
Then in the package.json file in the client folder, replace this line on line 26
"start": "PORT=3002 react-scripts start",with this line instead:
"start": "PORT=3002 HTTPS=true SSL_CRT_FILE=localhost.pem SSL_KEY_FILE=localhost-key.pem react-scripts start",Finally, in the wait-for-client.sh file in the server folder, replace this line on line 6
while [ "$(curl -s -o /dev/null -w "%{http_code}" -m 1 localhost:3002)" != "200" ]with this line instead:
while [ "$(curl -s -o /dev/null -w "%{http_code}" -m 1 https://localhost:3002)" != "200" ]After starting up the Pattern sample app, you can now view it at https://localhost:3002.
If you are on a Windows machine, in the package.json file in the client folder, replace this line on line 26
"start": "PORT=3002 react-scripts start",with this line instead:
"start": "PORT=3002 HTTPS=true react-scripts start",Then, in the wait-for-client.sh file in the server folder, replace this line on line 6
while [ "$(curl -s -o /dev/null -w "%{http_code}" -m 1 localhost:3002)" != "200" ]with this line instead:
while [ "$(curl -s -o /dev/null -w "%{http_code}" -m 1 https://localhost:3002)" != "200" ]After starting up the Pattern sample app, you can now view it at https://localhost:3002. Your browser will alert you with an invalid certificate warning; click on "advanced" and proceed.
The node debugging port (9229) is exposed locally on port 9229.
If you are using Visual Studio Code as your editor, you can use the Docker: Attach to Server launch configuration to interactively debug the server while it's running. See the VS Code docs for more information.
The database is a PostgreSQL instance running inside a Docker container.
Port 5432 is exposed to the Docker host, so you can connect to the DB using the tool of your choice. Username and password can be found in docker-compose.yml.
To clear all the data in the database, enter into the terminal:
make clear-dbThe *.sql scripts in the init directory are used to initialize the database if the data directory is empty (i.e. on first run, after manually clearing the db by running make clear-db, or after modifying the scripts in the init directory).
See the create.sql initialization script to see some brief notes for and the schemas of the tables used in this application.
This demo includes ngrok, a utility that creates a secure tunnel between your local machine and the outside world. We're using it here to expose the local webhooks endpoint to the internet.
Browse to localhost:4040 to see the ngrok dashboard. This will show any traffic that gets routed through the ngrok URL.
Do NOT use ngrok in production! It's only included here as a convenience for local development and is not meant to be a production-quality solution.
Don’t want to use ngrok? As long as you serve the app with an endpoint that is publicly exposed, all the Plaid webhooks will work.
ngrok's free account has a session limit of 2 hours. To fully test out some of the transaction webhook workflows, you will need to get a more persistent endpoint as noted above when using the Production environment.
This image is a copy of the Docker Hub image wernight/ngrok. We've copied it here to allow us to more closely version it and to make changes as needed.
- https://hub.docker.com/r/wernight/ngrok/dockerfile
- https://github.com/wernight/docker-ngrok/tree/202c4692cbf1bbfd5059b6ac56bece42e90bfb82
View the logs with the following Docker command:
make logsView Plaid server logs on the Dashboard.
- For an overview of the Plaid platform and products, refer to this Quickstart guide.
- Check out this introduction to Payment Initiation.
- Find comprehensive information on Plaid API endpoints in the API documentation.
- Questions? Please head to the Help Center or open a Support ticket.
Plaid Pattern is a demo app that is intended to be used only for the purpose of demonstrating how you can integrate with Plaid. You are solely responsible for ensuring the correctness, legality, security, privacy, and compliance of your own app and Plaid integration. The Pattern code is licensed under the MIT License and is provided as-is and without warranty of any kind. Plaid Pattern is provided for demonstration purposes only and is not intended for use in production environments.