├── .gitignore ├── LICENSE ├── README.md ├── images ├── balance_display.png ├── create_a_customer.png ├── create_beneficial_owners.png ├── create_bvcr.png ├── create_pvc.png ├── pay_in.png ├── upgrade_customer.png └── upload_document.png ├── package.json ├── pages ├── index.js └── static │ └── styles │ ├── balance.css │ ├── code.css │ ├── create.css │ ├── document.css │ ├── main.css │ ├── payin.css │ ├── personal-vcr.css │ └── upgrade.css └── views ├── balance.hbs ├── beneficial-owners.hbs ├── business-vcr.hbs ├── create-customer.hbs ├── create-funding-source.hbs ├── document.hbs ├── landing.hbs ├── payin.hbs ├── personal-vcr.hbs └── upgrade-customer.hbs /.gitignore: -------------------------------------------------------------------------------- 1 | # Node 2 | node_modules/ 3 | 4 | # Yarn 5 | yarn-error.log 6 | 7 | # PNPM 8 | pnpm-lock.yaml 9 | 10 | # Lerna 11 | lerna-error.log 12 | 13 | # Webpack 14 | dist/ 15 | 16 | # Next.js 17 | .next/ 18 | 19 | *.DS_Store 20 | .idea/ 21 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) 2020 Dwolla 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 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # Dwolla Drop-in Examples 2 | This repo contains Dwolla Drop-in Components using Express. Examples include forms to Create an [Unverified Customer](https://developers.dwolla.com/concepts/customer-types#unverified-customer), Upgrade an Unverified Customer to a [Verified Customer](https://developers.dwolla.com/concepts/customer-types#verified-customer), Create a [Personal Verified Customer](https://developers.dwolla.com/concepts/customer-types#personal-verified-customer), Upload Documents, and View a Verified Customer's Balance. 3 | 4 | Additional drop-in components will be added to this repo as new ones are released. 5 | 6 | Drop-in components are tools designed to assist with a Dwolla integration. As with any tool, it may not fit all desired use cases. 7 | 8 | ## Installation 9 | 10 | `yarn install` 11 | `yarn start` 12 | 13 | ## How to use it 14 | 15 | Copy + Paste code related to the component you'd like to use in order to expediate your Dwolla API integration process, and save weeks of development work. 16 | 17 | You can also read our [Drop-in Components blog series](https://www.dwolla.com/updates/low-code-drop-in-components/) for a step by step guide on how to get started using the first five low-code components. 18 | 19 | ## Drop-ins UI 20 | 21 | By default, the elements within your specified container are responsive to any change and screen size. Dwolla also allows you to customize the styling of your components by providing a stylesheet dwolla.configure containing the attributes found here. 22 | 23 | ### Create a Customer 24 | 25 | This drop-in component form creates both a [Receive Only Customer](https://developers.dwolla.com/concepts/customer-types#unverified-customer) (with `type = "receive-only"`) and an [Unverified Customer](https://developers.dwolla.com/concepts/customer-types#unverified-customer) 26 | 27 | ![create_a_customer](/images/create_a_customer.png) 28 | 29 | ### Upgrade a Customer 30 | 31 | This drop-in component form upgrades an Unverified Customer to a [Verified Customer](https://developers.dwolla.com/concepts/customer-types#verified-customer) 32 | 33 | ![upgrade_a_customer](/images/upgrade_customer.png) 34 | 35 | ### Personal Verified Customer Record 36 | 37 | This drop-in component form creates a [personal Verified Customer](https://developers.dwolla.com/concepts/customer-types#verified-customer) 38 | 39 | ![personal_vcr](/images/create_pvc.png) 40 | 41 | ### Business Verified Customer Record 42 | 43 | This drop-in component handles onboarding [business Verified Customer](https://developers.dwolla.com/concepts/customer-types#verified-customer) 44 | 45 | ![business_vcr](/images/create_bvcr.png) 46 | 47 | ### Beneficial Owners 48 | 49 | This drop-in component can be used for adding Beneficial Owners to a business Verified Customer. 50 | 51 | ![beneficial_owners](/images/create_beneficial_owners.png) 52 | 53 | ### Upload Documents 54 | 55 | This drop-in component let's a Personal Verified Customer to upload their government issued document 56 | 57 | ![upload_document](/images/upload_document.png) 58 | 59 | 60 | ### Balance Display 61 | 62 | This drop-in component let's a Personal Verified Customer view their balance. 63 | 64 | ![balance_display](/images/balance_display.png) 65 | 66 | 67 | ### Pay-In 68 | 69 | This drop-in component can be used in order to transfer from a Customer funding source into your own funding source 70 | 71 | ![pay_in](/images/pay_in.png) 72 | 73 | 74 | ## Where to find the docs 75 | 76 | Visit our [Guide](https://developers.dwolla.com/guides/drop-ins), [Concept](https://developers.dwolla.com/concepts/drop-in-components) [API docs](https://developers.dwolla.com/api-reference/drop-in-components) for more additional information. 77 | 78 | ## Support 79 | 80 | Support queries can be directed to our [Developer Forum](https://discuss.dwolla.com/). 81 | 82 | ## Contributing and Reporting Bugs 83 | 84 | Feel free to fork this repo and submit PRs for any corrections, new features, etc. you think we should include! 85 | -------------------------------------------------------------------------------- /images/balance_display.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Dwolla/drop-ins-examples/2d0903402bb75522dbfbb5fc5401f5a628d8d69c/images/balance_display.png -------------------------------------------------------------------------------- /images/create_a_customer.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Dwolla/drop-ins-examples/2d0903402bb75522dbfbb5fc5401f5a628d8d69c/images/create_a_customer.png -------------------------------------------------------------------------------- /images/create_beneficial_owners.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Dwolla/drop-ins-examples/2d0903402bb75522dbfbb5fc5401f5a628d8d69c/images/create_beneficial_owners.png -------------------------------------------------------------------------------- /images/create_bvcr.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Dwolla/drop-ins-examples/2d0903402bb75522dbfbb5fc5401f5a628d8d69c/images/create_bvcr.png -------------------------------------------------------------------------------- /images/create_pvc.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Dwolla/drop-ins-examples/2d0903402bb75522dbfbb5fc5401f5a628d8d69c/images/create_pvc.png -------------------------------------------------------------------------------- /images/pay_in.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Dwolla/drop-ins-examples/2d0903402bb75522dbfbb5fc5401f5a628d8d69c/images/pay_in.png -------------------------------------------------------------------------------- /images/upgrade_customer.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Dwolla/drop-ins-examples/2d0903402bb75522dbfbb5fc5401f5a628d8d69c/images/upgrade_customer.png -------------------------------------------------------------------------------- /images/upload_document.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Dwolla/drop-ins-examples/2d0903402bb75522dbfbb5fc5401f5a628d8d69c/images/upload_document.png -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "drop-ins-examples", 3 | "version": "1.0.0", 4 | "description": "Example Express app for Dwolla Drop-in Components", 5 | "main": "index.js", 6 | "scripts": { 7 | "test": "echo \"Error: no test specified\" && exit 1", 8 | "start": "node pages/index.js" 9 | }, 10 | "repository": { 11 | "type": "git", 12 | "url": "git+https://github.com/Dwolla/drop-ins-examples.git" 13 | }, 14 | "keywords": [ 15 | "dwolla", 16 | "drop-ins", 17 | "ui", 18 | "components", 19 | "web", 20 | "payments", 21 | "express" 22 | ], 23 | "author": "Nick Schulze", 24 | "license": "MIT", 25 | "bugs": { 26 | "url": "https://github.com/Dwolla/drop-ins-examples/issues" 27 | }, 28 | "homepage": "https://github.com/Dwolla/drop-ins-examples#readme", 29 | "dependencies": { 30 | "body-parser": "^1.19.0", 31 | "dwolla-v2": "^3.2.0", 32 | "express": "^4.17.1", 33 | "hbs": "^4.1.1", 34 | "path": "^0.12.7", 35 | "query-string": "^6.13.7" 36 | }, 37 | "devDependencies": {} 38 | } 39 | -------------------------------------------------------------------------------- /pages/index.js: -------------------------------------------------------------------------------- 1 | const express = require("express"); 2 | const path = require("path"); 3 | const bodyParser = require("body-parser"); 4 | const Client = require("dwolla-v2").Client; 5 | 6 | const dwolla = new Client({ 7 | key: "", 8 | secret: "", 9 | environment: "sandbox", // defaults to 'production' 10 | }); 11 | 12 | const ENVIRONMENT = { 13 | sandbox: "https://api-sandbox.dwolla.com", 14 | production: "https://api.dwolla.com", 15 | }; 16 | const port = 4041; 17 | const env = "sandbox"; 18 | 19 | const app = express(); 20 | app.use(bodyParser.urlencoded({ extended: true })); 21 | app.use(bodyParser.json()); 22 | app.set("view engine", "hbs"); 23 | 24 | app.get("/", function (req, res) { 25 | res.status(200).render(`landing`, {}); 26 | }); 27 | 28 | app.get("/create-customer", function (req, res) { 29 | generateClientToken("customer.create").then((cRes) => { 30 | res.status(200).render(`create-customer`, { token: cRes.token }); 31 | }); 32 | }); 33 | 34 | app.get("/upgrade-customer", function (req, res) { 35 | generateClientToken("customer.update", "0c8bafa5-45ab-4282-8916-cae984ceb147").then( 36 | (cRes) => { 37 | const customer = { 38 | // This body is hard coded, and will need to be replaced in your implementation 39 | id: "0c8bafa5-45ab-4282-8916-cae984ceb147", 40 | firstName: "Jane", 41 | lastName: "Doe", 42 | email: "email14@email.com", 43 | }; 44 | res 45 | .status(200) 46 | .render(`upgrade-customer`, { customer, token: cRes.token }); 47 | } 48 | ); 49 | }); 50 | 51 | app.get("/upload-document", function (req, res) { 52 | 53 | dwolla.post("customers", { 54 | // This body is hard coded, and will need to be replaced in production 55 | type: "personal", 56 | firstName: "document", 57 | lastName: "hodgins", 58 | email: `${Math.random()}email12@email.com`, 59 | address1: "726 Evergreen Terrace", 60 | city: "Springfield", 61 | state: "OR", 62 | postalCode: "32817", 63 | dateOfBirth: "1990-03-22", 64 | ssn: "1111" 65 | }) 66 | 67 | .then(function(customerRes){ 68 | const customerId = customerRes.headers.get("location").split("/").slice(-1)[0] 69 | generateClientToken( 70 | "customer.documents.create", 71 | customerId 72 | ).then((cRes) => { 73 | const customer = { 74 | id: customerId, 75 | }; 76 | res.status(200).render(`document`, { customer, token: cRes.token }); 77 | }); 78 | }) 79 | }); 80 | 81 | // This example lets you select an existing customer to upload a document 82 | app.get("/upload-document-for-existing-customer", function (req, res) { 83 | generateClientToken( 84 | "customer.documents.create", 85 | "26981bca-7a80-4d04-9d21-4c5f44eaef6e" 86 | ).then((cRes) => { 87 | // This body is hard coded, and will need to be replaced in your implementation 88 | const customer = { 89 | id: "26981bca-7a80-4d04-9d21-4c5f44eaef6e" 90 | }; 91 | res.status(200).render(`document`, { customer, token: cRes.token }); 92 | }); 93 | }); 94 | 95 | app.get("/personal-vcr-flow", function (req, res) { 96 | generateClientToken( 97 | "customer.update", 98 | "customerId" 99 | ).then((cRes) => { 100 | const customer = { 101 | id: "customerId", 102 | firstName: "", 103 | lastName: "", 104 | email: "", 105 | }; 106 | res.status(200).render(`personal-vcr`, { customer, token: cRes.token }); 107 | }); 108 | 109 | }); 110 | 111 | app.get("/business-vcr-flow", function (req, res) { 112 | res.status(200).render(`business-vcr`, {}); 113 | }); 114 | 115 | app.get("/beneficial-owners", function (req, res) { 116 | //TODO: Add option to submit customerId from input on client-side 117 | dwolla.post("customers", { 118 | // This body is hard coded, and will need to be replaced in production 119 | firstName: 'Account', 120 | lastName: 'Admin', 121 | email: `${Math.random()}email@email.com`, 122 | type: 'business', 123 | address1: '99-99 33rd St', 124 | city: 'Some City', 125 | state: 'NY', 126 | postalCode: '11101', 127 | controller: { 128 | firstName: 'Jane', 129 | lastName: 'Controller', 130 | title: 'CEO', 131 | dateOfBirth: '1980-01-31', 132 | ssn: '1234', 133 | address: { 134 | address1: '1234 Main st', 135 | address2: 'Apt 12', 136 | city: 'Des Moines', 137 | stateProvinceRegion: 'IA', 138 | postalCode: '50309', 139 | country: 'US', 140 | } 141 | }, 142 | businessClassification: '9ed38155-7d6f-11e3-83c3-5404a6144203', 143 | businessType: 'llc', 144 | businessName: 'Jane Doe Corp', 145 | ein: '12-3456789' 146 | }) 147 | .then(function(customerRes){ 148 | const customerId = customerRes.headers.get("location").split("/").slice(-1)[0] 149 | res.status(200).render(`beneficial-owners`, { customerId }); 150 | }); 151 | }); 152 | 153 | app.get("/balance-display", function (req, res) { 154 | generateClientToken( 155 | "customer.fundingsources.read", 156 | "640e5978-c099-45e2-b3c6-3eef9dd773f7" 157 | ).then((cRes) => { 158 | const customer = { 159 | id: "640e5978-c099-45e2-b3c6-3eef9dd773f7", 160 | firstName: "mya", 161 | lastName: "mya", 162 | email: "mya@mya.com", 163 | }; 164 | res.status(200).render(`balance`, { customer, token: cRes.token }); 165 | }); 166 | }); 167 | 168 | app.get("/payin-flow", function (req, res) { 169 | 170 | //TODO: Replace with sample API call chain 171 | const body = { 172 | action: "customer.transfers.send", 173 | _links: { 174 | customer: { 175 | href: 176 | "http://api-sandbox.dwolla.com/customers/4594a375-ca4c-4220-a36a-fa7ce556449d", 177 | type: "application/vnd.dwolla.v1.hal+json", 178 | "resource-type": "customer", 179 | }, 180 | destination: { 181 | href: 182 | "http://api-sandbox.dwolla.com/funding-sources/707177c3-bf15-4e7e-b37c-55c3898d9bf4", 183 | type: "application/vnd.dwolla.v1.hal+json", 184 | "resource-type": "funding-source", 185 | }, 186 | }, 187 | amount: { 188 | currency: "USD", 189 | value: "1.01", 190 | }, 191 | }; 192 | generateClientTokenWithBody(body).then((cRes) => { 193 | res.status(200).render(`payin`, { blob: cRes.blob, token: cRes.token }); 194 | }); 195 | }); 196 | 197 | app.get("/create-funding-source", function (req, res) { 198 | res.status(200).render("create-funding-source", {}); 199 | }); 200 | 201 | app.get("/styles/:sheet", function (req, res) { 202 | res.sendFile(path.join(__dirname, `/static/styles/${req.params.sheet}`)); 203 | }); 204 | 205 | app.post("/tokenUrl", function (req, res) { 206 | generateClientTokenWithBody(req.body).then((cRes) => { 207 | res.send({ token: cRes.token }); 208 | }); 209 | }); 210 | 211 | function generateClientToken(action, customerId) { 212 | const url = `/client-tokens`; 213 | const body = { 214 | action: action, 215 | }; 216 | 217 | if (customerId) { 218 | body._links = { 219 | customer: { 220 | href: `${ENVIRONMENT[env]}/customers/${customerId}`, 221 | }, 222 | }; 223 | } 224 | 225 | return dwolla 226 | .post(url, body) 227 | .then((response) => { 228 | return response.body; 229 | }) 230 | .catch((error) => { 231 | return error; 232 | }); 233 | } 234 | 235 | function generateClientTokenWithBody(body) { 236 | const url = `/client-tokens`; 237 | 238 | return dwolla 239 | .post(url, body) 240 | .then((response) => { 241 | return response.body; 242 | }) 243 | .catch((error) => { 244 | return error; 245 | }); 246 | } 247 | 248 | 249 | app.listen(port, () => 250 | console.log(`Example app listening at http://localhost:${port}`) 251 | ); 252 | -------------------------------------------------------------------------------- /pages/static/styles/balance.css: -------------------------------------------------------------------------------- 1 | .dwolla-balance { 2 | width: 470px; 3 | } 4 | 5 | .dwolla-balance-display { 6 | color: #354153; 7 | font-family: Roboto; 8 | font-style: normal; 9 | font-weight: 300; 10 | font-size: 48px; 11 | line-height: 20px; 12 | margin-top: 30px; 13 | width: 470px; 14 | border-radius: 20px; 15 | margin-left: auto; 16 | margin-right: auto; 17 | } 18 | 19 | .dwolla-balance-header { 20 | color: #354153; 21 | font-family: Roboto; 22 | font-style: normal; 23 | font-weight: 300; 24 | font-size: 14px; 25 | line-height: 20px; 26 | margin-top: 20px; 27 | width: 470px; 28 | border-radius: 20px; 29 | margin-left: auto; 30 | margin-right: auto; 31 | } 32 | 33 | #dwolla-success { 34 | background-color: #ddf0e0; 35 | color: #58b467; 36 | text-align: center; 37 | padding: 10px; 38 | border-radius: 3px; 39 | border-color: #58b467; 40 | border-style: solid; 41 | border-width: 1px; 42 | } 43 | 44 | #dwolla-info { 45 | background-color: #ddf0e0; 46 | color: #354153; 47 | text-align: center; 48 | padding: 10px; 49 | border-radius: 3px; 50 | border: 1px solid rgba(54, 136, 207, 0.5); 51 | } 52 | 53 | #dwolla-error { 54 | background-color: #f7ebee; 55 | color: #354153; 56 | text-align: center; 57 | padding: 10px; 58 | border-radius: 3px; 59 | border-color: #cf5473; 60 | border-style: solid; 61 | border-width: 1px; 62 | } 63 | 64 | .dwolla-link { 65 | color: #1d6cd1; 66 | } 67 | -------------------------------------------------------------------------------- /pages/static/styles/code.css: -------------------------------------------------------------------------------- 1 | .code-container { 2 | border-radius: 5px; 3 | text-align: left; 4 | margin: 0 auto 5px auto; 5 | color: #354153; 6 | width: 740px; 7 | font-family: "Roboto", sans-serif; 8 | font-weight: 300; 9 | font-size: 14px; 10 | line-height: 19px; 11 | background: #fff; 12 | padding: 5px 10px; 13 | box-shadow: 0 2px 4px 0 rgba(53, 65, 83, 0.12), 14 | 0 0 2px 0 rgba(53, 65, 83, 0.12); 15 | } 16 | 17 | .pre { 18 | width: 740px; 19 | font-family: "monospace"; 20 | font-weight: 300; 21 | text-align: left; 22 | } 23 | -------------------------------------------------------------------------------- /pages/static/styles/create.css: -------------------------------------------------------------------------------- 1 | .dwolla-submit input[type="submit"] { 2 | border: 0; 3 | cursor: pointer; 4 | display: inline-block; 5 | width: 120px; 6 | margin-top: 10px; 7 | margin-bottom: 0px; 8 | padding: 10px 20px; 9 | border-radius: 3px; 10 | font-family: Roboto; 11 | font-style: normal; 12 | font-weight: normal; 13 | font-size: 14px; 14 | line-height: 20px; 15 | text-align: center; 16 | text-decoration: none; 17 | color: #fff; 18 | background-color: #202033; 19 | } 20 | 21 | .dwolla-customer-submit input[type="submit"] { 22 | border: 0; 23 | cursor: pointer; 24 | display: inline-block; 25 | width: 470px; 26 | margin-top: 0px; 27 | margin-bottom: 0px; 28 | padding: 10px 20px; 29 | border-radius: 3px; 30 | font-family: Roboto; 31 | font-style: normal; 32 | font-weight: normal; 33 | font-size: 14px; 34 | line-height: 20px; 35 | text-align: center; 36 | text-decoration: none; 37 | color: #fff; 38 | background-color: #202033; 39 | } 40 | 41 | .dwolla-customer-input { 42 | border: 1px solid #c9d3e0; 43 | cursor: pointer; 44 | display: inline-block; 45 | transition: box-shadow 0.5s, background-color 0.5s, border 0.5s; 46 | border-radius: 3px; 47 | font-family: Roboto; 48 | font-style: normal; 49 | font-weight: normal; 50 | font-size: 14px; 51 | line-height: 20px; 52 | text-align: left; 53 | text-decoration: none; 54 | background-color: #fff; 55 | color: #5e4e76; 56 | } 57 | 58 | .dwolla-width-1 { 59 | width: 470px; 60 | } 61 | 62 | .dwolla-width-1 input[type="text"] { 63 | padding: 10px 0px 10px 15px; 64 | width: 455px; 65 | } 66 | 67 | .dwolla-width-2 { 68 | width: 228px; 69 | } 70 | 71 | .dwolla-width-2 input[type="text"] { 72 | padding: 10px 0px 10px 15px; 73 | width: 213px; 74 | } 75 | 76 | .dwolla-width-3 { 77 | width: 147px; 78 | } 79 | 80 | .dwolla-width-3 input[type="text"] { 81 | padding: 10px 0px 10px 15px; 82 | width: 133px; 83 | } 84 | 85 | .margin-bump { 86 | margin-right: 10px !important; 87 | } 88 | 89 | ::placeholder { 90 | color: #52627b; 91 | opacity: 1; 92 | } 93 | 94 | :-ms-input-placeholder { 95 | color: #52627b; 96 | } 97 | 98 | ::-ms-input-placeholder { 99 | color: #52627b; 100 | } 101 | 102 | #dwolla-success { 103 | background-color: #ddf0e0; 104 | color: #354153; 105 | text-align: center; 106 | padding: 10px; 107 | border-radius: 3px; 108 | border-color: #58b467; 109 | border-style: solid; 110 | border-width: 1px; 111 | } 112 | 113 | #dwolla-info { 114 | background-color: #ddf0e0; 115 | color: #354153; 116 | text-align: center; 117 | padding: 10px; 118 | border-radius: 3px; 119 | border: 1px solid rgba(54, 136, 207, 0.5); 120 | } 121 | 122 | #dwolla-error { 123 | background-color: #f7ebee; 124 | color: #354153; 125 | text-align: center; 126 | padding: 10px; 127 | border-radius: 3px; 128 | border-color: #cf5473; 129 | border-style: solid; 130 | border-width: 1px; 131 | } 132 | 133 | .dwolla-link { 134 | color: #1d6cd1; 135 | } 136 | 137 | .dwolla-customer-tos { 138 | width: 100%; 139 | height: 80px; 140 | font-family: Roboto; 141 | font-style: normal; 142 | font-weight: normal; 143 | font-size: 14px; 144 | line-height: 20px; 145 | margin-top: 20px; 146 | } 147 | 148 | .dwolla-customer-checkbox { 149 | width: 5%; 150 | height: 80px; 151 | display: inline; 152 | float: left; 153 | } 154 | 155 | .dwolla-customer-text { 156 | width: 91%; 157 | height: 80px; 158 | display: inline; 159 | float: left; 160 | margin-left: 10px; 161 | } 162 | 163 | .dwolla-loading { 164 | background-color: #5e4e76; 165 | position: relative; 166 | animation-name: loading; 167 | animation-duration: 3s; 168 | animation-iteration-count: infinite; 169 | } 170 | 171 | .dwolla-input-container { 172 | display: inline-block; 173 | margin-left: auto; 174 | margin-right: auto; 175 | margin-top: 10px; 176 | padding: 0px 0px; 177 | } 178 | 179 | .dwolla-input-container label { 180 | text-align: left; 181 | display: block; 182 | font-family: Roboto; 183 | font-style: normal; 184 | font-weight: normal; 185 | font-size: 14px; 186 | line-height: 20px; 187 | } 188 | 189 | @keyframes loading { 190 | 0% { 191 | background-color: #5e4e76; 192 | } 193 | 50% { 194 | background-color: #8393aa; 195 | } 196 | 100% { 197 | background-color: #5e4e76; 198 | } 199 | } 200 | 201 | .hide-class { 202 | display: none; 203 | } 204 | -------------------------------------------------------------------------------- /pages/static/styles/document.css: -------------------------------------------------------------------------------- 1 | .dwolla-document-submit input[type="submit"] { 2 | border: 0; 3 | cursor: pointer; 4 | display: inline-block; 5 | width: 470px; 6 | margin-top: 20px; 7 | margin-bottom: 0px; 8 | padding: 10px 20px; 9 | background: #202033; 10 | box-shadow: 0px 1px 0px rgba(22, 29, 37, 0.1), 11 | inset 0px 1px 0px 1px rgba(255, 255, 255, 0.06); 12 | border-radius: 3px; 13 | font-family: "Roboto"; 14 | font-size: 14px; 15 | font-weight: 400; 16 | line-height: 21px; 17 | text-align: center; 18 | text-decoration: none; 19 | color: #fff; 20 | } 21 | 22 | .dwolla-submit input[type="submit"] { 23 | border: 0; 24 | cursor: pointer; 25 | display: inline-block; 26 | width: 470px; 27 | margin-top: 20px; 28 | margin-bottom: 0px; 29 | padding: 10px 20px; 30 | background: #202033; 31 | box-shadow: 0px 1px 0px rgba(22, 29, 37, 0.1), 32 | inset 0px 1px 0px 1px rgba(255, 255, 255, 0.06); 33 | border-radius: 3px; 34 | font-family: "Roboto"; 35 | font-size: 14px; 36 | font-weight: 400; 37 | line-height: 21px; 38 | text-align: center; 39 | text-decoration: none; 40 | color: #fff; 41 | } 42 | 43 | .dwolla-document-choose input[type="file"] { 44 | display: none; 45 | } 46 | 47 | .dwolla-file-name { 48 | margin-top: 10px; 49 | margin-bottom: 0px; 50 | height: 40px; 51 | width: 470px; 52 | } 53 | 54 | .dwolla-document-label { 55 | text-align: left; 56 | display: inline-block; 57 | width: 470px; 58 | } 59 | 60 | .dwolla-document-chooser { 61 | cursor: pointer; 62 | display: inline-block; 63 | margin-top: 10px; 64 | margin-bottom: 0px; 65 | margin-left: -5px; 66 | padding: 10px 20px; 67 | box-shadow: 0px 1px 0px rgba(22, 29, 37, 0.05); 68 | border-radius: 3px; 69 | font-family: "Roboto"; 70 | font-size: 14px; 71 | font-weight: 400; 72 | line-height: 21px; 73 | text-align: center; 74 | text-decoration: none; 75 | color: #354153; 76 | background: rgba(201, 211, 224, 0.6); 77 | border: 1px solid #c9d3e0; 78 | } 79 | 80 | .dwolla-document-type { 81 | border: 0; 82 | float: left; 83 | margin-top: 5px; 84 | margin-bottom: 20px; 85 | padding: 10px 0px; 86 | font-family: "Roboto"; 87 | font-size: 14px; 88 | font-weight: 400; 89 | line-height: 21px; 90 | text-align: left; 91 | } 92 | 93 | .dwolla-document-type select { 94 | border: 1px solid #c9d3e0; 95 | width: 470px; 96 | cursor: pointer; 97 | display: inline-block; 98 | margin-top: 5px; 99 | margin-bottom: 0px; 100 | padding: 10px 20px; 101 | border-radius: 3px; 102 | font-family: "Roboto"; 103 | font-size: 14px; 104 | font-weight: 400; 105 | line-height: 21px; 106 | text-align: left; 107 | color: #354153; 108 | background-color: #fff; 109 | box-shadow: 0px 1px 0px rgba(22, 29, 37, 0.05); 110 | } 111 | 112 | .dwolla-document-type option { 113 | font-family: sans-serif; 114 | font-weight: 400; 115 | } 116 | 117 | .dwolla-document-name-display { 118 | text-align: center; 119 | padding: 5px; 120 | border: 1px solid #c9d3e0; 121 | width: 314px; 122 | cursor: pointer; 123 | display: inline-block; 124 | margin-top: 25px; 125 | margin-bottom: 0px; 126 | margin-right: 0px; 127 | padding: 10px 20px; 128 | border-radius: 3px; 129 | font-family: "Roboto"; 130 | font-size: 14px; 131 | font-weight: 400; 132 | line-height: 21px; 133 | text-align: left; 134 | color: #354153; 135 | background-color: #fff; 136 | box-shadow: 0px 1px 0px rgba(22, 29, 37, 0.05); 137 | } 138 | 139 | .dwolla-document-description { 140 | color: #52627b; 141 | text-align: left; 142 | padding: 5px 0px; 143 | } 144 | 145 | #dwolla-success { 146 | background-color: #ddf0e0; 147 | color: #354153; 148 | text-align: center; 149 | padding: 10px; 150 | border-radius: 3px; 151 | border-color: #58b467; 152 | border-style: solid; 153 | border-width: 1px; 154 | } 155 | 156 | #dwolla-info { 157 | background-color: #ddf0e0; 158 | color: #354153; 159 | text-align: center; 160 | padding: 10px; 161 | border-radius: 3px; 162 | border: 1px solid rgba(54, 136, 207, 0.5); 163 | } 164 | 165 | #dwolla-error { 166 | background-color: #f7ebee; 167 | color: #354153; 168 | text-align: center; 169 | padding: 10px; 170 | border-radius: 3px; 171 | border-color: #cf5473; 172 | border-style: solid; 173 | border-width: 1px; 174 | } 175 | 176 | .dwolla-link { 177 | color: #1d6cd1; 178 | } 179 | 180 | .dwolla-loading { 181 | background-color: #5e4e76; 182 | position: relative; 183 | animation-name: loading; 184 | animation-duration: 3s; 185 | animation-iteration-count: infinite; 186 | } 187 | 188 | @keyframes loading { 189 | 0% { 190 | background-color: #5e4e76; 191 | } 192 | 50% { 193 | background-color: #8393aa; 194 | } 195 | 100% { 196 | background-color: #5e4e76; 197 | } 198 | } 199 | 200 | .hide-class { 201 | display: none; 202 | } 203 | -------------------------------------------------------------------------------- /pages/static/styles/main.css: -------------------------------------------------------------------------------- 1 | .container { 2 | height: 1420px; 3 | background-color: #f4f7fb; 4 | font-family: Roboto; 5 | font-style: normal; 6 | font-weight: normal; 7 | font-size: 14px; 8 | line-height: 20px; 9 | color: #354153; 10 | } 11 | 12 | .container-sm { 13 | text-align: center; 14 | margin-bottom: 50px; 15 | } 16 | 17 | .container-menu { 18 | width: 1000px; 19 | margin-left: auto; 20 | margin-right: auto; 21 | text-align: center; 22 | margin-bottom: 50px; 23 | } 24 | 25 | .menu-item a { 26 | margin: 10px; 27 | padding: 10px; 28 | border-style: solid; 29 | border-color: white; 30 | float: left; 31 | color: #354153; 32 | background-color: white; 33 | text-decoration: none; 34 | } 35 | 36 | .orange-border { 37 | padding: 20px; 38 | width: 470px; 39 | margin-left: auto; 40 | margin-right: auto; 41 | } 42 | 43 | .banner-image { 44 | width: 169px; 45 | padding: 10px; 46 | height: 80px; 47 | font-family: "Poppins", sans-serif; 48 | font-size: 12px; 49 | margin-top: 20px; 50 | } 51 | 52 | .code-container { 53 | border-radius: 5px; 54 | text-align: left; 55 | margin: 0 auto 5px auto; 56 | color: #354153; 57 | width: 960px; 58 | font-family: "Roboto", sans-serif; 59 | font-weight: 300; 60 | font-size: 14px; 61 | line-height: 19px; 62 | background: #fff; 63 | padding: 5px 10px; 64 | box-shadow: 0 2px 4px 0 rgba(53, 65, 83, 0.12), 65 | 0 0 2px 0 rgba(53, 65, 83, 0.12); 66 | } 67 | 68 | .pre { 69 | width: 740px; 70 | font-family: "monospace"; 71 | font-weight: 300; 72 | text-align: left; 73 | } 74 | -------------------------------------------------------------------------------- /pages/static/styles/payin.css: -------------------------------------------------------------------------------- 1 | .dwolla-payin { 2 | width: 470px; 3 | background-color: #ffffff; 4 | margin-left: auto; 5 | margin-right: auto; 6 | border-radius: 3px; 7 | padding: 25px; 8 | } 9 | 10 | .dwolla-payin-submit input[type="submit"] { 11 | border: 0; 12 | cursor: pointer; 13 | display: inline-block; 14 | width: 470px; 15 | margin-top: 40px; 16 | margin-bottom: 10px; 17 | padding: 10px 20px; 18 | transition: box-shadow 0.5s, background-color 0.5s, border 0.5s; 19 | border-radius: 3px; 20 | font-family: "Roboto", sans-serif; 21 | font-size: 14px; 22 | font-weight: 400; 23 | line-height: 21px; 24 | text-align: center; 25 | text-decoration: none; 26 | color: #fff; 27 | background-color: #2d2d48; 28 | box-shadow: 0 2px 4px 0 rgba(53, 65, 83, 0.12), 29 | 0 0 2px 0 rgba(53, 65, 83, 0.12); 30 | } 31 | 32 | .dwolla-submit input[type="submit"] { 33 | border: 0; 34 | cursor: pointer; 35 | display: inline-block; 36 | width: 470px; 37 | margin-top: 10px; 38 | margin-bottom: 0px; 39 | padding: 10px 20px; 40 | transition: box-shadow 0.5s, background-color 0.5s, border 0.5s; 41 | border-radius: 5px; 42 | font-family: "Roboto", sans-serif; 43 | font-size: 14px; 44 | font-weight: 400; 45 | line-height: 21px; 46 | text-align: center; 47 | text-decoration: none; 48 | color: #fff; 49 | background-color: #5e4e76; 50 | box-shadow: 0 2px 4px 0 rgba(53, 65, 83, 0.12), 51 | 0 0 2px 0 rgba(53, 65, 83, 0.12); 52 | } 53 | 54 | .dwolla-document-choose input[type="file"] { 55 | display: none; 56 | } 57 | 58 | .dwolla-amount { 59 | color: #5e4e76; 60 | width: 470px; 61 | margin-left: auto; 62 | margin-right: auto; 63 | margin-bottom: 20px; 64 | } 65 | 66 | .dwolla-amount-label { 67 | margin-left: auto; 68 | margin-right: auto; 69 | text-align: center; 70 | color: #212b36; 71 | width: 470px; 72 | display: inline-block; 73 | } 74 | 75 | .dwolla-funding-source-label { 76 | float: left; 77 | text-align: left; 78 | color: #5e4e76; 79 | width: 470px; 80 | } 81 | 82 | .dwolla-amount-display { 83 | color: #354153; 84 | width: 470px; 85 | margin-left: auto; 86 | margin-right: auto; 87 | font-size: 48px; 88 | margin-top: 20px; 89 | font-weight: 300; 90 | height: 60px; 91 | } 92 | 93 | .dwolla-funding-sources { 94 | margin-top: 20px; 95 | } 96 | 97 | .dwolla-funding-sources select { 98 | width: 470px; 99 | border: 0; 100 | cursor: pointer; 101 | display: inline-block; 102 | margin-top: 5px; 103 | margin-bottom: 0px; 104 | padding: 10px 20px; 105 | transition: box-shadow 0.5s, background-color 0.5s, border 0.5s; 106 | font-family: "Roboto", sans-serif; 107 | font-size: 14px; 108 | font-weight: 400; 109 | line-height: 21px; 110 | text-align: left; 111 | color: #5e4e76; 112 | background-color: #fff; 113 | border: 1px solid #c9d3e0; 114 | box-sizing: border-box; 115 | box-shadow: 0px 1px 0px rgba(22, 29, 37, 0.05); 116 | border-radius: 3px; 117 | } 118 | 119 | .dwolla-payin-title { 120 | text-align: left; 121 | padding: 5px; 122 | margin-bottom: 20px; 123 | width: 320px; 124 | color: #5e4e76; 125 | font-size: 22px; 126 | padding-left: 10px; 127 | } 128 | 129 | #dwolla-success { 130 | background-color: #ddf0e0; 131 | color: #354153; 132 | text-align: center; 133 | padding: 10px; 134 | border-radius: 3px; 135 | border-color: #58b467; 136 | border-style: solid; 137 | border-width: 1px; 138 | margin-bottom: 20px; 139 | } 140 | 141 | #dwolla-info { 142 | background-color: #ddf0e0; 143 | color: #354153; 144 | text-align: center; 145 | padding: 10px; 146 | border-radius: 3px; 147 | border: 1px solid rgba(54, 136, 207, 0.5); 148 | margin-bottom: 20px; 149 | } 150 | 151 | #dwolla-error { 152 | background-color: #f7ebee; 153 | color: #354153; 154 | text-align: center; 155 | padding: 10px; 156 | border-radius: 3px; 157 | border-color: #cf5473; 158 | border-style: solid; 159 | border-width: 1px; 160 | margin-bottom: 20px; 161 | } 162 | 163 | .dwolla-loading { 164 | background-color: #5e4e76; 165 | position: relative; 166 | animation-name: loading; 167 | animation-duration: 3s; 168 | animation-iteration-count: infinite; 169 | } 170 | 171 | .line { 172 | margin-left: auto; 173 | margin-right: auto; 174 | width: 300px; 175 | height: 2px; 176 | background-color: #5e4e76; 177 | } 178 | 179 | @keyframes loading { 180 | 0% { 181 | background-color: #5e4e76; 182 | } 183 | 50% { 184 | background-color: #8393aa; 185 | } 186 | 100% { 187 | background-color: #5e4e76; 188 | } 189 | } 190 | -------------------------------------------------------------------------------- /pages/static/styles/personal-vcr.css: -------------------------------------------------------------------------------- 1 | .dwolla-submit input[type="submit"] { 2 | border: 0; 3 | cursor: pointer; 4 | display: inline-block; 5 | width: 120px; 6 | margin-top: 10px; 7 | margin-bottom: 0px; 8 | padding: 10px 20px; 9 | border-radius: 3px; 10 | font-family: Roboto; 11 | font-style: normal; 12 | font-weight: normal; 13 | font-size: 14px; 14 | line-height: 20px; 15 | text-align: center; 16 | text-decoration: none; 17 | color: #fff; 18 | background-color: #202033; 19 | box-shadow: 0px 1px 0px rgba(22, 29, 37, 0.1), 20 | inset 0px 1px 0px 1px rgba(255, 255, 255, 0.06); 21 | } 22 | 23 | .dwolla-vcr-submit input[type="submit"] { 24 | border: 0; 25 | cursor: pointer; 26 | display: inline-block; 27 | width: 470px; 28 | margin-top: 0px; 29 | margin-bottom: 0px; 30 | padding: 10px 20px; 31 | border-radius: 3px; 32 | font-family: Roboto; 33 | font-style: normal; 34 | font-weight: normal; 35 | font-size: 14px; 36 | line-height: 20px; 37 | text-align: center; 38 | text-decoration: none; 39 | color: #fff; 40 | background-color: #202033; 41 | box-shadow: 0px 1px 0px rgba(22, 29, 37, 0.1), 42 | inset 0px 1px 0px 1px rgba(255, 255, 255, 0.06); 43 | } 44 | 45 | .dwolla-vcr-submit input[type="submit"]:disabled { 46 | background: #dddddd; 47 | cursor: default; 48 | } 49 | 50 | .dwolla-customer-input { 51 | border: 1px solid #c9d3e0; 52 | cursor: pointer; 53 | display: inline-block; 54 | transition: box-shadow 0.5s, background-color 0.5s, border 0.5s; 55 | border-radius: 3px; 56 | font-family: Roboto; 57 | font-style: normal; 58 | font-weight: normal; 59 | font-size: 14px; 60 | line-height: 20px; 61 | text-align: left; 62 | text-decoration: none; 63 | background-color: #fff; 64 | color: #5e4e76; 65 | } 66 | 67 | .dwolla-width-1 { 68 | width: 470px; 69 | } 70 | 71 | .dwolla-width-1 input[type="text"] { 72 | padding: 10px 0px 10px 15px; 73 | width: 455px; 74 | } 75 | 76 | .dwolla-width-2 { 77 | width: 228px; 78 | } 79 | 80 | .dwolla-width-2 input[type="text"] { 81 | padding: 10px 0px 10px 15px; 82 | width: 213px; 83 | } 84 | 85 | .dwolla-width-3 { 86 | width: 147px; 87 | } 88 | 89 | .dwolla-width-3 input[type="text"] { 90 | padding: 10px 0px 10px 15px; 91 | width: 133px; 92 | } 93 | 94 | ::placeholder { 95 | color: #52627b; 96 | opacity: 1; 97 | } 98 | 99 | :-ms-input-placeholder { 100 | color: #52627b; 101 | } 102 | 103 | ::-ms-input-placeholder { 104 | color: #52627b; 105 | } 106 | 107 | .dwolla-customer-input[type="text"]:disabled { 108 | background: #dddddd; 109 | cursor: default; 110 | } 111 | 112 | #dwolla-success { 113 | background-color: #ddf0e0; 114 | color: #354153; 115 | text-align: center; 116 | padding: 10px; 117 | border-radius: 3px; 118 | border-color: #58b467; 119 | border-style: solid; 120 | border-width: 1px; 121 | } 122 | 123 | #dwolla-info { 124 | background: rgba(54, 136, 207, 0.15); 125 | color: #354153; 126 | text-align: center; 127 | padding: 10px; 128 | border-radius: 3px; 129 | border: 1px solid rgba(54, 136, 207, 0.5); 130 | } 131 | 132 | #dwolla-error { 133 | background-color: #f7ebee; 134 | color: #354153; 135 | text-align: center; 136 | padding: 10px; 137 | border-radius: 3px; 138 | border-color: #cf5473; 139 | border-style: solid; 140 | border-width: 1px; 141 | } 142 | 143 | .dwolla-link { 144 | color: #1d6cd1; 145 | } 146 | 147 | .dwolla-customer-tos { 148 | width: 100%; 149 | height: 80px; 150 | font-family: Roboto; 151 | font-style: normal; 152 | font-weight: normal; 153 | font-size: 14px; 154 | line-height: 20px; 155 | margin-top: 20px; 156 | } 157 | 158 | .dwolla-customer-checkbox { 159 | width: 5%; 160 | height: 80px; 161 | display: inline; 162 | float: left; 163 | } 164 | 165 | .dwolla-customer-text { 166 | width: 91%; 167 | height: 80px; 168 | display: inline; 169 | float: left; 170 | margin-left: 10px; 171 | } 172 | 173 | .dwolla-input-container { 174 | display: inline-block; 175 | margin-left: auto; 176 | margin-right: auto; 177 | margin-top: 10px; 178 | padding: 0px 0px; 179 | } 180 | 181 | .dwolla-input-container label { 182 | text-align: left; 183 | display: block; 184 | font-family: Roboto; 185 | font-style: normal; 186 | font-weight: normal; 187 | font-size: 14px; 188 | line-height: 20px; 189 | } 190 | 191 | .dwolla-loading { 192 | background-color: #5e4e76; 193 | position: relative; 194 | animation-name: loading; 195 | animation-duration: 3s; 196 | animation-iteration-count: infinite; 197 | } 198 | 199 | @keyframes loading { 200 | 0% { 201 | background-color: #5e4e76; 202 | } 203 | 50% { 204 | background-color: #8393aa; 205 | } 206 | 100% { 207 | background-color: #5e4e76; 208 | } 209 | } 210 | 211 | .dwolla-document-submit input[type="submit"] { 212 | border: 0; 213 | cursor: pointer; 214 | display: inline-block; 215 | width: 120px; 216 | margin-top: 45px; 217 | margin-bottom: 0px; 218 | padding: 10px 20px; 219 | transition: box-shadow 0.5s, background-color 0.5s, border 0.5s; 220 | border-radius: 3px; 221 | font-family: "Poppins", sans-serif; 222 | font-size: 14px; 223 | font-weight: 400; 224 | line-height: 21px; 225 | text-align: center; 226 | text-decoration: none; 227 | color: #fff; 228 | background-color: #5e4e76; 229 | } 230 | 231 | .dwolla-submit input[type="submit"] { 232 | border: 0; 233 | cursor: pointer; 234 | display: inline-block; 235 | width: 120px; 236 | margin-top: 10px; 237 | margin-bottom: 0px; 238 | padding: 10px 20px; 239 | transition: box-shadow 0.5s, background-color 0.5s, border 0.5s; 240 | border-radius: 5px; 241 | font-family: "Poppins", sans-serif; 242 | font-size: 14px; 243 | font-weight: 400; 244 | line-height: 21px; 245 | text-align: center; 246 | text-decoration: none; 247 | color: #fff; 248 | background-color: #5e4e76; 249 | } 250 | 251 | .dwolla-document-choose input[type="file"] { 252 | display: none; 253 | } 254 | 255 | .dwolla-document-type { 256 | border: 0; 257 | float: left; 258 | margin-top: 5px; 259 | margin-bottom: 0px; 260 | padding: 10px 10px; 261 | font-family: "Poppins", sans-serif; 262 | font-size: 14px; 263 | font-weight: 400; 264 | line-height: 21px; 265 | } 266 | 267 | .dwolla-document-type select { 268 | border: 0; 269 | cursor: pointer; 270 | float: left; 271 | margin-top: 5px; 272 | margin-bottom: 0px; 273 | padding: 10px 20px; 274 | transition: box-shadow 0.5s, background-color 0.5s, border 0.5s; 275 | border-radius: 5px; 276 | font-family: "Poppins", sans-serif; 277 | font-size: 14px; 278 | font-weight: 400; 279 | line-height: 21px; 280 | text-align: center; 281 | color: #5e4e76; 282 | background-color: #fff; 283 | box-shadow: 0 2px 4px 0 rgba(53, 65, 83, 0.12), 284 | 0 0 2px 0 rgba(53, 65, 83, 0.12); 285 | } 286 | 287 | .dwolla-document-type label { 288 | border: 0; 289 | cursor: pointer; 290 | float: left; 291 | margin-top: 5px; 292 | margin-bottom: 0px; 293 | font-family: "Poppins", sans-serif; 294 | font-size: 12px; 295 | font-weight: 400; 296 | line-height: 21px; 297 | text-align: left; 298 | color: #5e4e76; 299 | } 300 | 301 | .dwolla-document-name-display { 302 | text-align: center; 303 | padding: 5px; 304 | border: 1px solid #c9d3e0; 305 | width: 314px; 306 | cursor: pointer; 307 | display: inline-block; 308 | margin-top: 25px; 309 | margin-bottom: 0px; 310 | margin-right: 0px; 311 | padding: 10px 20px; 312 | border-radius: 3px; 313 | font-family: "Roboto"; 314 | font-size: 14px; 315 | font-weight: 400; 316 | line-height: 21px; 317 | text-align: left; 318 | color: #354153; 319 | background-color: #fff; 320 | box-shadow: 0px 1px 0px rgba(22, 29, 37, 0.05); 321 | } 322 | 323 | #dwolla-personal-vcr { 324 | height: 700px; 325 | } 326 | 327 | .hide-class { 328 | display: none; 329 | } 330 | 331 | .dwolla-span-container { 332 | display: inline-block; 333 | width: 320px; 334 | margin-left: auto; 335 | margin-right: auto; 336 | margin-top: 10px; 337 | padding: 0px 0px; 338 | } 339 | 340 | .dwolla-span-container label { 341 | text-align: center; 342 | display: block; 343 | font-family: "Poppins", sans-serif; 344 | font-size: 10px; 345 | } 346 | 347 | .dwolla-document-submit input[type="submit"] { 348 | border: 0; 349 | cursor: pointer; 350 | display: inline-block; 351 | width: 470px; 352 | margin-top: 20px; 353 | margin-bottom: 0px; 354 | padding: 10px 20px; 355 | background: #202033; 356 | box-shadow: 0px 1px 0px rgba(22, 29, 37, 0.1), 357 | inset 0px 1px 0px 1px rgba(255, 255, 255, 0.06); 358 | border-radius: 3px; 359 | font-family: "Roboto"; 360 | font-size: 14px; 361 | font-weight: 400; 362 | line-height: 21px; 363 | text-align: center; 364 | text-decoration: none; 365 | color: #fff; 366 | } 367 | 368 | .dwolla-submit input[type="submit"] { 369 | border: 0; 370 | cursor: pointer; 371 | display: inline-block; 372 | width: 470px; 373 | margin-top: 20px; 374 | margin-bottom: 0px; 375 | padding: 10px 20px; 376 | background: #202033; 377 | box-shadow: 0px 1px 0px rgba(22, 29, 37, 0.1), 378 | inset 0px 1px 0px 1px rgba(255, 255, 255, 0.06); 379 | border-radius: 3px; 380 | font-family: "Roboto"; 381 | font-size: 14px; 382 | font-weight: 400; 383 | line-height: 21px; 384 | text-align: center; 385 | text-decoration: none; 386 | color: #fff; 387 | } 388 | 389 | .dwolla-document-choose input[type="file"] { 390 | display: none; 391 | } 392 | 393 | .dwolla-file-name { 394 | margin-top: 10px; 395 | margin-bottom: 0px; 396 | height: 40px; 397 | width: 470px; 398 | } 399 | 400 | .dwolla-document-label { 401 | text-align: left; 402 | display: inline-block; 403 | width: 470px; 404 | } 405 | 406 | .dwolla-document-chooser { 407 | cursor: pointer; 408 | display: inline-block; 409 | margin-top: 10px; 410 | margin-bottom: 0px; 411 | margin-left: -5px; 412 | padding: 10px 20px; 413 | box-shadow: 0px 1px 0px rgba(22, 29, 37, 0.05); 414 | border-radius: 3px; 415 | font-family: "Roboto"; 416 | font-size: 14px; 417 | font-weight: 400; 418 | line-height: 21px; 419 | text-align: center; 420 | text-decoration: none; 421 | color: #354153; 422 | background: rgba(201, 211, 224, 0.6); 423 | border: 1px solid #c9d3e0; 424 | } 425 | 426 | .dwolla-document-type { 427 | border: 0; 428 | float: left; 429 | margin-top: 5px; 430 | margin-bottom: 20px; 431 | padding: 10px 0px; 432 | font-family: "Roboto"; 433 | font-size: 14px; 434 | font-weight: 400; 435 | line-height: 21px; 436 | text-align: left; 437 | } 438 | 439 | .dwolla-document-type select { 440 | border: 1px solid #c9d3e0; 441 | width: 470px; 442 | cursor: pointer; 443 | display: inline-block; 444 | margin-top: 5px; 445 | margin-bottom: 0px; 446 | padding: 10px 20px; 447 | border-radius: 3px; 448 | font-family: "Roboto"; 449 | font-size: 14px; 450 | font-weight: 400; 451 | line-height: 21px; 452 | text-align: left; 453 | color: #354153; 454 | background-color: #fff; 455 | box-shadow: 0px 1px 0px rgba(22, 29, 37, 0.05); 456 | } 457 | 458 | .dwolla-document-type option { 459 | font-family: sans-serif; 460 | font-weight: 400; 461 | } 462 | 463 | .dwolla-document-description { 464 | color: #52627b; 465 | text-align: left; 466 | padding: 5px 0px; 467 | } 468 | -------------------------------------------------------------------------------- /pages/static/styles/upgrade.css: -------------------------------------------------------------------------------- 1 | .dwolla-submit input[type="submit"] { 2 | border: 0; 3 | cursor: pointer; 4 | display: inline-block; 5 | width: 120px; 6 | margin-top: 10px; 7 | margin-bottom: 0px; 8 | padding: 10px 20px; 9 | border-radius: 3px; 10 | font-family: Roboto; 11 | font-style: normal; 12 | font-weight: normal; 13 | font-size: 14px; 14 | line-height: 20px; 15 | text-align: center; 16 | text-decoration: none; 17 | color: #fff; 18 | background-color: #202033; 19 | } 20 | 21 | .dwolla-customer-submit input[type="submit"] { 22 | border: 0; 23 | cursor: pointer; 24 | display: inline-block; 25 | width: 470px; 26 | margin-top: 0px; 27 | margin-bottom: 0px; 28 | padding: 10px 20px; 29 | border-radius: 3px; 30 | font-family: Roboto; 31 | font-style: normal; 32 | font-weight: normal; 33 | font-size: 14px; 34 | line-height: 20px; 35 | text-align: center; 36 | text-decoration: none; 37 | color: #fff; 38 | background-color: #202033; 39 | } 40 | 41 | .dwolla-customer-input { 42 | border: 1px solid #c9d3e0; 43 | cursor: pointer; 44 | display: inline-block; 45 | transition: box-shadow 0.5s, background-color 0.5s, border 0.5s; 46 | border-radius: 3px; 47 | font-family: Roboto; 48 | font-style: normal; 49 | font-weight: normal; 50 | font-size: 14px; 51 | line-height: 20px; 52 | text-align: left; 53 | text-decoration: none; 54 | background-color: #fff; 55 | color: #5e4e76; 56 | } 57 | 58 | .dwolla-width-1 { 59 | width: 470px; 60 | } 61 | 62 | .dwolla-width-1 input[type="text"] { 63 | padding: 10px 0px 10px 15px; 64 | width: 455px; 65 | } 66 | 67 | .dwolla-width-2 { 68 | width: 228px; 69 | } 70 | 71 | .dwolla-width-2 input[type="text"] { 72 | padding: 10px 0px 10px 15px; 73 | width: 213px; 74 | } 75 | 76 | .dwolla-width-3 { 77 | width: 147px; 78 | } 79 | 80 | .dwolla-width-3 input[type="text"] { 81 | padding: 10px 0px 10px 15px; 82 | width: 133px; 83 | } 84 | 85 | .margin-bump { 86 | margin-right: 10px !important; 87 | } 88 | 89 | ::placeholder { 90 | color: #52627b; 91 | opacity: 1; 92 | } 93 | 94 | :-ms-input-placeholder { 95 | color: #52627b; 96 | } 97 | 98 | ::-ms-input-placeholder { 99 | color: #52627b; 100 | } 101 | 102 | #dwolla-success { 103 | background-color: #ddf0e0; 104 | color: #58b467; 105 | text-align: center; 106 | padding: 10px; 107 | border-radius: 3px; 108 | border-color: #58b467; 109 | border-style: solid; 110 | border-width: 1px; 111 | } 112 | 113 | #dwolla-info { 114 | background: rgba(54, 136, 207, 0.15); 115 | color: #354153; 116 | text-align: center; 117 | padding: 10px; 118 | border-radius: 3px; 119 | border: 1px solid rgba(54, 136, 207, 0.5); 120 | } 121 | 122 | #dwolla-error { 123 | background-color: #f7ebee; 124 | color: #354153; 125 | text-align: center; 126 | padding: 10px; 127 | border-radius: 3px; 128 | border-color: #cf5473; 129 | border-style: solid; 130 | border-width: 1px; 131 | } 132 | 133 | .dwolla-link { 134 | color: #1d6cd1; 135 | } 136 | 137 | .dwolla-customer-tos { 138 | width: 100%; 139 | height: 80px; 140 | font-family: Roboto; 141 | font-style: normal; 142 | font-weight: normal; 143 | font-size: 14px; 144 | line-height: 20px; 145 | margin-top: 20px; 146 | } 147 | 148 | .dwolla-customer-checkbox { 149 | width: 5%; 150 | height: 80px; 151 | display: inline; 152 | float: left; 153 | } 154 | 155 | .dwolla-customer-text { 156 | width: 91%; 157 | height: 80px; 158 | display: inline; 159 | float: left; 160 | margin-left: 10px; 161 | } 162 | 163 | .dwolla-input-container { 164 | display: inline-block; 165 | margin-left: auto; 166 | margin-right: auto; 167 | margin-top: 10px; 168 | padding: 0px 0px; 169 | } 170 | 171 | .dwolla-input-container label { 172 | text-align: left; 173 | display: block; 174 | font-family: Roboto; 175 | font-style: normal; 176 | font-weight: normal; 177 | font-size: 14px; 178 | line-height: 20px; 179 | } 180 | 181 | .dwolla-loading { 182 | background-color: #5e4e76; 183 | position: relative; 184 | animation-name: loading; 185 | animation-duration: 3s; 186 | animation-iteration-count: infinite; 187 | } 188 | 189 | @keyframes loading { 190 | 0% { 191 | background-color: #5e4e76; 192 | } 193 | 50% { 194 | background-color: #8393aa; 195 | } 196 | 100% { 197 | background-color: #5e4e76; 198 | } 199 | } 200 | -------------------------------------------------------------------------------- /views/balance.hbs: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 8 | 10 | Dwolla 11 | 12 | 19 | 20 | 21 | 22 | 31 | 32 | 33 | 34 |
35 | 37 |
38 |

