├── .gitattributes ├── src ├── client │ ├── js │ │ ├── constants.js │ │ ├── index.js │ │ └── next-step.js │ ├── favicon.ico │ ├── media │ │ ├── favicon.png │ │ ├── rocketrides.png │ │ ├── swirly-lights.jpg │ │ ├── swirly-background.jpg │ │ ├── checkmark-white.svg │ │ ├── arrow-white.svg │ │ ├── arrow-green.svg │ │ ├── arrow-purple.svg │ │ ├── Icon--error.svg │ │ ├── Icon--unverified.svg │ │ ├── Icon--block.svg │ │ ├── Icon--verified.svg │ │ ├── Icon--succeeded.svg │ │ ├── cancel.svg │ │ ├── Icon--canceled.svg │ │ ├── external.svg │ │ ├── Icon--pending.svg │ │ ├── avatar-large.svg │ │ ├── Icon--processing.svg │ │ ├── avatar-small.svg │ │ ├── Icon--consent_declined.svg │ │ ├── Icon--requires_action.svg │ │ ├── Icon--requires_input.svg │ │ ├── stripe.svg │ │ ├── stripe-grey.svg │ │ ├── rocketrides.svg │ │ └── rocketrides-green.svg │ ├── .eslintrc.js │ ├── 404.html │ ├── css │ │ ├── index.css │ │ ├── normalize.css │ │ └── global.css │ ├── next-step.html │ └── index.html ├── test │ ├── utils.test.js │ └── store.test.js ├── package.json └── server │ └── server.js ├── screenshots ├── pages.png ├── demo_app.gif ├── succeeded.png ├── landing_page.png └── requires_action.png ├── identity-verification.png ├── env.example ├── .stylelintrc ├── .gitignore ├── LICENSE └── README.md /.gitattributes: -------------------------------------------------------------------------------- 1 | yarn.lock -diff 2 | package-lock.json -diff 3 | -------------------------------------------------------------------------------- /src/client/js/constants.js: -------------------------------------------------------------------------------- 1 | window.stripeSample = window.stripeSample || {}; -------------------------------------------------------------------------------- /screenshots/pages.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/stripe-archive/identity-verification/HEAD/screenshots/pages.png -------------------------------------------------------------------------------- /src/client/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/stripe-archive/identity-verification/HEAD/src/client/favicon.ico -------------------------------------------------------------------------------- /identity-verification.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/stripe-archive/identity-verification/HEAD/identity-verification.png -------------------------------------------------------------------------------- /screenshots/demo_app.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/stripe-archive/identity-verification/HEAD/screenshots/demo_app.gif -------------------------------------------------------------------------------- /screenshots/succeeded.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/stripe-archive/identity-verification/HEAD/screenshots/succeeded.png -------------------------------------------------------------------------------- /screenshots/landing_page.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/stripe-archive/identity-verification/HEAD/screenshots/landing_page.png -------------------------------------------------------------------------------- /src/client/media/favicon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/stripe-archive/identity-verification/HEAD/src/client/media/favicon.png -------------------------------------------------------------------------------- /env.example: -------------------------------------------------------------------------------- 1 | STATIC_DIR="./client" 2 | STRIPE_SECRET_KEY="sk_live_12345_replace_me" 3 | STRIPE_PUBLISHABLE_KEY="pk_live_12345_replace_me" -------------------------------------------------------------------------------- /screenshots/requires_action.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/stripe-archive/identity-verification/HEAD/screenshots/requires_action.png -------------------------------------------------------------------------------- /src/client/media/rocketrides.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/stripe-archive/identity-verification/HEAD/src/client/media/rocketrides.png -------------------------------------------------------------------------------- /src/client/media/swirly-lights.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/stripe-archive/identity-verification/HEAD/src/client/media/swirly-lights.jpg -------------------------------------------------------------------------------- /src/client/media/swirly-background.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/stripe-archive/identity-verification/HEAD/src/client/media/swirly-background.jpg -------------------------------------------------------------------------------- /src/client/media/checkmark-white.svg: -------------------------------------------------------------------------------- 1 | Checkmark -------------------------------------------------------------------------------- /.stylelintrc: -------------------------------------------------------------------------------- 1 | { 2 | "plugins": [ 3 | "stylelint-no-unsupported-browser-features" 4 | ], 5 | "rules": { 6 | "plugin/no-unsupported-browser-features": [true, { 7 | "browsers": ["> 1%", "Last 2 versions", "not op_mini all"], 8 | "ignore": ["rem"], 9 | "severity": "warning" 10 | }] 11 | } 12 | } 13 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | .env 2 | .env.* 3 | .DS_Store 4 | .vscode 5 | 6 | # Node files 7 | node_modules/ 8 | 9 | # Ruby files 10 | Gemfile.lock 11 | 12 | # Python files 13 | __pycache__ 14 | venv 15 | 16 | # PHP files 17 | vendor 18 | logs 19 | 20 | # Java files 21 | .settings 22 | target/ 23 | .classpath 24 | .factorypath 25 | .project 26 | 27 | # Jest 28 | coverage/ 29 | -------------------------------------------------------------------------------- /src/client/media/arrow-white.svg: -------------------------------------------------------------------------------- 1 | Icon -------------------------------------------------------------------------------- /src/client/media/arrow-green.svg: -------------------------------------------------------------------------------- 1 | Icon -------------------------------------------------------------------------------- /src/client/media/arrow-purple.svg: -------------------------------------------------------------------------------- 1 | Icon -------------------------------------------------------------------------------- /src/client/media/Icon--error.svg: -------------------------------------------------------------------------------- 1 | 2 | -------------------------------------------------------------------------------- /src/client/media/Icon--unverified.svg: -------------------------------------------------------------------------------- 1 | 2 | -------------------------------------------------------------------------------- /src/client/.eslintrc.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | "env": { 3 | "browser": true, 4 | "es6": false 5 | }, 6 | "extends": [ 7 | "eslint:recommended", 8 | "plugin:compat/recommended", 9 | ], 10 | "globals": { 11 | "Atomics": "readonly", 12 | "SharedArrayBuffer": "readonly", 13 | "io": "readonly", 14 | }, 15 | "parserOptions": { 16 | "ecmaVersion": 2015 17 | }, 18 | "rules": { 19 | "compat/compat": "warn", 20 | "no-unused-vars": "warn" 21 | } 22 | }; 23 | -------------------------------------------------------------------------------- /src/client/media/Icon--block.svg: -------------------------------------------------------------------------------- 1 | 2 | -------------------------------------------------------------------------------- /src/client/media/Icon--verified.svg: -------------------------------------------------------------------------------- 1 | 2 | -------------------------------------------------------------------------------- /src/client/media/Icon--succeeded.svg: -------------------------------------------------------------------------------- 1 | 2 | -------------------------------------------------------------------------------- /src/test/utils.test.js: -------------------------------------------------------------------------------- 1 | const shouldGetUpdatedVerification = require('../server/utils').shouldGetUpdatedVerification; 2 | 3 | describe('utils', () => { 4 | it('shouldGetUpdatedVerification', () => { 5 | expect(shouldGetUpdatedVerification()).toBe(true); 6 | expect(shouldGetUpdatedVerification({status: 'succeeded'})).toBe(false); 7 | expect(shouldGetUpdatedVerification({status: 'canceled'})).toBe(false); 8 | expect(shouldGetUpdatedVerification({status: 'pending'})).toBe(true); 9 | expect(shouldGetUpdatedVerification({error: {type: 'invalid_request_error'}})).toBe(false); 10 | }); 11 | }); 12 | -------------------------------------------------------------------------------- /src/client/media/cancel.svg: -------------------------------------------------------------------------------- 1 | 2 | -------------------------------------------------------------------------------- /src/client/media/Icon--canceled.svg: -------------------------------------------------------------------------------- 1 | 2 | -------------------------------------------------------------------------------- /src/client/media/external.svg: -------------------------------------------------------------------------------- 1 | 2 | -------------------------------------------------------------------------------- /src/client/media/Icon--pending.svg: -------------------------------------------------------------------------------- 1 | 2 | -------------------------------------------------------------------------------- /src/client/media/avatar-large.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/client/media/Icon--processing.svg: -------------------------------------------------------------------------------- 1 | 2 | -------------------------------------------------------------------------------- /src/client/media/avatar-small.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/client/media/Icon--consent_declined.svg: -------------------------------------------------------------------------------- 1 | 2 | -------------------------------------------------------------------------------- /src/client/media/Icon--requires_action.svg: -------------------------------------------------------------------------------- 1 | 2 | -------------------------------------------------------------------------------- /src/client/media/Icon--requires_input.svg: -------------------------------------------------------------------------------- 1 | 2 | -------------------------------------------------------------------------------- /src/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "stripe-identity-verification", 3 | "version": "5.0.0", 4 | "description": "How to verify a person's identity", 5 | "main": "index.js", 6 | "scripts": { 7 | "debug": "node --inspect server/server.js", 8 | "dev": "nodemon server/server.js", 9 | "start": "node server/server.js", 10 | "test": "jest" 11 | }, 12 | "author": "@bz-stripe", 13 | "license": "ISC", 14 | "dependencies": { 15 | "body-parser": "^1.19.0", 16 | "dotenv": "^8.0.0", 17 | "ejs": "^3.1.6", 18 | "eslint": "^6.8.0", 19 | "eslint-plugin-compat": "^3.5.1", 20 | "express": "^4.17.1", 21 | "jest": "^24.9.0", 22 | "mockdate": "^2.0.5", 23 | "node-fetch": "^2.6.1", 24 | "nodemon": "^2.0.7", 25 | "stripe": "^7.1.0", 26 | "stylelint": "^13.7.1", 27 | "stylelint-no-unsupported-browser-features": "^4.0.0", 28 | "uuid": "^3.3.3" 29 | }, 30 | "resolutions": { 31 | "node-notifier": "^8.0.1" 32 | } 33 | } 34 | -------------------------------------------------------------------------------- /src/client/404.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Stripe Identity Verification 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 |
16 |
17 |
18 | 19 |
20 |
21 |

