3 |
4 |
5 | # Developer API Demo
6 | A simple web app that showcases Lithic's [Developer API](https://docs.lithic.com) implemented with Vue and Express. Download the project and run it locally or check it out at [https://demo.lithic.com/](https://demo.lithic.com/)
7 |
8 | The Lithic developer API provides a predictable and programmatic interface to create and configure virtual cards. Get real-time payment data, programmatically issue cards, configure card permissions, and set spend limits all through the API.
9 |
10 | ## Overview
11 | The project is a simplified recreation of the main [Lithic](https://lithic.com) site in Vue with an Express backend. The right sidebar prints every API call the project makes to the Developer API to illustrate what is going on for every page. This demo covers the following endpoints:
12 | | Endpoints | Description |
13 | | -------------- | ----------- |
14 | | /card | Create, update, and fetch virtual cards with limits, vendor locks, and more. |
15 | | /embed/card | To comply with Payment Card Industry Data Security Standards (PCI DSS), retrieving a card's PAN number, expiration date, and CVV requires rendering an iframe, which we demonstrate here. Learn more about how we stay PCI compliant in our [documentation](https://docs.lithic.com/pci-compliance.html) |
16 | | /transaction | Fetch transactions from all your virtual cards. |
17 | | /fundingsource | Create and fetch funding cards and accounts. |
18 | | /simulate | While using our sandbox, use our `/simulate` endpoint to create transactions and modify their states to further emulate real-world interaction. |
19 |
20 | ## Running the Project
21 | You can run the project locally or in Docker containers. To start, first update the `.env` file with your [sandbox API key](https://lithic.com/account). This step is optional but will persist your api-key.
22 |
23 | ### Running Locally
24 |
25 | Install dependencies with npm:
26 | ```
27 | npm install
28 | ```
29 | The demo uses both Vue and Express which can be run locally using:
30 | ```
31 | npm run serve
32 | ```
33 | Alternatively, you can run in separate windows
34 | ```
35 | npm run serve:app
36 | ```
37 | ```
38 | npm run serve:server
39 | ```
40 | to run the two processes separately.
41 |
42 | ### Running in Docker
43 | Launch the docker containers using docker-compose.
44 | ```
45 | docker-compose up -d
46 | ```
47 |
48 | ## Images
49 |
50 | ### Home Page
51 | 
52 |
53 | ### Cards Page
54 | 
55 |
56 | ### Card Page
57 | 
58 |
59 | ### Transactions Page
60 | 
61 |
--------------------------------------------------------------------------------
/babel.config.js:
--------------------------------------------------------------------------------
1 | module.exports = {
2 | presets: ["@vue/cli-plugin-babel/preset"],
3 | };
4 |
--------------------------------------------------------------------------------
/docker-compose.yml:
--------------------------------------------------------------------------------
1 | version: '3'
2 |
3 | services:
4 | frontend:
5 | build:
6 | context: ./
7 | dockerfile: Dockerfile
8 | target: nginx-stage
9 | args:
10 | - VUE_APP_API=$VUE_APP_API
11 | - VUE_APP_API_KEY=$VUE_APP_API_KEY
12 | ports: ["8080:80"]
13 |
14 | backend:
15 | build:
16 | context: ./
17 | dockerfile: Dockerfile
18 | target: node-stage
19 | args:
20 | - VUE_APP_API=$VUE_APP_API
21 | - VUE_APP_API_KEY=$VUE_APP_API_KEY
22 | ports: ["3000:3000"]
23 | expose:
24 | - "3000"
25 | command: 'node server'
26 |
--------------------------------------------------------------------------------
/docker/nginx.conf:
--------------------------------------------------------------------------------
1 | user nginx;
2 | worker_processes 1;
3 | error_log /var/log/nginx/error.log warn;
4 | pid /var/run/nginx.pid;
5 | events {
6 | worker_connections 1024;
7 | }
8 | http {
9 | include /etc/nginx/mime.types;
10 | default_type application/octet-stream;
11 | log_format main '$remote_addr - $remote_user [$time_local] "$request" '
12 | '$status $body_bytes_sent "$http_referer" '
13 | '"$http_user_agent" "$http_x_forwarded_for"';
14 | access_log /var/log/nginx/access.log main;
15 | sendfile on;
16 | keepalive_timeout 65;
17 | server {
18 | listen 80;
19 | server_name localhost;
20 | location / {
21 | root /app;
22 | index index.html;
23 | try_files $uri $uri/ /index.html;
24 | }
25 | error_page 500 502 503 504 /50x.html;
26 | location = /50x.html {
27 | root /usr/share/nginx/html;
28 | }
29 | }
30 | }
31 |
--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "privacy-api-demo",
3 | "version": "0.1.0",
4 | "private": true,
5 | "scripts": {
6 | "serve": "npm-run-all -p serve:**",
7 | "serve:app": "vue-cli-service serve",
8 | "serve:server": "node server",
9 | "build": "vue-cli-service build",
10 | "lint": "vue-cli-service lint",
11 | "lint:fix": "vue-cli-service lint --fix"
12 | },
13 | "dependencies": {
14 | "axios": "^0.21.1",
15 | "body-parser": "^1.19.0",
16 | "core-js": "^3.6.5",
17 | "cors": "^2.8.5",
18 | "crypto-js": "^4.0.0",
19 | "dotenv": "^8.2.0",
20 | "express": "^4.17.1",
21 | "install": "^0.13.0",
22 | "lodash": "^4.17.19",
23 | "npm": "^6.14.7",
24 | "npm-run-all": "^4.1.5",
25 | "vue": "^2.6.11",
26 | "vue-chat-scroll": "^1.4.0",
27 | "vue-js-modal": "^2.0.0-rc.6",
28 | "vue-js-toggle-button": "^1.3.3",
29 | "vue-json-pretty": "^1.9.4",
30 | "vue-router": "^3.3.4",
31 | "vue-spinner": "^1.0.4",
32 | "vue-toastr": "^2.1.2",
33 | "vuex": "^3.5.1"
34 | },
35 | "devDependencies": {
36 | "@vue/cli-plugin-babel": "~4.4.0",
37 | "@vue/cli-plugin-eslint": "~4.4.0",
38 | "@vue/cli-service": "~4.4.0",
39 | "babel-eslint": "^10.1.0",
40 | "eslint": "^6.7.2",
41 | "eslint-config-prettier": "^6.11.0",
42 | "eslint-plugin-prettier": "^3.1.4",
43 | "eslint-plugin-vue": "^6.2.2",
44 | "sass": "^1.26.10",
45 | "sass-loader": "^9.0.2",
46 | "vue-template-compiler": "^2.6.11"
47 | },
48 | "eslintConfig": {
49 | "root": true,
50 | "env": {
51 | "node": true
52 | },
53 | "extends": [
54 | "plugin:vue/essential",
55 | "plugin:prettier/recommended",
56 | "eslint:recommended"
57 | ],
58 | "parserOptions": {
59 | "parser": "babel-eslint"
60 | },
61 | "rules": {}
62 | },
63 | "prettier": {},
64 | "browserslist": [
65 | "> 1%",
66 | "last 2 versions",
67 | "not dead"
68 | ]
69 | }
70 |
--------------------------------------------------------------------------------
/public/Lithic-light-logo-mark.svg:
--------------------------------------------------------------------------------
1 |
12 |
--------------------------------------------------------------------------------
/public/browserconfig.xml:
--------------------------------------------------------------------------------
1 |
2 | 
5 |