Balance Display

39 |
40 | 41 |
42 |
43 |
44 |
45 |

Displaying User Balance With Drop-Ins (Copy + Paste Integration)

46 | 47 | 
48 |     <type="text/javascript" src="//cdn.dwolla.com/v2.2.0/dwolla-web.js"></script>
49 |     <script>
50 |         dwolla.configure({
51 |             environment: "sandbox",
52 |             styles: "styles/balance-custom.css",
53 |             tokenUrl: "/tokenUrl",
54 |             success: (res) => Promise.resolve(res),
55 |             error: (err) => Promise.resolve(err),
56 |         });
57 |     </script>
58 | 
59 |     <dwolla-balance-display customerId="customerId"></dwolla-balance-display>
60 |
61 |
62 |
63 |
64 | 65 | 66 | 67 | 68 | -------------------------------------------------------------------------------- /views/beneficial-owners.hbs: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 8 | 10 | Dwolla 11 | 12 | 19 | 20 | 21 | 30 | 31 | 32 | 33 |
34 | 36 |
37 |

Beneficial Owners

38 |
39 | 40 | 41 |
42 |
43 |
44 |
45 |

Adding Beneficial Owners With Drop-Ins (Copy + Paste Integration)

46 | 
47 |     <type="text/javascript" src="//cdn.dwolla.com/v2.2.0/dwolla-web.js"></script>
48 |     <script>
49 |         dwolla.configure({
50 |             environment: "sandbox",
51 |             styles: "/styles/custom-styles.css",
52 |             tokenUrl: "/tokenUrl",
53 |             success: (res) => Promise.resolve(res),
54 |             error: (err) => Promise.resolve(err),
55 |         });
56 |     </script>
57 | 
58 |     <dwolla-beneficial-owners customerId="customerId">
59 |     </dwolla-beneficial-owners>
60 |
61 |
62 |
63 |
64 | 65 | 66 | 67 | 68 | -------------------------------------------------------------------------------- /views/business-vcr.hbs: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 8 | 10 | Dwolla 11 | 12 | 19 | 20 | 21 | 30 | 31 | 32 | 33 |
34 | 36 |
37 |