Oops, page not found

22 |

HTML 404

23 |
24 | 25 | 26 | 27 |
28 |
29 | 30 | 31 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | The MIT License (MIT) 2 | 3 | Copyright (c) 2019- Stripe, Inc. (https://stripe.com) 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. 22 | -------------------------------------------------------------------------------- /src/client/media/stripe.svg: -------------------------------------------------------------------------------- 1 | Stripe -------------------------------------------------------------------------------- /src/client/media/stripe-grey.svg: -------------------------------------------------------------------------------- 1 | Stripe -------------------------------------------------------------------------------- /src/client/css/index.css: -------------------------------------------------------------------------------- 1 | .modal-container { 2 | z-index: 2147483647; 3 | position: fixed; 4 | top: 50%; 5 | left: 50%; 6 | transform: translate(-50%, -50%); 7 | width: 100vw; 8 | height: 100vh; 9 | display: flex; 10 | align-items: center; 11 | justify-content: center; 12 | } 13 | 14 | .stripe-identity-verification-iframe { 15 | position: relative; 16 | display: flex; 17 | flex-direction: column; 18 | width: 80vw; 19 | max-width: 480px; 20 | height: 76vh; 21 | min-height: 38vh; 22 | max-height: 800px; 23 | background-color: transparent; 24 | box-shadow: 0 0.1rem 1rem rgba(1, 0, 20, 0.3); 25 | color: #010014; 26 | animation: zoomIn 0.3s; 27 | } 28 | 29 | @media (max-width: 480px) { 30 | .stripe-identity-verification-iframe { 31 | width: 100%; 32 | } 33 | } 34 | 35 | .modal-backdrop { 36 | z-index: -1; 37 | position: fixed; 38 | top: 0; 39 | left: 0; 40 | width: 100vw; 41 | height: 100vh; 42 | background-color: rgba(1, 0, 20, 0.5); 43 | animation: fadeIn 0.2s; 44 | } 45 | 46 | .modal-backdrop.closing { 47 | animation: fadeOut 0.3s; 48 | } 49 | 50 | .stripe-identity-verification-iframe.closing { 51 | animation: fadeOut 0.3s, zoomOut 0.3s; 52 | } 53 | 54 | .iframe-header { 55 | display: flex; 56 | justify-content: space-between; 57 | padding: 0.62rem 12px; 58 | font-size: 1.2rem; 59 | font-weight: 500; 60 | } 61 | 62 | .stripe-identity-verification-iframe iframe { 63 | overflow: hidden; 64 | border-radius: 4px; 65 | border: 0; 66 | width: 100%; 67 | height: 100%; 68 | } 69 | 70 | .iframe-close { 71 | position: absolute; 72 | right: 0; 73 | top: -24px; 74 | opacity: 0.7; 75 | color: #fff; 76 | cursor: pointer; 77 | } 78 | 79 | .iframe-close:hover { 80 | opacity: 1; 81 | } 82 | -------------------------------------------------------------------------------- /src/client/next-step.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Rocket Rides: Stripe Identity demo 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 30 |
31 |
32 |

33 |

34 |
35 | 36 |

37 |

38 | 39 |
40 | 41 |
42 | 43 | 44 | 45 | 46 |
47 |
48 | 55 | 56 | 57 | -------------------------------------------------------------------------------- /src/client/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Rocket Rides: Stripe Identity demo 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 20 | 21 | 22 | 23 | 35 |
36 |
37 |

Verify your identity to book a rocket ride

38 |

Get ready to take a photo of your ID and a selfie

39 |
40 | 41 | 45 |
46 | 53 | 54 | 55 | -------------------------------------------------------------------------------- /src/client/js/index.js: -------------------------------------------------------------------------------- 1 | const stripe = Stripe(window.STRIPE_PUBLISHABLE_KEY, { 2 | betas: ['identity_dialog_1'], 3 | }); 4 | 5 | /* 6 | * Calls the server to retrieve the identity verification client secret for Stripe.js 7 | */ 8 | 9 | const startIdentityVerification = function() { 10 | if (startButton) { 11 | startButton.disabled = true; 12 | } 13 | 14 | fetch("/create-verification-session", { 15 | method: "POST", 16 | headers: { 17 | "Content-Type": "application/json" 18 | }, 19 | }).then(function(result) { 20 | return result.json(); 21 | }).then(function(response) { 22 | // console.log(response); 23 | if (response.error) { 24 | throw response.error; 25 | } else { 26 | // Show the verification modal. 27 | sessionStorage.setItem('verification_session_id', response.session.id); 28 | return stripe.verifyIdentity(response.session.client_secret); 29 | } 30 | }).then(function(result) { 31 | // If `verifyIdentity` fails, you should display the localized 32 | // error message to your user using `error.message`. 33 | if (result.error) { 34 | console.error('Error:', result.error); 35 | sessionStorage.setItem('verification_session_error', JSON.stringify(result.error)); 36 | } 37 | window.location.href = '/next-step'; 38 | }).catch(function(error) { 39 | console.error('Error:', error); 40 | const errorMessageContainer = document.querySelector('.error-message'); 41 | if (errorMessageContainer) { 42 | errorMessageContainer.classList.remove('hidden'); 43 | } 44 | }).finally(function() { 45 | if (startButton) { 46 | startButton.disabled = false; 47 | } 48 | }); 49 | } 50 | 51 | const startButton = document.querySelector('#create-verification-session'); 52 | startButton.addEventListener('click', startIdentityVerification); 53 | 54 | 55 | /* 56 | * Calls the server to retrieve the identity verification start url 57 | */ 58 | const addRedirectToIdentityVerification = function() { 59 | return fetch("/create-verification-session-redirect", { 60 | method: "POST", 61 | headers: { 62 | "Content-Type": "application/json" 63 | }, 64 | }).then(function(result) { 65 | return result.json(); 66 | }).then(function(data) { 67 | if (data && data.session && data.session.id && data.session.url) { 68 | sessionStorage.setItem('verification_session_id', data.session.id); 69 | const newPageLink = document.querySelector('#create-verification-session-new-tab'); 70 | newPageLink.href = data.session.url; 71 | } 72 | }).catch(function(error) { 73 | console.error('Error:', error); 74 | }); 75 | } 76 | 77 | addRedirectToIdentityVerification() -------------------------------------------------------------------------------- /src/client/media/rocketrides.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/client/media/rocketrides-green.svg: -------------------------------------------------------------------------------- 1 | 2 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | > 2 | > 3 | > This project is deprecated and is no longer being actively maintained. 4 | > See our new [stripe-samples/identity](https://github.com/stripe-samples/identity) sample. 5 | 6 | # Stripe Identity sample app 7 | 8 | [Identity](https://stripe.com/docs/identity) is a prebuilt, hosted identity verification flow that can help you capture signals about individuals to make sure that they are who they claim to be. Identity can help you increase the trust and safety of your community, streamline risk operations to reduce losses, or launch verification as a new feature within your product. 9 | 10 | **Demo** 11 | 12 | See a [hosted version](https://identity.stripedemos.com/) of the sample app. 13 | 14 | ## How to run locally 15 | 16 | This sample includes a Node server implementation. 17 | 18 | Follow the steps below to run locally. 19 | 20 | **1. Clone the repository:** 21 | 22 | ``` 23 | git clone https://github.com/stripe-samples/identity-verification 24 | ``` 25 | 26 | **2. Copy the env.example to a .env file:** 27 | 28 | Copy the env.example file into a file named .env in the project root folder. For example: 29 | 30 | ``` 31 | cp env.example .env 32 | ``` 33 | 34 | You will need a Stripe account in order to run the demo. Additionally, you will need to setup your account to use Identity, which you can do so [here](https://dashboard.stripe.com/identity/application). Once you set up your account, go to the Stripe [developer dashboard](https://stripe.com/docs/development#api-keys) to find your API keys. 35 | 36 | - Edit `.env` file with your text editor and update your `.env` file with the keys. 37 | 38 | ``` 39 | STRIPE_SECRET_KEY= 40 | STRIPE_PUBLISHABLE_KEY= 41 | ``` 42 | 43 | `STATIC_DIR` tells the server where to the client files are located and does not need to be modified unless you move the server files. 44 | 45 | **3. Install and run:** 46 | ``` 47 | cd src/ 48 | npm install 49 | npm start 50 | ``` 51 | 52 | 53 | ## FAQ 54 | Q: Why did you pick these frameworks? 55 | 56 | A: We chose the most minimal framework to convey the key Stripe calls and concepts you need to understand. These demos are meant as an educational tool that helps you roadmap how to integrate Stripe within your own system independent of the framework. 57 | 58 | 59 | ## Get support 60 | If you found a bug or want to suggest a new [feature/use case/sample], please [file an issue](../../issues). 61 | 62 | If you have questions, comments, or need help with code, we're here to help: 63 | - on [IRC via freenode](https://webchat.freenode.net/?channel=#stripe) 64 | - on Twitter at [@StripeDev](https://twitter.com/StripeDev) 65 | - on Stack Overflow at the [stripe-payments](https://stackoverflow.com/tags/stripe-payments/info) tag 66 | - by [email](mailto:support+github@stripe.com) 67 | 68 | Sign up to [stay updated with developer news](https://go.stripe.global/dev-digest). 69 | 70 | 71 | ## Author(s) 72 | [@bz-stripe](https://twitter.com/atav32) 73 | -------------------------------------------------------------------------------- /src/client/js/next-step.js: -------------------------------------------------------------------------------- 1 | let pollingInterval = 1000; 2 | const urlParams = new URLSearchParams(window.location.search); 3 | const verificationSessionId = sessionStorage.getItem('verification_session_id'); 4 | 5 | /* 6 | * Update the h4 with the VerificationSession status 7 | */ 8 | const updateHeader = function(status) { 9 | const lastError = JSON.parse(sessionStorage.getItem('verification_session_error') || null); 10 | 11 | const title_header = document.querySelector('.status-title'); 12 | title_header.textContent = "Your ride is not yet booked."; 13 | 14 | const header = document.querySelector('.status-text'); 15 | let headerText = status.replace(/_/g, ' '); 16 | if (status === 'requires_input' && lastError && lastError.code) { 17 | headerText = lastError.code.replace(/_/g, ' '); 18 | } 19 | else if (status == "verified") { 20 | title_header.textContent = "Your ride is booked!"; 21 | document.querySelector('.status-note').textContent = "For this demo, we will successfully verify everyone"; 22 | } 23 | header.textContent = headerText; 24 | 25 | const statusIcon = document.querySelector('.status-icon'); 26 | statusIcon.style.backgroundImage = `url('../media/Icon--${status}.svg')`; 27 | } 28 | 29 | const calculateBackoff = function(interval) { 30 | const maxInterval = 60000; 31 | const backoffRate = 1.5; 32 | if (interval < maxInterval) { 33 | return parseInt(interval * backoffRate, 10); 34 | } 35 | return interval; 36 | } 37 | 38 | const getVerificationSession = function(verificationSessionId) { 39 | return fetch(`/get-verification-session/${verificationSessionId}`, { 40 | method: "GET", 41 | headers: { 42 | "Content-Type": "application/json" 43 | }, 44 | }).then(function(result) { 45 | return result.json(); 46 | }).then(function(data) { 47 | // console.log('%c get VerificationSession', 'color: #b0b', data); 48 | if (data && data.session) { 49 | if (data.session.last_error) { 50 | updateHeader(data.session.last_error.code); 51 | } else { 52 | updateHeader(data.session.status) 53 | } 54 | 55 | // If the verification is still processing, poll every second 56 | if (data.session.status === 'processing') { 57 | window.setTimeout(() => { 58 | getVerificationSession(verificationSessionId); 59 | pollingInterval = calculateBackoff(pollingInterval); 60 | console.log('%c polling interval', 'color: #b0b', pollingInterval); 61 | }, pollingInterval); 62 | } 63 | } else { 64 | updateHeader('error'); 65 | } 66 | }); 67 | } 68 | getVerificationSession(verificationSessionId); 69 | 70 | /* 71 | * Clear data from last verification 72 | */ 73 | const clearVerificationSession = function() { 74 | sessionStorage.removeItem('verification_session_id'); 75 | sessionStorage.removeItem('verification_session_error'); 76 | sessionStorage.removeItem('verification_session_status'); 77 | window.location.href = '/'; 78 | }; 79 | 80 | const startOverButton = document.querySelector('#start-over'); 81 | startOverButton.addEventListener('click', clearVerificationSession); -------------------------------------------------------------------------------- /src/server/server.js: -------------------------------------------------------------------------------- 1 | // Copy the .env.example in the root into a new .env file with your API keys 2 | const { resolve } = require('path'); 3 | const env = require('dotenv').config({ path: resolve(__dirname, '../../.env') }); 4 | 5 | // ejs 6 | const ejs = require('ejs'); 7 | 8 | // Express 9 | const express = require('express'); 10 | const app = express(); 11 | const bodyParser = require('body-parser') 12 | 13 | // Stripe 14 | const stripe = require('stripe')(process.env.STRIPE_SECRET_KEY); 15 | const StripeResource = require('stripe').StripeResource; 16 | 17 | // unique ID's 18 | const uuid = require('uuid/v4'); 19 | 20 | 21 | const VerificationSession = StripeResource.extend({ 22 | create: StripeResource.method({ 23 | method: 'POST', 24 | path: 'identity/verification_sessions', 25 | }), 26 | get: StripeResource.method({ 27 | method: 'GET', 28 | path: 'identity/verification_sessions/{verificationSessionId}', 29 | }) 30 | }); 31 | const verificationSession = new VerificationSession(stripe); 32 | 33 | /* 34 | * Express middleware 35 | */ 36 | app.engine('html', require('ejs').renderFile); 37 | app.set('view engine', 'html'); 38 | 39 | app.use( 40 | express.json({ 41 | // We need the raw body to verify webhook signatures. 42 | // Let's compute it only when hitting the Stripe webhook endpoint. 43 | verify: function(req, res, buf) { 44 | if (req.originalUrl.startsWith('/webhook')) { 45 | req.rawBody = buf.toString(); 46 | } 47 | } 48 | }) 49 | ); 50 | 51 | app.use(bodyParser.json()); 52 | 53 | 54 | /* 55 | * Serve homepage 56 | */ 57 | app.get('/', (req, res) => { 58 | // Display sign up page 59 | const path = resolve(__dirname, '../client/index.html'); 60 | res.render(path, {stripePublishableKey: process.env.STRIPE_PUBLISHABLE_KEY}); 61 | }); 62 | 63 | 64 | /* 65 | * Serve return_url page 66 | */ 67 | app.get('/next-step', (req, res) => { 68 | const path = resolve(__dirname, '../client/next-step.html'); 69 | res.sendFile(path); 70 | }); 71 | 72 | 73 | const respondToClient = (error, responseData, res) => { 74 | if (error) { 75 | console.error('\nError:\n', error.raw); 76 | res.send({error}); 77 | } else if (responseData) { 78 | if (responseData.id) { 79 | res.send({session: responseData}); 80 | } else { 81 | res.status(500).send({ 82 | error: { 83 | message: 'VerificationSession contained no `id` field' 84 | }, 85 | }); 86 | } 87 | } 88 | }; 89 | 90 | /* 91 | * Handler for creating the VerificationSession for Stripe.js 92 | */ 93 | app.post('/create-verification-session', async (req, res) => { 94 | const verificationSessionParams = { 95 | type: 'document', 96 | options: { 97 | document: { 98 | require_id_number: true, 99 | require_matching_selfie: true, 100 | }, 101 | }, 102 | metadata: { 103 | userId: uuid(), // optional: pass a user's ID through the VerificationSession API 104 | }, 105 | } 106 | 107 | verificationSession.create(verificationSessionParams, (error, responseData) => { 108 | respondToClient(error, responseData, res); 109 | }); 110 | }); 111 | 112 | /* 113 | * Handler for creating the VerificationSession redirect link 114 | */ 115 | app.post('/create-verification-session-redirect', async (req, res) => { 116 | const domain = req.get('origin') || req.header('Referer'); 117 | 118 | const verificationSessionParams = { 119 | type: 'document', 120 | options: { 121 | document: { 122 | require_id_number: true, 123 | require_matching_selfie: true, 124 | }, 125 | }, 126 | return_url: `${domain}/next-step`, 127 | metadata: { 128 | userId: uuid(), // optional: pass a user's ID through the VerificationSession API 129 | }, 130 | } 131 | 132 | verificationSession.create(verificationSessionParams, (error, responseData) => { 133 | respondToClient(error, responseData, res); 134 | }); 135 | }); 136 | 137 | /* 138 | * Handler for retrieving a VerificationSession 139 | */ 140 | app.get('/get-verification-session/:verificationSessionId', async (req, res) => { 141 | const {verificationSessionId} = req.params; 142 | verificationSession.get(verificationSessionId, (error, responseData) => { 143 | respondToClient(error, responseData, res); 144 | }); 145 | }); 146 | 147 | /* 148 | * Handle static assets and other pages 149 | */ 150 | app.use(express.static('./client')); 151 | 152 | /* 153 | * Handle 404 responses 154 | */ 155 | app.use(function (req, res, next) { 156 | const path = resolve(__dirname, '../client/404.html'); 157 | res.status(404).sendFile(path); 158 | }) 159 | 160 | 161 | // Start server 162 | const localPort = 4242; 163 | const server = require('http').createServer(app); 164 | server.listen(localPort, () => console.log(`Node server listening on port ${localPort}!`)); 165 | -------------------------------------------------------------------------------- /src/test/store.test.js: -------------------------------------------------------------------------------- 1 | const uuid = require('uuid/v4'); 2 | const MockDate = require('mockdate'); 3 | const Store = require('../server/store.js'); 4 | 5 | describe('Store tests', () => { 6 | beforeEach(() => { 7 | MockDate.set('1999-12-31'); 8 | }); 9 | 10 | afterEach(() => { 11 | MockDate.reset(); 12 | }); 13 | 14 | it('initializes store to empty object', () => { 15 | const testStore = new Store(); 16 | expect(testStore.store).toEqual({}); 17 | }); 18 | 19 | it('initializes store to initial object', () => { 20 | const testStore = new Store({a: 1, b: 2, c: 3}); 21 | expect(testStore.store).toEqual({a: 1, b: 2, c: 3}); 22 | }); 23 | 24 | it('non-existent id', () => { 25 | const testStore = new Store(); 26 | const id = uuid(); 27 | expect(() => { 28 | testStore.getDoc(id); 29 | }).toThrow(); 30 | expect(() => { 31 | testStore.getStaticValue(id, 'a'); 32 | }).toThrow(); 33 | }); 34 | 35 | it('getLatestValue', () => { 36 | const testStore = new Store(); 37 | const id = uuid(); 38 | expect(() => { 39 | testStore.getLatestValue(id); 40 | }).toThrow(); 41 | testStore.upsert(id, {a: 1}) 42 | expect(testStore.getLatestValue(id)).toEqual({a: 1, expires: Date.now() + testStore.getBackoff()}); 43 | testStore.upsert(id, {b: 2}) 44 | expect(testStore.getLatestValue(id)).toEqual({b: 2, expires: Date.now() + 2 * testStore.getBackoff()}); 45 | testStore.upsert(id, {c: 3}) 46 | expect(testStore.getLatestValue(id)).toEqual({c: 3, expires: Date.now() + 3 * testStore.getBackoff()}); 47 | }); 48 | 49 | it('getStaticValue', () => { 50 | const testStore = new Store(); 51 | const id = uuid(); 52 | testStore.setStaticValue(id, 'a', 1) 53 | const staticValue = testStore.getStaticValue(id, 'a'); 54 | expect(staticValue).toBe(1); 55 | }); 56 | 57 | it('non-existent static key', () => { 58 | const testStore = new Store(); 59 | const id = uuid(); 60 | testStore.setStaticValue(id, 'a', 1) 61 | expect(() => { 62 | testStore.getStaticValue(id, 'b'); 63 | }).toThrow(); 64 | }); 65 | 66 | it('setBackoff', () => { 67 | const testStore = new Store(); 68 | expect(() => { 69 | testStore.setBackoff(); 70 | }).toThrow(); 71 | expect(() => { 72 | testStore.setBackoff(null); 73 | }).toThrow(); 74 | expect(() => { 75 | testStore.setBackoff('abc'); 76 | }).toThrow(); 77 | expect(() => { 78 | testStore.setBackoff({a: 1}); 79 | }).toThrow(); 80 | expect(() => { 81 | testStore.setBackoff(-1); 82 | }).toThrow(); 83 | testStore.setBackoff(1000); 84 | expect(testStore.getBackoff()).toBe(1000); 85 | }); 86 | 87 | it('setStaticValue', () => { 88 | const testStore = new Store(); 89 | const id = uuid(); 90 | testStore.setStaticValue(id, 'a', 1) 91 | expect(testStore.store).toEqual({[id]: {a: 1}}); 92 | testStore.setStaticValue(id, 'a', {b: 2}) 93 | expect(testStore.store).toEqual({[id]: {a: {b: 2}}}); 94 | }); 95 | 96 | it('upsert', () => { 97 | const testStore = new Store(); 98 | const id = uuid(); 99 | testStore.upsert(id, {a: 1}) 100 | expect(testStore.getDoc(id)).toEqual({items: [{a: 1, expires: Date.now() + testStore.getBackoff()}]}); 101 | expect(testStore.store).toEqual({[id]: {items: [{a: 1, expires: Date.now() + testStore.getBackoff()}]}}); 102 | }); 103 | 104 | it('upsert expiration is valid datetime', () => { 105 | const testStore = new Store(); 106 | const id = uuid(); 107 | const offset = 1000; 108 | expect(() => { 109 | testStore.upsert(id, {a: 1}, 'abc') 110 | }).toThrow(); 111 | testStore.upsert(id, {a: 1}, Date.now() + offset) 112 | expect(testStore.store).toEqual({[id]: {items: [{a: 1, expires: Date.now() + offset}]}}); 113 | }); 114 | 115 | it('delete', () => { 116 | const testStore = new Store(); 117 | const id = uuid(); 118 | expect(() => { 119 | testStore.delete(id); 120 | }).toThrow(); 121 | testStore.upsert(id, {a: 1}) 122 | expect(testStore.getDoc(id)).toEqual({items: [{a: 1, expires: Date.now() + testStore.getBackoff()}]}); 123 | testStore.delete(id); 124 | expect(() => { 125 | testStore.getDoc(id); 126 | }).toThrow(); 127 | testStore.upsert(id, {b: 2}) 128 | expect(testStore.getDoc(id)).toEqual({items: [{b: 2, expires: Date.now() + testStore.getBackoff()}]}); 129 | }); 130 | 131 | it('deleteStaticValue', () => { 132 | const testStore = new Store(); 133 | const id = uuid(); 134 | expect(() => { 135 | testStore.deleteStaticValue(id); 136 | }).toThrow(); 137 | testStore.setStaticValue(id, 'a', 1) 138 | expect(testStore.store).toEqual({[id]: {a: 1}}); 139 | testStore.deleteStaticValue(id); 140 | expect(testStore.store).toEqual({}); 141 | }); 142 | 143 | it('deleteValues', () => { 144 | const testStore = new Store(); 145 | const id = uuid(); 146 | expect(() => { 147 | testStore.deleteValues(id); 148 | }).toThrow(); 149 | testStore.upsert(id, {a: 1}) 150 | expect(testStore.getLatestValue(id)).toEqual({a: 1, expires: Date.now() + testStore.getBackoff()}); 151 | testStore.upsert(id, {b: 2}) 152 | expect(testStore.getLatestValue(id)).toEqual({b: 2, expires: Date.now() + 2 * testStore.getBackoff()}); 153 | testStore.upsert(id, {c: 3}) 154 | expect(testStore.getLatestValue(id)).toEqual({c: 3, expires: Date.now() + 3 * testStore.getBackoff()}); 155 | testStore.deleteValues(id); 156 | expect(() => { 157 | expect(testStore.getLatestValue(id)).toEqual(undefined); 158 | }).toThrow(); 159 | testStore.upsert(id, {d: 4}) 160 | expect(testStore.getLatestValue(id)).toEqual({d: 4, expires: Date.now() + testStore.getBackoff()}); 161 | }); 162 | 163 | it('shouldUpdateValue', () => { 164 | const testStore = new Store(); 165 | const id = uuid(); 166 | expect(() => { 167 | testStore.shouldUpdateValue(id); 168 | }).toThrow(); 169 | testStore.upsert(id, {a: 1}) 170 | expect(testStore.shouldUpdateValue(id)).toBe(false); 171 | MockDate.set('2000-01-01'); 172 | expect(testStore.shouldUpdateValue(id)).toBe(true); 173 | expect(() => { 174 | testStore.shouldUpdateValue(id, true); 175 | }).toThrow(); 176 | expect(testStore.shouldUpdateValue(id, (() => true))).toBe(true); 177 | expect(testStore.shouldUpdateValue(id, (() => false))).toBe(false); 178 | testStore.deleteValues(id); 179 | expect(testStore.shouldUpdateValue(id)).toBe(true); 180 | testStore.delete(id); 181 | expect(() => { 182 | testStore.shouldUpdateValue(id); 183 | }).toThrow(); 184 | }); 185 | }); 186 | -------------------------------------------------------------------------------- /src/client/css/normalize.css: -------------------------------------------------------------------------------- 1 | /*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */ 2 | 3 | /* Document 4 | ========================================================================== */ 5 | 6 | /** 7 | * 1. Correct the line height in all browsers. 8 | * 2. Prevent adjustments of font size after orientation changes in iOS. 9 | */ 10 | 11 | html { 12 | line-height: 1.15; /* 1 */ 13 | -webkit-text-size-adjust: 100%; /* 2 */ 14 | } 15 | 16 | /* Sections 17 | ========================================================================== */ 18 | 19 | /** 20 | * Remove the margin in all browsers. 21 | */ 22 | 23 | body { 24 | margin: 0; 25 | } 26 | 27 | /** 28 | * Render the `main` element consistently in IE. 29 | */ 30 | 31 | main { 32 | display: block; 33 | } 34 | 35 | /** 36 | * Correct the font size and margin on `h1` elements within `section` and 37 | * `article` contexts in Chrome, Firefox, and Safari. 38 | */ 39 | 40 | h1 { 41 | font-size: 2em; 42 | margin: 0.67em 0; 43 | } 44 | 45 | /* Grouping content 46 | ========================================================================== */ 47 | 48 | /** 49 | * 1. Add the correct box sizing in Firefox. 50 | * 2. Show the overflow in Edge and IE. 51 | */ 52 | 53 | hr { 54 | box-sizing: content-box; /* 1 */ 55 | height: 0; /* 1 */ 56 | overflow: visible; /* 2 */ 57 | } 58 | 59 | /** 60 | * 1. Correct the inheritance and scaling of font size in all browsers. 61 | * 2. Correct the odd `em` font sizing in all browsers. 62 | */ 63 | 64 | pre { 65 | font-family: monospace, monospace; /* 1 */ 66 | font-size: 1em; /* 2 */ 67 | } 68 | 69 | /* Text-level semantics 70 | ========================================================================== */ 71 | 72 | /** 73 | * Remove the gray background on active links in IE 10. 74 | */ 75 | 76 | a { 77 | background-color: transparent; 78 | } 79 | 80 | /** 81 | * 1. Remove the bottom border in Chrome 57- 82 | * 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari. 83 | */ 84 | 85 | abbr[title] { 86 | border-bottom: none; /* 1 */ 87 | text-decoration: underline; /* 2 */ 88 | text-decoration: underline dotted; /* 2 */ 89 | } 90 | 91 | /** 92 | * Add the correct font weight in Chrome, Edge, and Safari. 93 | */ 94 | 95 | b, 96 | strong { 97 | font-weight: bolder; 98 | } 99 | 100 | /** 101 | * 1. Correct the inheritance and scaling of font size in all browsers. 102 | * 2. Correct the odd `em` font sizing in all browsers. 103 | */ 104 | 105 | code, 106 | kbd, 107 | samp { 108 | font-family: monospace, monospace; /* 1 */ 109 | font-size: 1em; /* 2 */ 110 | } 111 | 112 | /** 113 | * Add the correct font size in all browsers. 114 | */ 115 | 116 | small { 117 | font-size: 80%; 118 | } 119 | 120 | /** 121 | * Prevent `sub` and `sup` elements from affecting the line height in 122 | * all browsers. 123 | */ 124 | 125 | sub, 126 | sup { 127 | font-size: 75%; 128 | line-height: 0; 129 | position: relative; 130 | vertical-align: baseline; 131 | } 132 | 133 | sub { 134 | bottom: -0.25em; 135 | } 136 | 137 | sup { 138 | top: -0.5em; 139 | } 140 | 141 | /* Embedded content 142 | ========================================================================== */ 143 | 144 | /** 145 | * Remove the border on images inside links in IE 10. 146 | */ 147 | 148 | img { 149 | border-style: none; 150 | } 151 | 152 | /* Forms 153 | ========================================================================== */ 154 | 155 | /** 156 | * 1. Change the font styles in all browsers. 157 | * 2. Remove the margin in Firefox and Safari. 158 | */ 159 | 160 | button, 161 | input, 162 | optgroup, 163 | select, 164 | textarea { 165 | font-family: inherit; /* 1 */ 166 | font-size: 100%; /* 1 */ 167 | line-height: 1.15; /* 1 */ 168 | margin: 0; /* 2 */ 169 | } 170 | 171 | /** 172 | * Show the overflow in IE. 173 | * 1. Show the overflow in Edge. 174 | */ 175 | 176 | button, 177 | input { /* 1 */ 178 | overflow: visible; 179 | } 180 | 181 | /** 182 | * Remove the inheritance of text transform in Edge, Firefox, and IE. 183 | * 1. Remove the inheritance of text transform in Firefox. 184 | */ 185 | 186 | button, 187 | select { /* 1 */ 188 | text-transform: none; 189 | } 190 | 191 | /** 192 | * Correct the inability to style clickable types in iOS and Safari. 193 | */ 194 | 195 | button, 196 | [type="button"], 197 | [type="reset"], 198 | [type="submit"] { 199 | -webkit-appearance: button; 200 | } 201 | 202 | /** 203 | * Remove the inner border and padding in Firefox. 204 | */ 205 | 206 | button::-moz-focus-inner, 207 | [type="button"]::-moz-focus-inner, 208 | [type="reset"]::-moz-focus-inner, 209 | [type="submit"]::-moz-focus-inner { 210 | border-style: none; 211 | padding: 0; 212 | } 213 | 214 | /** 215 | * Restore the focus styles unset by the previous rule. 216 | */ 217 | 218 | button:-moz-focusring, 219 | [type="button"]:-moz-focusring, 220 | [type="reset"]:-moz-focusring, 221 | [type="submit"]:-moz-focusring { 222 | outline: 1px dotted ButtonText; 223 | } 224 | 225 | /** 226 | * Correct the padding in Firefox. 227 | */ 228 | 229 | fieldset { 230 | padding: 0.35em 0.75em 0.625em; 231 | } 232 | 233 | /** 234 | * 1. Correct the text wrapping in Edge and IE. 235 | * 2. Correct the color inheritance from `fieldset` elements in IE. 236 | * 3. Remove the padding so developers are not caught out when they zero out 237 | * `fieldset` elements in all browsers. 238 | */ 239 | 240 | legend { 241 | box-sizing: border-box; /* 1 */ 242 | color: inherit; /* 2 */ 243 | display: table; /* 1 */ 244 | max-width: 100%; /* 1 */ 245 | padding: 0; /* 3 */ 246 | white-space: normal; /* 1 */ 247 | } 248 | 249 | /** 250 | * Add the correct vertical alignment in Chrome, Firefox, and Opera. 251 | */ 252 | 253 | progress { 254 | vertical-align: baseline; 255 | } 256 | 257 | /** 258 | * Remove the default vertical scrollbar in IE 10+. 259 | */ 260 | 261 | textarea { 262 | overflow: auto; 263 | } 264 | 265 | /** 266 | * 1. Add the correct box sizing in IE 10. 267 | * 2. Remove the padding in IE 10. 268 | */ 269 | 270 | [type="checkbox"], 271 | [type="radio"] { 272 | box-sizing: border-box; /* 1 */ 273 | padding: 0; /* 2 */ 274 | } 275 | 276 | /** 277 | * Correct the cursor style of increment and decrement buttons in Chrome. 278 | */ 279 | 280 | [type="number"]::-webkit-inner-spin-button, 281 | [type="number"]::-webkit-outer-spin-button { 282 | height: auto; 283 | } 284 | 285 | /** 286 | * 1. Correct the odd appearance in Chrome and Safari. 287 | * 2. Correct the outline style in Safari. 288 | */ 289 | 290 | [type="search"] { 291 | -webkit-appearance: textfield; /* 1 */ 292 | outline-offset: -2px; /* 2 */ 293 | } 294 | 295 | /** 296 | * Remove the inner padding in Chrome and Safari on macOS. 297 | */ 298 | 299 | [type="search"]::-webkit-search-decoration { 300 | -webkit-appearance: none; 301 | } 302 | 303 | /** 304 | * 1. Correct the inability to style clickable types in iOS and Safari. 305 | * 2. Change font properties to `inherit` in Safari. 306 | */ 307 | 308 | ::-webkit-file-upload-button { 309 | -webkit-appearance: button; /* 1 */ 310 | font: inherit; /* 2 */ 311 | } 312 | 313 | /* Interactive 314 | ========================================================================== */ 315 | 316 | /* 317 | * Add the correct display in Edge, IE 10+, and Firefox. 318 | */ 319 | 320 | details { 321 | display: block; 322 | } 323 | 324 | /* 325 | * Add the correct display in all browsers. 326 | */ 327 | 328 | summary { 329 | display: list-item; 330 | } 331 | 332 | /* Misc 333 | ========================================================================== */ 334 | 335 | /** 336 | * Add the correct display in IE 10+. 337 | */ 338 | 339 | template { 340 | display: none; 341 | } 342 | 343 | /** 344 | * Add the correct display in IE 10. 345 | */ 346 | 347 | [hidden] { 348 | display: none; 349 | } -------------------------------------------------------------------------------- /src/client/css/global.css: -------------------------------------------------------------------------------- 1 | /* Variables */ 2 | :root { 3 | --gray-border: rgba(0, 0, 0, 0.15); 4 | --gray-dark: rgba(0, 0, 0, 0.9); 5 | --gray-light: rgba(0, 0, 0, 0.4); 6 | --gray-mid: rgba(0, 0, 0, 0.7); 7 | --gray-offset: rgba(0, 0, 0, 0.03); 8 | --cyan-4: #3297d3; 9 | --green-4: #24b47e; 10 | --yellow-4: #e39f48; 11 | --red-4: #e25950; 12 | } 13 | 14 | :root { 15 | --accent-color: #0066f0; 16 | --form-width: 620px; 17 | --headline-color: var(--gray-dark); 18 | --background-color: #010014; 19 | --background-light: #f6f9fc; 20 | --body-color: #ffffff; 21 | --body-font-family: -apple-system, BlinkMacSystemFont, sans-serif; 22 | --body-width: 800px; 23 | --radius: 6px; 24 | --margin: 0.62rem; 25 | } 26 | 27 | /* Rocket Rides styles – Brand-overrides, can split these out */ 28 | :root { 29 | --accent-color: #15B67C; 30 | --headline-color: var(--accent-color); 31 | --logo-image: url("../media/rocketrides-green.svg"); 32 | } 33 | 34 | /* Base */ 35 | * { 36 | box-sizing: border-box; 37 | } 38 | 39 | body { 40 | position: relative !important; 41 | display: flex; 42 | flex-direction: column; 43 | min-height: 100vh; 44 | background-color: var(--background-color); 45 | background-image: url("../media/swirly-background.jpg"); 46 | background-size: cover; 47 | background-position: center; 48 | font-family: var(--body-font-family); 49 | font-size: 16px; 50 | color: var(--body-color); 51 | -webkit-font-smoothing: antialiased; 52 | } 53 | 54 | body::before { 55 | content: ""; 56 | position: fixed; 57 | z-index: -1; 58 | top: 0; 59 | left: 0; 60 | width: 100vw; 61 | height: 100vh; 62 | background: linear-gradient(rgba(255, 255, 255, 0), var(--background-color) 62%); 63 | } 64 | 65 | nav { 66 | margin: 0 auto; 67 | width: 100vw; 68 | max-width: var(--body-width); 69 | padding: 2vh; 70 | } 71 | 72 | footer { 73 | margin: 0 auto; 74 | padding: 2vh; 75 | width: 100vw; 76 | max-width: var(--body-width); 77 | } 78 | 79 | @media (max-width: 480px) { 80 | footer { 81 | padding: 0; 82 | } 83 | } 84 | 85 | h1, 86 | h2, 87 | h3, 88 | h4, 89 | h5, 90 | h6 { 91 | color: var(--body-color); 92 | margin-top: 0.38rem; 93 | margin-bottom: var(--margin); 94 | } 95 | h1 { 96 | font-size: 27px; 97 | } 98 | h4 { 99 | font-weight: 500; 100 | font-size: 1.1em; 101 | color: #ffffff; 102 | } 103 | 104 | .title { 105 | font-size: 3.8em; 106 | } 107 | 108 | @media (max-width: 480px) { 109 | .title { 110 | font-size: calc(3em + 0.1vh); 111 | } 112 | } 113 | 114 | .redirect-link-container { 115 | margin-top: 16px; 116 | } 117 | 118 | .redirect-link-container > a { 119 | vertical-align: top; 120 | } 121 | 122 | .status-header { 123 | display: flex; 124 | align-items: center; 125 | margin-top: var(--margin); 126 | font-size: 1.62em; 127 | } 128 | 129 | .status-text { 130 | text-transform: capitalize; 131 | } 132 | 133 | .status-text.pending, 134 | .status-text.processing { 135 | color: var(--cyan-4); 136 | } 137 | 138 | .status-text.succeeded, 139 | .status-text.verified { 140 | color: var(--green-4); 141 | } 142 | 143 | .status-text.requires_action { 144 | color: var(--yellow-4); 145 | } 146 | 147 | .status-text.canceled, 148 | .status-text.error, 149 | .status-text.unverified { 150 | color: var(--red-4); 151 | } 152 | 153 | .status-icon { 154 | margin-right: 0.38em; 155 | width: 16px; 156 | height: 16px; 157 | background-position: center; 158 | background-repeat: no-repeat; 159 | } 160 | 161 | /* Nav */ 162 | .nav-content { 163 | display: flex; 164 | justify-content: space-between; 165 | max-width: 100%; 166 | margin: 0 auto; 167 | } 168 | 169 | @media (max-width: 480px) { 170 | .nav-content { 171 | flex-direction: column; 172 | } 173 | } 174 | 175 | .nav-content a { 176 | color: white; 177 | font-size: 20px; 178 | } 179 | 180 | .nav-logo { 181 | background-image: url(../media/rocket-rides.svg); 182 | } 183 | 184 | .nav-right { 185 | display: flex; 186 | align-items: center; 187 | } 188 | 189 | @media (max-width: 480px) { 190 | .nav-right { 191 | margin-top: var(--margin); 192 | } 193 | } 194 | 195 | .nav-content .divider { 196 | margin: 0 var(--margin); 197 | } 198 | 199 | /* Layout */ 200 | .sr-root { 201 | display: flex; 202 | flex-direction: row; 203 | width: 100vw; 204 | max-width: var(--body-width); 205 | align-content: center; 206 | justify-content: center; 207 | height: auto; 208 | min-height: 100vh; 209 | margin: 0 auto; 210 | } 211 | .sr-header { 212 | margin-bottom: 32px; 213 | } 214 | .sr-verification-summary { 215 | margin-top: -18vh; 216 | margin-bottom: 20px; 217 | } 218 | 219 | .sr-main, 220 | .sr-content { 221 | display: flex; 222 | flex-direction: column; 223 | align-content: center; 224 | justify-content: center; 225 | margin: 0 auto; 226 | padding: 0 2vh; 227 | width: 100vw; 228 | max-width: var(--body-width); 229 | flex: 1; 230 | height: auto; 231 | min-height: 0.62vh; 232 | } 233 | 234 | @media (max-width: 760px) { 235 | .sr-main { 236 | padding: 18vh 2vh; 237 | } 238 | } 239 | 240 | @media (max-width: 340px) { 241 | .sr-main { 242 | padding: 8vh 2vh; 243 | } 244 | } 245 | 246 | .sr-content { 247 | padding-left: 48px; 248 | } 249 | .sr-header__logo { 250 | background-image: var(--logo-image); 251 | height: 24px; 252 | background-size: contain; 253 | background-repeat: no-repeat; 254 | width: 100%; 255 | } 256 | .sr-legal-text { 257 | color: var(--gray-light); 258 | text-align: center; 259 | font-size: 13px; 260 | line-height: 17px; 261 | margin-top: 12px; 262 | } 263 | .sr-field-error { 264 | color: var(--accent-color); 265 | text-align: left; 266 | font-size: 13px; 267 | line-height: 17px; 268 | margin-top: 12px; 269 | } 270 | 271 | /* Annotation */ 272 | .annotation { 273 | display: flex; 274 | justify-content: space-between; 275 | align-items: center; 276 | border-radius: 4px; 277 | margin: 0; 278 | width: 100%; 279 | padding: 10px 22px; 280 | background-color: var(--background-light); 281 | box-shadow: 0 13px 27px -5px rgba(50, 50, 93, 0.25), 0 8px 16px -8px rgba(0, 0, 0, 0.3); 282 | font-size: calc(14px + 0.1vh); 283 | font-weight: bold; 284 | line-height: 22px; 285 | } 286 | 287 | @media (max-width: 720px) { 288 | .annotation { 289 | position: fixed; 290 | bottom: 0; 291 | left: 0; 292 | transform: none; 293 | flex-flow: row wrap; 294 | border-radius: 0; 295 | } 296 | } 297 | 298 | .annotation p { 299 | margin: 0; 300 | font-size: calc(13px + 0.1vh); 301 | font-weight: 400; 302 | color: #6a7c94; 303 | } 304 | 305 | @media (max-width: 720px) { 306 | .annotation p { 307 | order: 1; 308 | margin: 10px 0 0; 309 | } 310 | } 311 | 312 | .annotation a { 313 | font-weight: 400; 314 | color: #666ee8; 315 | } 316 | 317 | .annotation a.github { 318 | background-image: url(../media/arrow-purple.svg); 319 | } 320 | 321 | .annotation a.stripe { 322 | flex: 0 0 53px; 323 | margin-right: 10px; 324 | background: url(../media/stripe.svg) center center no-repeat; 325 | text-indent: -9999px; 326 | } 327 | 328 | /* Form */ 329 | .sr-form-row { 330 | margin: 16px 0; 331 | } 332 | label { 333 | font-size: 13px; 334 | font-weight: 500; 335 | margin-bottom: 8px; 336 | display: inline-block; 337 | } 338 | 339 | /* Inputs */ 340 | .sr-input, 341 | .sr-select, 342 | input[type="text"] { 343 | border: 1px solid var(--gray-border); 344 | border-radius: var(--radius); 345 | padding: 5px 12px; 346 | height: 44px; 347 | width: 100%; 348 | transition: box-shadow 0.2s ease; 349 | background: white; 350 | -moz-appearance: none; 351 | -webkit-appearance: none; 352 | appearance: none; 353 | } 354 | .sr-input:focus, 355 | input[type="text"]:focus, 356 | button:focus, 357 | .focused { 358 | box-shadow: 0 0 0 1px rgba(50, 151, 211, 0.3), 0 1px 1px 0 rgba(0, 0, 0, 0.07), 0 0 0 4px rgba(50, 151, 211, 0.3); 359 | outline: none; 360 | z-index: 9; 361 | } 362 | .sr-input::placeholder, 363 | input[type="text"]::placeholder { 364 | color: var(--gray-light); 365 | } 366 | 367 | /* Buttons and links */ 368 | button { 369 | display: block; 370 | margin-top: 16px; 371 | border: 0; 372 | border-radius: var(--radius); 373 | padding: 12px 16px; 374 | width: 38%; 375 | background: var(--accent-color); 376 | color: white; 377 | font-weight: 600; 378 | cursor: pointer; 379 | transition: all 0.2s ease; 380 | } 381 | button:hover { 382 | filter: contrast(115%); 383 | } 384 | button:active { 385 | transform: translateY(0px) scale(0.98); 386 | filter: brightness(0.9); 387 | } 388 | button:disabled { 389 | opacity: 0.5; 390 | cursor: none; 391 | } 392 | 393 | button.clear-button { 394 | border: 1px solid var(--accent-color); 395 | background: transparent; 396 | color: var(--accent-color); 397 | } 398 | 399 | .sr-verification-form button, 400 | .fullwidth { 401 | width: 100%; 402 | } 403 | 404 | .button-container { 405 | display: flex; 406 | } 407 | 408 | .button-container button { 409 | margin-right: 10px; 410 | width: auto; 411 | min-width: 16vh; 412 | } 413 | 414 | @media (max-width: 768px) { 415 | .button-container { 416 | flex-direction: column; 417 | } 418 | .button-container button { 419 | width: 100%; 420 | min-width: 16vw; 421 | } 422 | } 423 | 424 | a { 425 | color: var(--accent-color); 426 | text-decoration: none; 427 | transition: all 0.2s ease; 428 | } 429 | 430 | a:hover { 431 | filter: brightness(0.8); 432 | text-decoration: underline; 433 | } 434 | 435 | a:active { 436 | filter: brightness(0.5); 437 | } 438 | 439 | a.arrow { 440 | padding-right: 20px; 441 | background-image: url(../media/arrow-white.svg); 442 | background-position: right center; 443 | background-repeat: no-repeat; 444 | } 445 | 446 | /* Code block */ 447 | code, 448 | pre { 449 | font-family: "SF Mono", "IBM Plex Mono", "Menlo", monospace; 450 | font-size: 12px; 451 | white-space: pre-wrap; 452 | word-wrap: break-word; 453 | } 454 | 455 | .sr-callout { 456 | background: var(--gray-offset); 457 | padding: 12px; 458 | border-radius: var(--radius); 459 | overflow: auto; 460 | } 461 | 462 | .response-json { 463 | position: relative; 464 | margin-top: 0; 465 | max-height: 38vh; 466 | font-size: 1.18em; 467 | } 468 | 469 | 470 | /* Stripe Element placeholder */ 471 | .sr-card-element { 472 | padding-top: 12px; 473 | } 474 | 475 | /* Responsiveness */ 476 | @media (max-width: 720px) { 477 | .sr-root { 478 | flex-direction: column; 479 | padding: 2vh; 480 | min-width: 320px; 481 | } 482 | 483 | .sr-header__logo { 484 | background-position: center; 485 | } 486 | 487 | .sr-content { 488 | display: none; 489 | } 490 | 491 | button { 492 | width: 100%; 493 | } 494 | } 495 | 496 | .spinner, 497 | .spinner:before, 498 | .spinner:after { 499 | border-radius: 50%; 500 | } 501 | .spinner { 502 | color: #ffffff; 503 | font-size: 22px; 504 | text-indent: -99999px; 505 | margin: 0px auto; 506 | position: relative; 507 | width: 20px; 508 | height: 20px; 509 | box-shadow: inset 0 0 0 2px; 510 | -webkit-transform: translateZ(0); 511 | -ms-transform: translateZ(0); 512 | transform: translateZ(0); 513 | } 514 | .spinner:before, 515 | .spinner:after { 516 | position: absolute; 517 | content: ""; 518 | } 519 | .spinner:before { 520 | width: 10.4px; 521 | height: 20.4px; 522 | background: var(--accent-color); 523 | border-radius: 20.4px 0 0 20.4px; 524 | top: -0.2px; 525 | left: -0.2px; 526 | -webkit-transform-origin: 10.4px 10.2px; 527 | transform-origin: 10.4px 10.2px; 528 | -webkit-animation: loading 2s infinite ease 1.5s; 529 | animation: loading 2s infinite ease 1.5s; 530 | } 531 | .spinner:after { 532 | width: 10.4px; 533 | height: 10.2px; 534 | background: var(--accent-color); 535 | border-radius: 0 10.2px 10.2px 0; 536 | top: -0.1px; 537 | left: 10.2px; 538 | -webkit-transform-origin: 0px 10.2px; 539 | transform-origin: 0px 10.2px; 540 | -webkit-animation: loading 2s infinite ease; 541 | animation: loading 2s infinite ease; 542 | } 543 | @-webkit-keyframes loading { 544 | 0% { 545 | -webkit-transform: rotate(0deg); 546 | transform: rotate(0deg); 547 | } 548 | 100% { 549 | -webkit-transform: rotate(360deg); 550 | transform: rotate(360deg); 551 | } 552 | } 553 | @keyframes loading { 554 | 0% { 555 | -webkit-transform: rotate(0deg); 556 | transform: rotate(0deg); 557 | } 558 | 100% { 559 | -webkit-transform: rotate(360deg); 560 | transform: rotate(360deg); 561 | } 562 | } 563 | 564 | /* Animated form */ 565 | 566 | .sr-root { 567 | animation: 0.4s fade-in; 568 | animation-fill-mode: both; 569 | animation-timing-function: ease; 570 | } 571 | 572 | .sr-verification-form .sr-form-row { 573 | animation: 0.4s field-in; 574 | animation-fill-mode: both; 575 | animation-timing-function: ease; 576 | transform-origin: 50% 0%; 577 | } 578 | 579 | .hide { 580 | animation: 0.4s fade-out; 581 | animation-fill-mode: both; 582 | animation-timing-function: ease; 583 | } 584 | 585 | .unhide { 586 | animation: 0.4s fade-in; 587 | animation-fill-mode: both; 588 | animation-timing-function: ease; 589 | } 590 | 591 | .hidden { 592 | display: none; 593 | height: 0; 594 | transition: height 0.38s ease-in-out; 595 | } 596 | 597 | @keyframes field-in { 598 | 0% { 599 | opacity: 0; 600 | transform: translateY(8px) scale(0.95); 601 | } 602 | 100% { 603 | opacity: 1; 604 | transform: translateY(0px) scale(1); 605 | } 606 | } 607 | 608 | @keyframes fade-in { 609 | 0% { 610 | opacity: 0; 611 | transform: scale(0.98); 612 | } 613 | 100% { 614 | opacity: 1; 615 | transform: scale(1); 616 | } 617 | } 618 | 619 | @keyframes expand-in { 620 | 0% { 621 | opacity: 0; 622 | transform: scale(0.98, 0); 623 | } 624 | 100% { 625 | opacity: 1; 626 | transform: scale(1); 627 | } 628 | } 629 | 630 | @keyframes fade-out { 631 | 0% { 632 | opacity: 1; 633 | transform: scale(1); 634 | } 635 | 100% { 636 | opacity: 0; 637 | transform: scale(0.98, 0); 638 | } 639 | } 640 | 641 | /* Progress */ 642 | 643 | .progress-bar { 644 | margin-bottom: 1.8em; 645 | border: 1px solid rgba(21,182,124, 0.18); 646 | border-radius: 4px; 647 | width: 100%; 648 | } 649 | 650 | .progress { 651 | width: 5%; 652 | height: 1em; 653 | border-radius: 4px; 654 | background: 655 | linear-gradient( 656 | -45deg, 657 | rgba(255, 255, 255, 0.15) 25%, 658 | transparent 25%, 659 | transparent 50%, 660 | rgba(255, 255, 255, 0.15) 50%, 661 | rgba(255, 255, 255, 0.15) 75%, 662 | transparent 75% 663 | ) 664 | left/30px 30px repeat-x, 665 | linear-gradient(to right, #0c6d4a, var(--accent-color) 62%) left/var(--p, 100%) fixed, 666 | var(--background-color); 667 | animation: progress-change 1s linear infinite; 668 | transition: width 0.68s ease-in-out; 669 | } 670 | 671 | @keyframes progress-change { 672 | from { 673 | background-position: 0 0, left 674 | } 675 | to { 676 | background-position: 30px 0, left 677 | } 678 | } 679 | 680 | /* Animations */ 681 | 682 | @keyframes fadeIn { 683 | from { 684 | opacity: 0; 685 | } 686 | 687 | to { 688 | opacity: 1; 689 | } 690 | } 691 | 692 | @keyframes fadeOut { 693 | from { 694 | opacity: 1; 695 | } 696 | 697 | to { 698 | opacity: 0; 699 | } 700 | } 701 | 702 | @keyframes zoomIn { 703 | from { 704 | transform: scale(0.8) 705 | } 706 | 707 | to { 708 | transform: scale(1); 709 | } 710 | } 711 | 712 | @keyframes zoomOut { 713 | from { 714 | transform: scale(1) 715 | } 716 | 717 | to { 718 | transform: scale(0.8); 719 | } 720 | } 721 | --------------------------------------------------------------------------------