Create A Business Verified Customer Record

38 |
39 | 40 | 41 |
42 |
43 |
44 |
45 |

Creating A Business Customer With Drop-Ins (Copy + Paste Integration)

46 | 
47 |     <type="text/javascript" src="//cdn.dwolla.com/v2.2.0/dwolla-web.js"></script>
48 |     <script>
49 |         dwolla.configure({
50 |             environment: "sandbox",
51 |             styles: "/styles/create-custom.css",
52 |             tokenUrl: "/tokenUrl",
53 |             success: (res) => Promise.resolve(res),
54 |             error: (err) => Promise.resolve(err),
55 |         });
56 |     </script>
57 | 
58 |     <dwolla-business-vcr
59 |         terms="https://www.yourcompany.com/tos"
60 |         privacy="https://www.yourcompany.com/privacy">
61 |     </dwolla-business-vcr>
62 |
63 |
64 |
65 |
66 | 67 | 68 | 69 | 70 | -------------------------------------------------------------------------------- /views/create-customer.hbs: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 8 | 10 | Dwolla 11 | 12 | 19 | 20 | 21 | 22 | 31 | 32 | 33 | 34 |
35 | 37 |
38 |

Create Customer

39 |
40 | 41 | 42 |
43 |
44 |
45 |
46 |

Creating A Customer With Drop-Ins (Copy + Paste Integration)

47 | 
48 |     <type="text/javascript" src="//cdn.dwolla.com/v2.2.0/dwolla-web.js"></script>
49 |     <script>
50 |         dwolla.configure({
51 |             environment: "sandbox",
52 |             styles: "/styles/create-custom.css",
53 |             tokenUrl: "/tokenUrl",
54 |             success: (res) => Promise.resolve(res),
55 |             error: (err) => Promise.resolve(err),
56 |         });
57 |     </script>
58 | 
59 |     <dwolla-customer-create
60 |         terms="https://www.yourcompany.com/tos"
61 |         privacy="https://www.yourcompany.com/privacy">
62 |     </dwolla-customer-create>
63 | 
64 |     
Note: For Receive Only Customers, include "type = receive-only"
65 | 
66 |     <dwolla-customer-create
67 |         type = "receive-only"
68 |         terms="https://www.yourcompany.com/tos"
69 |         privacy="https://www.yourcompany.com/privacy">
70 | 
71 |     </dwolla-customer-create>
72 |
73 |
74 |
75 |
76 | 77 | 78 | 79 | 80 | -------------------------------------------------------------------------------- /views/create-funding-source.hbs: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 8 | 10 | Dwolla 11 | 12 | 19 | 20 | 21 | 22 | 31 | 32 | 33 | 34 |
35 | 37 |
38 |

Balance Display

39 |
40 | 41 |
42 |
43 |
44 |
45 |

Creating a Funding Source With Drop-Ins (Copy + Paste Integration)

46 | 47 | 
48 |     <type="text/javascript" src="//cdn.dwolla.com/v2.2.0/dwolla-web.js"></script>
49 |     <script>
50 |         dwolla.configure({
51 |             environment: "sandbox",
52 |             styles: "styles/create-funding-sources-custom.css",
53 |             tokenUrl: "/tokenUrl",
54 |             success: (res) => Promise.resolve(res),
55 |             error: (err) => Promise.resolve(err),
56 |         });
57 |     </script>
58 | 
59 |     <!-- Example without automatic micro-deposit initiation -->"
60 |     <dwolla-funding-source-create customerId="{{ customerId }}">
61 |     </dwolla-funding-source-create>
62 | 
63 |     <!-- Example with automatic micro-deposit initiation -->
64 |     <dwolla-funding-source-create
65 |             customerId="{{ customerId }}"
66 |             initiateMicroDeposits
67 |     >
68 |     </dwolla-funding-source-create>
69 |
70 |
71 |
72 |
73 | 74 | 75 | 76 | 77 | -------------------------------------------------------------------------------- /views/document.hbs: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 8 | 10 | Dwolla 11 | 12 | 19 | 20 | 21 | 22 | 31 | 32 | 33 | 34 |
35 | 37 |
38 |

Upload A Document

39 |
40 | 41 |
42 |
43 |
44 |
45 |

Uploading A Customer Document With Drop-Ins (Copy + Paste Integration)

46 | 

47 |         <script type="text/javascript" src="//cdn.dwolla.com/v2.2.0/dwolla-web.js"></script>
48 |         <script>
49 |             dwolla.configure({
50 |                 environment: "sandbox",
51 |                 styles: "/styles/document-custom.css",
52 |                 tokenUrl: "/tokenUrl",
53 |                 success: (res) => Promise.resolve(res),
54 |                 error: (err) => Promise.resolve(err),
55 |             });
56 |         </script>
57 | 
58 |         <dwolla-document-upload customerId="customerId"
59 |         ></dwolla-document-upload>
60 |
61 |

Uploading A Beneficial Owner Document With Drop-Ins (Copy + Paste Integration)

62 | 

63 |         <script type="text/javascript" src="//cdn.dwolla.com/v2.2.0/dwolla-web.js"></script>
64 |         <script>
65 |             dwolla.configure({
66 |                 environment: "sandbox",
67 |                 styles: "/styles/document-custom.css",
68 |                 tokenUrl: "/tokenUrl",
69 |                 success: (res) => Promise.resolve(res),
70 |                 error: (err) => Promise.resolve(err),
71 |             });
72 |         </script>
73 | 
74 |         <dwolla-document-upload customerId="customerId" ownerId="ownerId" type="beneficial-owner"
75 |         ></dwolla-document-upload>
76 |
77 |
78 |
79 |
80 | 81 | 82 | 83 | -------------------------------------------------------------------------------- /views/landing.hbs: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Dwolla 8 | 9 | 10 | 18 | 19 | 20 | 21 | 22 |
23 | 24 |
25 |

Drop Ins

26 |

Create Customer

27 |

Upgrade Customer

28 |

Personal Verified Customer Flow

29 |

Business Verified Customer Flow

30 |

Beneficial Owners Flow

31 |

Upload Document

32 |

Balance Display

33 |

Pay-in Flow

34 |

Create a Funding Source

35 |
36 |
37 | 38 | 39 | -------------------------------------------------------------------------------- /views/payin.hbs: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 8 | 10 | Dwolla 11 | 13 | 20 | 21 | 22 | 31 | 32 | 33 | 34 |
35 | 37 |
38 |

Pay In

39 |
40 | 41 |
42 |
43 |
44 |

This is an alpha for the 'pay in' drop-in component. It is still a work in progress and may not 45 | completely represent the final product.

46 |
47 |

Adding A Pay In Flow With Drop-Ins (Copy + Paste Integration)

48 | 49 | 
50 |     <type="text/javascript" src="//cdn.dwolla.com/v2.2.0/dwolla-web.js"></script>
51 |     <script>
52 |         dwolla.configure({
53 |             environment: "sandbox",
54 |             styles: "styles/custom-styles.css",
55 |             tokenUrl: "/tokenUrl",
56 |             success: (res) => Promise.resolve(res),
57 |             error: (err) => Promise.resolve(err),
58 |         });
59 |     </script>
60 | 
61 |     <dwolla-payin customerId="customerId"></dwolla-payin>
62 |
63 |
64 |
65 |
66 | 67 | 68 | 69 | 70 | -------------------------------------------------------------------------------- /views/personal-vcr.hbs: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 8 | 10 | Dwolla 11 | 12 | 19 | 20 | 21 | 22 | 31 | 32 | 33 | 34 |
35 | 37 |
38 |

Create A Personal VCR

39 |
40 | 41 |
42 |
43 |
44 |
45 |

Creating A Customer With Drop-Ins (Copy + Paste Integration)

46 | 
47 |     <type="text/javascript" src="//cdn.dwolla.com/v2.2.0/dwolla-web.js"></script>
48 |     <script>
49 |         dwolla.configure({
50 |             environment: "sandbox",
51 |             styles: "/styles/create-custom.css",
52 |             tokenUrl: "/tokenUrl",
53 |             success: (res) => Promise.resolve(res),
54 |             error: (err) => Promise.resolve(err),
55 |         });
56 |     </script>
57 | 
58 |     <dwolla-personal-vcr
59 |         terms="https://www.yourcompany.com/tos"
60 |         privacy="https://www.yourcompany.com/privacy">
61 |     </dwolla-personal-vcr>
62 |
63 |
64 |
65 |
66 | 67 | 68 | 69 | 70 | -------------------------------------------------------------------------------- /views/upgrade-customer.hbs: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 8 | 10 | Dwolla 11 | 12 | 19 | 20 | 21 | 22 | 31 | 32 | 33 | 34 |
35 | 37 |
38 |

Upgrade Customer

39 |
40 | 43 | 44 |
45 |
46 |
47 |
48 |

Upgrading A Customer With Drop-Ins (Copy + Paste Integration)

49 | 
50 |     <type="text/javascript" src="//cdn.dwolla.com/v2.2.0/dwolla-web.js"></script>
51 |     <script>
52 |         dwolla.configure({
53 |             environment: "sandbox",
54 |             styles: "/styles/upgrade-custom.css",
55 |             tokenUrl: "/tokenUrl",
56 |             success: (res) => Promise.resolve(res),
57 |             error: (err) => Promise.resolve(err),
58 |         });
59 |     </script>
60 | 
61 |     <dwolla-customer-update
62 |         customerId="customerId"
63 |         firstName="Jack"
64 |         lastName="Jackson"
65 |         email="jjackson@dwolla.com"
66 |         terms="https://www.yourcompany.com/tos"
67 |         privacy="https://www.yourcompany.com/privacy">
68 |     </dwolla-customer-update>
69 |
70 |
71 |
72 |
73 | 74 | 75 | 76 | 77 | --------------------------------------------------------------------------------