├── .well-known └── apple-developer-merchantid-domain-association ├── LICENSE ├── README.md ├── css ├── base.css ├── example1.css ├── example2.css ├── example3.css ├── example4.css └── example5.css ├── img ├── apple-touch-icon │ └── 180x180.png └── favicon.ico ├── index.html └── js ├── example1.js ├── example2.js ├── example3.js ├── example4.js ├── example5.js ├── index.js └── l10n.js /.well-known/apple-developer-merchantid-domain-association: -------------------------------------------------------------------------------- 1 | 7B227073704964223A2239373943394538343346343131343044463144313834343232393232313734313034353044314339464446394437384337313531303944334643463542433731222C2276657273696F6E223A312C22637265617465644F6E223A313437313435343137313137362C227369676E6174757265223A2233303830303630393261383634383836663730643031303730326130383033303830303230313031333130663330306430363039363038363438303136353033303430323031303530303330383030363039326138363438383666373064303130373031303030306130383033303832303365363330383230333862613030333032303130323032303836383630663639396439636361373066333030613036303832613836343863653364303430333032333037613331326533303263303630333535303430333063323534313730373036633635323034313730373036633639363336313734363936663665323034393665373436353637373236313734363936663665323034333431323032643230343733333331323633303234303630333535303430623063316434313730373036633635323034333635373237343639363636393633363137343639366636653230343137353734363836663732363937343739333131333330313130363033353530343061306330613431373037303663363532303439366536333265333130623330303930363033353530343036313330323535353333303165313730643331333633303336333033333331333833313336333433303561313730643332333133303336333033323331333833313336333433303561333036323331323833303236303630333535303430333063316636353633363332643733366437303264363237323666366236353732326437333639363736653566353534333334326435333431346534343432346635383331313433303132303630333535303430623063306236393466353332303533373937333734363536643733333131333330313130363033353530343061306330613431373037303663363532303439366536333265333130623330303930363033353530343036313330323535353333303539333031333036303732613836343863653364303230313036303832613836343863653364303330313037303334323030303438323330666461626333396366373565323032633530643939623435313265363337653261393031646436636233653062316364346235323637393866386366346562646538316132356138633231653463333364646365386532613936633266366166613139333033343563346538376134343236636539353162313239356133383230323131333038323032306433303435303630383262303630313035303530373031303130343339333033373330333530363038326230363031303530353037333030313836323936383734373437303361326632663666363337333730326536313730373036633635326536333666366432663666363337333730333033343264363137303730366336353631363936333631333333303332333031643036303335353164306530343136303431343032323433303062396165656564343633313937613461363561323939653432373138323163343533303063303630333535316431333031303166663034303233303030333031663036303335353164323330343138333031363830313432336632343963343466393365346566323765366334663632383663336661326262666432653462333038323031316430363033353531643230303438323031313433303832303131303330383230313063303630393261383634383836663736333634303530313330383166653330383163333036303832623036303130353035303730323032333038316236306338316233353236353663363936313665363336353230366636653230373436383639373332303633363537323734363936363639363336313734363532303632373932303631366537393230373036313732373437393230363137333733373536643635373332303631363336333635373037343631366536333635323036663636323037343638363532303734363836353665323036313730373036633639363336313632366336353230373337343631366536343631373236343230373436353732366437333230363136653634323036333666366536343639373436393666366537333230366636363230373537333635326332303633363537323734363936363639363336313734363532303730366636633639363337393230363136653634323036333635373237343639363636393633363137343639366636653230373037323631363337343639363336353230373337343631373436353664363536653734373332653330333630363038326230363031303530353037303230313136326136383734373437303361326632663737373737373265363137303730366336353265363336663664326636333635373237343639363636393633363137343635363137353734363836663732363937343739326633303334303630333535316431663034326433303262333032396130323761303235383632333638373437343730336132663266363337323663326536313730373036633635326536333666366432663631373037303663363536313639363336313333326536333732366333303065303630333535316430663031303166663034303430333032303738303330306630363039326138363438383666373633363430363164303430323035303033303061303630383261383634386365336430343033303230333439303033303436303232313030646131633633616538626535663634663865313165383635363933376239623639633437326265393365616333323333613136373933366534613864356538333032323130306264356166626638363966336330636132373462326664646534663731373135396362336264373139396232636130666634303964653635396138326232346433303832303265653330383230323735613030333032303130323032303834393664326662663361393864613937333030613036303832613836343863653364303430333032333036373331316233303139303630333535303430333063313234313730373036633635323035323666366637343230343334313230326432303437333333313236333032343036303335353034306230633164343137303730366336353230343336353732373436393636363936333631373436393666366532303431373537343638366637323639373437393331313333303131303630333535303430613063306134313730373036633635323034393665363332653331306233303039303630333535303430363133303235353533333031653137306433313334333033353330333633323333333433363333333035613137306433323339333033353330333633323333333433363333333035613330376133313265333032633036303335353034303330633235343137303730366336353230343137303730366336393633363137343639366636653230343936653734363536373732363137343639366636653230343334313230326432303437333333313236333032343036303335353034306230633164343137303730366336353230343336353732373436393636363936333631373436393666366532303431373537343638366637323639373437393331313333303131303630333535303430613063306134313730373036633635323034393665363332653331306233303039303630333535303430363133303235353533333035393330313330363037326138363438636533643032303130363038326138363438636533643033303130373033343230303034663031373131383431396437363438356435316135653235383130373736653838306132656664653762616534646530386466633462393365313333353664353636356233356165323264303937373630643232346537626261303866643736313763653838636237366262363637306265633865383239383466663534343561333831663733303831663433303436303630383262303630313035303530373031303130343361333033383330333630363038326230363031303530353037333030313836326136383734373437303361326632663666363337333730326536313730373036633635326536333666366432663666363337333730333033343264363137303730366336353732366636663734363336313637333333303164303630333535316430653034313630343134323366323439633434663933653465663237653663346636323836633366613262626664326534623330306630363033353531643133303130316666303430353330303330313031666633303166303630333535316432333034313833303136383031346262623064656131353833333838396161343861393964656265626465626166646163623234616233303337303630333535316431663034333033303265333032636130326161303238383632363638373437343730336132663266363337323663326536313730373036633635326536333666366432663631373037303663363537323666366637343633363136373333326536333732366333303065303630333535316430663031303166663034303430333032303130363330313030363061326138363438383666373633363430363032306530343032303530303330306130363038326138363438636533643034303330323033363730303330363430323330336163663732383335313136393962313836666233356333353663613632626666343137656464393066373534646132386562656631396338313565343262373839663839386637396235393966393864353431306438663964653963326665303233303332326464353434323162306133303537373663356466333338336239303637666431373763326332313664393634666336373236393832313236663534663837613764316239396362396230393839323136313036393930663039393231643030303033313832303136303330383230313563303230313031333038313836333037613331326533303263303630333535303430333063323534313730373036633635323034313730373036633639363336313734363936663665323034393665373436353637373236313734363936663665323034333431323032643230343733333331323633303234303630333535303430623063316434313730373036633635323034333635373237343639363636393633363137343639366636653230343137353734363836663732363937343739333131333330313130363033353530343061306330613431373037303663363532303439366536333265333130623330303930363033353530343036313330323535353330323038363836306636393964396363613730663330306430363039363038363438303136353033303430323031303530306130363933303138303630393261383634383836663730643031303930333331306230363039326138363438383666373064303130373031333031633036303932613836343838366637306430313039303533313066313730643331333633303338333133373331333733313336333133313561333032663036303932613836343838366637306430313039303433313232303432303733343832623432653665366332323264616536643963303961346336663332316534656136653666326661626631356430376562333338643264613435646233303061303630383261383634386365336430343033303230343438333034363032323130306564333264376438616131623536623036626164623162396639396264643063653662363931316530623032393232633934333362663564326130656135353830323231303066393433353637663030323361643061343561373236663238376636303062656334666566373335383832383935633733313531383337336163383934383137303030303030303030303030227D -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) 2017 Stripe 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 | # Stripe Elements examples 2 | 3 | [See them in action!](https://stripe.github.io/elements-examples) 4 | 5 | This repository contains examples of stylish forms that use Stripe Elements. These examples illustrate how to handle errors in real-time and style focus states, error states, and placeholders. 6 | 7 | ## Need help with Elements? 8 | 9 | - Get started with Stripe Elements by [reading our quickstart guide](https://stripe.com/docs/stripe-js). 10 | - For help with Elements and your Stripe integration in general, please [contact Stripe Support](https://support.stripe.com/). 11 | 12 | 13 | # In this repo 14 | 15 | Common code for handling errors and form submission lives [here](js/index.js). 16 | 17 | ## Example 1 18 | 19 | - [JavaScript](js/example1.js) 20 | - [CSS](css/example1.css) 21 | 22 | Example 1 shows a form that uses the `card` Element, a custom web font, and a solid icon with a custom color. 23 | 24 | ## Example 2 25 | 26 | - [JavaScript](js/example2.js) 27 | - [CSS](css/example2.css) 28 | 29 | Example 2 shows a "floaty-label" form that uses individual `cardNumber`, `cardExpiry`, and `cardCvc` Elements with a custom web font. 30 | 31 | The form also collects address (and thus postal code) outside of the payment form. It passes the postal code to Stripe on tokenization. 32 | 33 | ## Example 3 34 | 35 | - [JavaScript](js/example3.js) 36 | - [CSS](css/example3.css) 37 | 38 | Example 3 shows a form that uses individual `cardNumber`, `cardExpiry`, and `cardCvc` Elements with a custom web font. 39 | 40 | The form also collects postal code outside of the payment form. 41 | 42 | ## Example 4 43 | 44 | - [JavaScript](js/example4.js) 45 | - [CSS](css/example4.css) 46 | 47 | Example 4 shows a form that uses the `paymentRequestButton` Element to provide 48 | Apple Pay / Payment Request API support, as well as a `card` Element with a 49 | custom web font. 50 | 51 | ## Example 5 52 | 53 | - [JavaScript](js/example5.js) 54 | - [CSS](css/example5.css) 55 | 56 | Example 5 shows a form that uses the `paymentRequestButton` Element to provide 57 | Apple Pay / Payment Request API support, as well as a `card` Element with a 58 | custom icon color. 59 | -------------------------------------------------------------------------------- /css/base.css: -------------------------------------------------------------------------------- 1 | * { 2 | box-sizing: border-box; 3 | } 4 | 5 | blockquote, 6 | body, 7 | button, 8 | dd, 9 | dl, 10 | figure, 11 | h1, 12 | h2, 13 | h3, 14 | h4, 15 | h5, 16 | h6, 17 | ol, 18 | p, 19 | pre, 20 | ul { 21 | margin: 0; 22 | padding: 0; 23 | } 24 | 25 | ol, 26 | ul { 27 | list-style: none; 28 | } 29 | 30 | a { 31 | text-decoration: none; 32 | } 33 | 34 | button, 35 | select { 36 | border: none; 37 | outline: none; 38 | background: none; 39 | font-family: inherit; 40 | } 41 | 42 | a, 43 | button, 44 | input, 45 | select, 46 | textarea { 47 | -webkit-tap-highlight-color: transparent; 48 | } 49 | 50 | :root { 51 | overflow-x: hidden; 52 | height: 100%; 53 | } 54 | 55 | body { 56 | background: #fff; 57 | min-height: 100%; 58 | display: -ms-flexbox; 59 | display: flex; 60 | -ms-flex-direction: column; 61 | flex-direction: column; 62 | font-size: 62.5%; 63 | font-family: Roboto, Open Sans, Segoe UI, sans-serif; 64 | font-weight: 400; 65 | font-style: normal; 66 | -webkit-text-size-adjust: 100%; 67 | -webkit-font-smoothing: antialiased; 68 | -moz-osx-font-smoothing: grayscale; 69 | text-rendering: optimizeLegibility; 70 | font-feature-settings: "pnum"; 71 | font-variant-numeric: proportional-nums; 72 | } 73 | 74 | .globalContent { 75 | -ms-flex-positive: 1; 76 | flex-grow: 1; 77 | } 78 | 79 | @font-face { 80 | font-family: StripeIcons; 81 | src: url(data:application/octet-stream;base64,d09GRk9UVE8AAAZUAAoAAAAAB6AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAABDRkYgAAADKAAAAx8AAAOKkWuAp0dTVUIAAAZIAAAACgAAAAoAAQAAT1MvMgAAAXAAAABJAAAAYGcdjVZjbWFwAAACvAAAAFYAAACUKEhKfWhlYWQAAAD8AAAAMAAAADYJAklYaGhlYQAAAVAAAAAgAAAAJAYoAa5obXR4AAABLAAAACQAAAAoEOAAWW1heHAAAAD0AAAABgAAAAYAClAAbmFtZQAAAbwAAAD%2FAAABuXejDuxwb3N0AAADFAAAABMAAAAg%2F7gAMgAAUAAACgAAeNpjYGRgYABifeaSpHh%2Bm68MzMwHgCIMl08yqyDo%2F95Mkcy8QC4zAxNIFAD8tAiweNpjfMAQyfiAgYEpgoGBcQmQlmFgYPgAZOtAcQZEDgCHaQVGeNpjYGRgYD7z34eBgSmCgeH%2Ff6ZIBqAICuACAHpYBNp42mNgZtzAOIGBlYGDqYDJgYGBwQNCMwYwGDEcA%2FKBUthBqHe4H4MDg4L6Imae%2Fz4MB5jPMGwBCjOC5Bi9mKYAKQUGBgAFHgteAAAAeNplkMFqwkAURU9itBVKF6XLLrLsxiGKMYH0B4IgoqjdRokajAmNUfolhX5Df7IvZhBt5zHMeffduQwDPPCFQbWM81mzyZ3uocEz95qtK0%2BTN140t2jzLk7DaotiEmk2eWSlucErH5otnvjW3OSTH82tSg8n8eaYRkVXOY4TzIaLURB2tDaPi0OSZ3Y9G09tx6lxm5erPDtVA%2BX7wT7axXm5Vmmy7ClXDfqe515CCJkQs%2BFIKk8t6KJwzhUwY8iCkVBI54%2FvvzKXruBAQk6GfZM0ZipKxdfqVpylfErlP11uKHypgL2k7iSz8qxFTSV5SU%2FIlT2gjyfl%2FgKN9EDsAHjaY2BgYGaA4DAGRgYQkAHyGMF8NgYrIM3JIAHEEACj8QNOBhYGOyDNAYRMQFpBcZL6ov%2F%2Foaw5%2F%2F%2F%2Ff3kvH8iD2McCxExAO1kYWIE2cjCwAwAgUQwvAAB42mNgZgCD%2F1sZjBiwAAAswgHqAHjaNVFbbxNHGN2JMmtlNnIoZFFx1F2nDoTWgJLIhRQqWlRowyXiUkqE1IZLVW0dJzHYjpAhxnbYi8HXdWxsEKCIi0DdqjxVyhOKkBBS%2FdAX%2FkJfmiCe0Gz4orbjLNFo5uj79B19Z85BXGsLhxAiB7ef%2BFmZGj8XaVb9dgdn%2B5Dd02J%2F2JqFIXtpeQ5Lc6h1YzKbXcN2F%2F2qg373wZ3ly%2Bs5gpCwfpO3d8dnXwyfOheJhC9FgsovsanJ4MCuzw84sN%2BBb1Zh34ADfU7za6fq%2Fyl8Ib7K9E4Eo9HgpHLQu6aL45CB8ug6yqAbKIeyqMAhjjD1nM49596hbqQgHf2B%2Fm5xt3S8sqXlORFe%2FHuSvuD3vesUQ4eVxjgEfm08PWK5%2FoF14lBjDAJvXI0xMRS0%2BMVjbGLIbzV%2BP2y5aOC46IfAb7TzT5cFbSJwEKCc9eXifGgqtOBahN3vWy7aOS76f1zkrVNiaNw1NIpfhyBg8X%2FN428t3v2KJl6KtVqxWpXpCD2Bq5XZW3XPrWv1dMVHEmZy9pr8dhsGdQuhKt%2FTh9Mz6nTCE34Yeyy56byfUHMzqaWrEpRpHldmrpqJrosXPyV0N%2BzAsMJYKzwMwjacTmtXGe9%2B7InkrtPz3aRoaIWPSUEtGjL1wUcYFnoJXeChG7qwpmfUHkI30XsvRdMsmKZMs9TwEsjR67ik6%2Fk14hk4jVcGe4k9yMMojGDNyKiqRy1opi5phUrG7HLDnkfdxOHktZIu072wB9jFhpHReoj3UXNF3lmReb%2FC0eaMx%2BESO1NY1w2myfuMuXW7VKvJ9CQ9im9Wy3XmllpLVX0kWUzNpmW6E%2FrY8ePkjLaV%2FPCMWVTeTJidTYtyuJpuWhSOMYsuwBhMgNK0dCtxS3O7%2Fmtvy7YL9lKn7RfvbODaEerw%2BXfuPfT92WDkiopLpaJZ9pQNUy9JAlNdyjVVH6PDTDV7saB2TadSCVWQYIQeZ2F8QgTVM30zdZtFlcOVSmU1WYFXolFFeRB9Kgt8PJmMx2vJu7IwvZoOS9XRFwsLsXCylKjMyGxXrV5kXxb%2BBxsddR0AAAEAAAAAAAAAAAAA) 82 | format("woff"); 83 | } 84 | 85 | .container, 86 | .container-fluid, 87 | .container-lg, 88 | .container-wide, 89 | .container-xl { 90 | margin: 0 auto; 91 | padding: 0 20px; 92 | width: 100%; 93 | } 94 | 95 | .container, 96 | .container-lg { 97 | max-width: 1040px; 98 | } 99 | 100 | .container-wide, 101 | .container-xl { 102 | max-width: 1160px; 103 | } 104 | 105 | .common-SuperTitle { 106 | font-weight: 300; 107 | font-size: 45px; 108 | line-height: 60px; 109 | color: #32325d; 110 | letter-spacing: -.01em; 111 | } 112 | 113 | @media (min-width: 670px) { 114 | .common-SuperTitle { 115 | font-size: 50px; 116 | line-height: 70px; 117 | } 118 | } 119 | 120 | .common-IntroText { 121 | font-weight: 400; 122 | font-size: 21px; 123 | line-height: 31px; 124 | color: #525f7f; 125 | } 126 | 127 | @media (min-width: 670px) { 128 | .common-IntroText { 129 | font-size: 24px; 130 | line-height: 36px; 131 | } 132 | } 133 | 134 | .common-BodyText { 135 | font-weight: 400; 136 | font-size: 17px; 137 | line-height: 26px; 138 | color: #6b7c93; 139 | } 140 | 141 | .common-Link { 142 | color: #6772e5; 143 | font-weight: 500; 144 | transition: color 0.1s ease; 145 | cursor: pointer; 146 | } 147 | 148 | .common-Link:hover { 149 | color: #32325d; 150 | } 151 | 152 | .common-Link:active { 153 | color: #000; 154 | } 155 | 156 | .common-Link--arrow:after { 157 | font: normal 16px StripeIcons; 158 | content: "\2192"; 159 | padding-left: 5px; 160 | } 161 | 162 | .common-Button { 163 | white-space: nowrap; 164 | display: inline-block; 165 | height: 40px; 166 | line-height: 40px; 167 | padding: 0 14px; 168 | box-shadow: 0 4px 6px rgba(50, 50, 93, 0.11), 0 1px 3px rgba(0, 0, 0, 0.08); 169 | background: #fff; 170 | border-radius: 4px; 171 | font-size: 15px; 172 | font-weight: 600; 173 | text-transform: uppercase; 174 | letter-spacing: 0.025em; 175 | color: #6772e5; 176 | text-decoration: none; 177 | transition: all 0.15s ease; 178 | } 179 | 180 | .common-Button:hover { 181 | color: #7795f8; 182 | transform: translateY(-1px); 183 | box-shadow: 0 7px 14px rgba(50, 50, 93, 0.1), 0 3px 6px rgba(0, 0, 0, 0.08); 184 | } 185 | 186 | .common-Button:active { 187 | color: #555abf; 188 | background-color: #f6f9fc; 189 | transform: translateY(1px); 190 | box-shadow: 0 4px 6px rgba(50, 50, 93, 0.11), 0 1px 3px rgba(0, 0, 0, 0.08); 191 | } 192 | 193 | .common-Button--default { 194 | color: #fff; 195 | background: #6772e5; 196 | } 197 | 198 | .common-Button--default:hover { 199 | color: #fff; 200 | background-color: #7795f8; 201 | } 202 | 203 | .common-Button--default:active { 204 | color: #e6ebf1; 205 | background-color: #555abf; 206 | } 207 | 208 | .common-Button--dark { 209 | color: #fff; 210 | background: #32325d; 211 | } 212 | 213 | .common-Button--dark:hover { 214 | color: #fff; 215 | background-color: #43458b; 216 | } 217 | 218 | .common-Button--dark:active { 219 | color: #e6ebf1; 220 | background-color: #32325d; 221 | } 222 | 223 | .common-Button--disabled { 224 | color: #fff; 225 | background: #aab7c4; 226 | pointer-events: none; 227 | } 228 | 229 | .common-ButtonIcon { 230 | display: inline; 231 | margin: 0 5px 0 0; 232 | position: relative; 233 | } 234 | 235 | .common-ButtonGroup { 236 | display: -ms-flexbox; 237 | display: flex; 238 | -ms-flex-wrap: wrap; 239 | flex-wrap: wrap; 240 | margin: -10px; 241 | } 242 | 243 | .common-ButtonGroup .common-Button { 244 | -ms-flex-negative: 0; 245 | flex-shrink: 0; 246 | margin: 10px; 247 | } 248 | 249 | /** Page-specific styles */ 250 | @keyframes spin { 251 | 0% { 252 | transform: rotate(0deg); 253 | } 254 | 255 | to { 256 | transform: rotate(1turn); 257 | } 258 | } 259 | 260 | @keyframes void-animation-out { 261 | 0%, 262 | to { 263 | opacity: 1; 264 | } 265 | } 266 | 267 | body { 268 | overflow-x: hidden; 269 | background-color: #f6f9fc; 270 | } 271 | 272 | main { 273 | position: relative; 274 | display: block; 275 | z-index: 1; 276 | } 277 | 278 | .stripes { 279 | position: absolute; 280 | width: 100%; 281 | transform: skewY(-12deg); 282 | height: 950px; 283 | top: -350px; 284 | background: linear-gradient(180deg, #e6ebf1 350px, rgba(230, 235, 241, 0)); 285 | } 286 | 287 | .stripes .stripe { 288 | position: absolute; 289 | height: 190px; 290 | } 291 | 292 | .stripes .s1 { 293 | height: 380px; 294 | top: 0; 295 | left: 0; 296 | width: 24%; 297 | background: linear-gradient(90deg, #e6ebf1, rgba(230, 235, 241, 0)); 298 | } 299 | 300 | .stripes .s2 { 301 | top: 380px; 302 | left: 4%; 303 | width: 35%; 304 | background: linear-gradient( 305 | 90deg, 306 | hsla(0, 0%, 100%, 0.65), 307 | hsla(0, 0%, 100%, 0) 308 | ); 309 | } 310 | 311 | .stripes .s3 { 312 | top: 380px; 313 | right: 0; 314 | width: 38%; 315 | background: linear-gradient(90deg, #e4e9f0, rgba(228, 233, 240, 0)); 316 | } 317 | 318 | main > .container-lg { 319 | display: -ms-flexbox; 320 | display: flex; 321 | -ms-flex-wrap: wrap; 322 | flex-wrap: wrap; 323 | position: relative; 324 | max-width: 750px; 325 | padding: 110px 20px 110px; 326 | } 327 | 328 | main > .container-lg .cell { 329 | display: -ms-flexbox; 330 | display: flex; 331 | -ms-flex-direction: column; 332 | flex-direction: column; 333 | -ms-flex-pack: center; 334 | justify-content: center; 335 | position: relative; 336 | -ms-flex: auto; 337 | flex: auto; 338 | min-width: 100%; 339 | min-height: 500px; 340 | padding: 0 40px; 341 | } 342 | 343 | main > .container-lg .cell + .cell { 344 | margin-top: 70px; 345 | } 346 | 347 | main > .container-lg .cell.intro { 348 | padding: 0; 349 | } 350 | 351 | @media (min-width: 670px) { 352 | main > .container-lg .cell.intro { 353 | -ms-flex-align: center; 354 | align-items: center; 355 | text-align: center; 356 | } 357 | 358 | .optionList { 359 | margin-left: 13px; 360 | } 361 | } 362 | 363 | main > .container-lg .cell.intro > * { 364 | width: 100%; 365 | max-width: 700px; 366 | } 367 | 368 | main > .container-lg .cell.intro .common-IntroText { 369 | margin-top: 10px; 370 | } 371 | 372 | main > .container-lg .cell.intro .common-BodyText { 373 | margin-top: 15px; 374 | } 375 | 376 | main > .container-lg .cell.intro .common-ButtonGroup { 377 | width: auto; 378 | margin-top: 20px; 379 | } 380 | 381 | main > .container-lg .example { 382 | -ms-flex-align: center; 383 | align-items: center; 384 | border-radius: 4px; 385 | box-shadow: 0 7px 14px rgba(50, 50, 93, 0.1), 0 3px 6px rgba(0, 0, 0, 0.08); 386 | padding: 80px 0px; 387 | margin-left: -20px; 388 | margin-right: -20px; 389 | } 390 | 391 | @media (min-width: 670px) { 392 | main > .container-lg .example { 393 | padding: 40px; 394 | } 395 | } 396 | 397 | main > .container-lg .example.submitted form, 398 | main > .container-lg .example.submitting form { 399 | opacity: 0; 400 | transform: scale(0.9); 401 | pointer-events: none; 402 | } 403 | 404 | main > .container-lg .example.submitted .success, 405 | main > .container-lg .example.submitting .success { 406 | pointer-events: all; 407 | } 408 | 409 | main > .container-lg .example.submitting .success .icon { 410 | opacity: 1; 411 | } 412 | 413 | main > .container-lg .example.submitted .success > * { 414 | opacity: 1; 415 | transform: none !important; 416 | } 417 | 418 | main > .container-lg .example.submitted .success > :nth-child(2) { 419 | transition-delay: 0.1s; 420 | } 421 | 422 | main > .container-lg .example.submitted .success > :nth-child(3) { 423 | transition-delay: 0.2s; 424 | } 425 | 426 | main > .container-lg .example.submitted .success > :nth-child(4) { 427 | transition-delay: 0.3s; 428 | } 429 | 430 | main > .container-lg .example.submitted .success .icon .border, 431 | main > .container-lg .example.submitted .success .icon .checkmark { 432 | opacity: 1; 433 | stroke-dashoffset: 0 !important; 434 | } 435 | 436 | main > .container-lg .example * { 437 | margin: 0; 438 | padding: 0; 439 | } 440 | 441 | main > .container-lg .example .caption { 442 | display: flex; 443 | justify-content: space-between; 444 | position: absolute; 445 | width: 100%; 446 | top: 100%; 447 | left: 0; 448 | padding: 15px 10px 0; 449 | color: #aab7c4; 450 | font-family: Roboto, "Open Sans", "Segoe UI", sans-serif; 451 | font-size: 15px; 452 | font-weight: 500; 453 | } 454 | 455 | main > .container-lg .example .caption * { 456 | font-family: inherit; 457 | font-size: inherit; 458 | font-weight: inherit; 459 | } 460 | 461 | main > .container-lg .example .caption .no-charge { 462 | color: #cfd7df; 463 | margin-right: 10px; 464 | } 465 | 466 | main > .container-lg .example .caption a.source { 467 | text-align: right; 468 | color: inherit; 469 | transition: color 0.1s ease-in-out; 470 | margin-left: 10px; 471 | } 472 | 473 | main > .container-lg .example .caption a.source:hover { 474 | color: #6772e5; 475 | } 476 | 477 | main > .container-lg .example .caption a.source:active { 478 | color: #43458b; 479 | } 480 | 481 | main > .container-lg .example .caption a.source svg { 482 | margin-right: 10px; 483 | } 484 | 485 | main > .container-lg .example .caption a.source svg path { 486 | fill: currentColor; 487 | } 488 | 489 | main > .container-lg .example form { 490 | position: relative; 491 | width: 100%; 492 | max-width: 500px; 493 | transition-property: opacity, transform; 494 | transition-duration: 0.35s; 495 | transition-timing-function: cubic-bezier(0.165, 0.84, 0.44, 1); 496 | } 497 | 498 | main > .container-lg .example form input::-webkit-input-placeholder { 499 | opacity: 1; 500 | } 501 | 502 | main > .container-lg .example form input::-moz-placeholder { 503 | opacity: 1; 504 | } 505 | 506 | main > .container-lg .example form input:-ms-input-placeholder { 507 | opacity: 1; 508 | } 509 | 510 | main > .container-lg .example .error { 511 | display: -ms-flexbox; 512 | display: flex; 513 | -ms-flex-pack: center; 514 | justify-content: center; 515 | position: absolute; 516 | width: 100%; 517 | top: 100%; 518 | margin-top: 20px; 519 | left: 0; 520 | padding: 0 15px; 521 | font-size: 13px !important; 522 | opacity: 0; 523 | transform: translateY(10px); 524 | transition-property: opacity, transform; 525 | transition-duration: 0.35s; 526 | transition-timing-function: cubic-bezier(0.165, 0.84, 0.44, 1); 527 | } 528 | 529 | main > .container-lg .example .error.visible { 530 | opacity: 1; 531 | transform: none; 532 | } 533 | 534 | main > .container-lg .example .error .message { 535 | font-size: inherit; 536 | } 537 | 538 | main > .container-lg .example .error svg { 539 | -ms-flex-negative: 0; 540 | flex-shrink: 0; 541 | margin-top: -1px; 542 | margin-right: 10px; 543 | } 544 | 545 | main > .container-lg .example .success { 546 | display: -ms-flexbox; 547 | display: flex; 548 | -ms-flex-direction: column; 549 | flex-direction: column; 550 | -ms-flex-align: center; 551 | align-items: center; 552 | -ms-flex-pack: center; 553 | justify-content: center; 554 | position: absolute; 555 | width: 100%; 556 | height: 100%; 557 | top: 0; 558 | left: 0; 559 | padding: 10px; 560 | text-align: center; 561 | pointer-events: none; 562 | overflow: hidden; 563 | } 564 | 565 | @media (min-width: 670px) { 566 | main > .container-lg .example .success { 567 | padding: 40px; 568 | } 569 | } 570 | 571 | main > .container-lg .example .success > * { 572 | transition-property: opacity, transform; 573 | transition-duration: 0.35s; 574 | transition-timing-function: cubic-bezier(0.165, 0.84, 0.44, 1); 575 | opacity: 0; 576 | transform: translateY(50px); 577 | } 578 | 579 | main > .container-lg .example .success .icon { 580 | margin: 15px 0 30px; 581 | transform: translateY(70px) scale(0.75); 582 | } 583 | 584 | main > .container-lg .example .success .icon svg { 585 | will-change: transform; 586 | } 587 | 588 | main > .container-lg .example .success .icon .border { 589 | stroke-dasharray: 251; 590 | stroke-dashoffset: 62.75; 591 | transform-origin: 50% 50%; 592 | transition: stroke-dashoffset 0.35s cubic-bezier(0.165, 0.84, 0.44, 1); 593 | animation: spin 1s linear infinite; 594 | } 595 | 596 | main > .container-lg .example .success .icon .checkmark { 597 | stroke-dasharray: 60; 598 | stroke-dashoffset: 60; 599 | transition: stroke-dashoffset 0.35s cubic-bezier(0.165, 0.84, 0.44, 1) 0.35s; 600 | } 601 | 602 | main > .container-lg .example .success .title { 603 | font-size: 17px; 604 | font-weight: 500; 605 | margin-bottom: 8px; 606 | } 607 | 608 | main > .container-lg .example .success .message { 609 | font-size: 14px; 610 | font-weight: 400; 611 | margin-bottom: 25px; 612 | line-height: 1.6em; 613 | } 614 | 615 | main > .container-lg .example .success .message span { 616 | font-size: inherit; 617 | } 618 | 619 | main > .container-lg .example .success .reset:active { 620 | transition-duration: 0.15s; 621 | transition-delay: 0s; 622 | opacity: 0.65; 623 | } 624 | 625 | main > .container-lg .example .success .reset svg { 626 | will-change: transform; 627 | } 628 | 629 | footer { 630 | position: relative; 631 | max-width: 750px; 632 | padding: 50px 20px; 633 | margin: 0 auto; 634 | } 635 | 636 | .optionList { 637 | margin: 6px 0; 638 | } 639 | 640 | .optionList li { 641 | display: inline-block; 642 | margin-right: 13px; 643 | } 644 | 645 | .optionList a { 646 | color: #aab7c4; 647 | transition: color 0.1s ease-in-out; 648 | cursor: pointer; 649 | font-size: 15px; 650 | line-height: 26px; 651 | } 652 | 653 | .optionList a.selected { 654 | color: #6772e5; 655 | font-weight: 600; 656 | } 657 | 658 | .optionList a:hover { 659 | color: #32325d; 660 | } 661 | 662 | .optionList a.selected:hover { 663 | cursor: default; 664 | color: #6772e5; 665 | } 666 | -------------------------------------------------------------------------------- /css/example1.css: -------------------------------------------------------------------------------- 1 | .example.example1 { 2 | background-color: #6772e5; 3 | } 4 | 5 | .example.example1 * { 6 | font-family: Roboto, Open Sans, Segoe UI, sans-serif; 7 | font-size: 16px; 8 | font-weight: 500; 9 | } 10 | 11 | .example.example1 fieldset { 12 | margin: 0 15px 20px; 13 | padding: 0; 14 | border-style: none; 15 | background-color: #7795f8; 16 | box-shadow: 0 6px 9px rgba(50, 50, 93, 0.06), 0 2px 5px rgba(0, 0, 0, 0.08), 17 | inset 0 1px 0 #829fff; 18 | border-radius: 4px; 19 | } 20 | 21 | .example.example1 .row { 22 | display: -ms-flexbox; 23 | display: flex; 24 | -ms-flex-align: center; 25 | align-items: center; 26 | margin-left: 15px; 27 | } 28 | 29 | .example.example1 .row + .row { 30 | border-top: 1px solid #819efc; 31 | } 32 | 33 | .example.example1 label { 34 | width: 15%; 35 | min-width: 70px; 36 | padding: 11px 0; 37 | color: #c4f0ff; 38 | overflow: hidden; 39 | text-overflow: ellipsis; 40 | white-space: nowrap; 41 | } 42 | 43 | .example.example1 input, .example.example1 button { 44 | -webkit-appearance: none; 45 | -moz-appearance: none; 46 | appearance: none; 47 | outline: none; 48 | border-style: none; 49 | } 50 | 51 | .example.example1 input:-webkit-autofill { 52 | -webkit-text-fill-color: #fce883; 53 | transition: background-color 100000000s; 54 | -webkit-animation: 1ms void-animation-out; 55 | } 56 | 57 | .example.example1 .StripeElement--webkit-autofill { 58 | background: transparent !important; 59 | } 60 | 61 | .example.example1 .StripeElement { 62 | width: 100%; 63 | padding: 11px 15px 11px 0; 64 | } 65 | 66 | .example.example1 input { 67 | width: 100%; 68 | padding: 11px 15px 11px 0; 69 | color: #fff; 70 | background-color: transparent; 71 | -webkit-animation: 1ms void-animation-out; 72 | } 73 | 74 | .example.example1 input::-webkit-input-placeholder { 75 | color: #87bbfd; 76 | } 77 | 78 | .example.example1 input::-moz-placeholder { 79 | color: #87bbfd; 80 | } 81 | 82 | .example.example1 input:-ms-input-placeholder { 83 | color: #87bbfd; 84 | } 85 | 86 | .example.example1 button { 87 | display: block; 88 | width: calc(100% - 30px); 89 | height: 40px; 90 | margin: 40px 15px 0; 91 | background-color: #f6a4eb; 92 | box-shadow: 0 6px 9px rgba(50, 50, 93, 0.06), 0 2px 5px rgba(0, 0, 0, 0.08), 93 | inset 0 1px 0 #ffb9f6; 94 | border-radius: 4px; 95 | color: #fff; 96 | font-weight: 600; 97 | cursor: pointer; 98 | } 99 | 100 | .example.example1 button:active { 101 | background-color: #d782d9; 102 | box-shadow: 0 6px 9px rgba(50, 50, 93, 0.06), 0 2px 5px rgba(0, 0, 0, 0.08), 103 | inset 0 1px 0 #e298d8; 104 | } 105 | 106 | .example.example1 .error svg .base { 107 | fill: #fff; 108 | } 109 | 110 | .example.example1 .error svg .glyph { 111 | fill: #6772e5; 112 | } 113 | 114 | .example.example1 .error .message { 115 | color: #fff; 116 | } 117 | 118 | .example.example1 .success .icon .border { 119 | stroke: #87bbfd; 120 | } 121 | 122 | .example.example1 .success .icon .checkmark { 123 | stroke: #fff; 124 | } 125 | 126 | .example.example1 .success .title { 127 | color: #fff; 128 | } 129 | 130 | .example.example1 .success .message { 131 | color: #9cdbff; 132 | } 133 | 134 | .example.example1 .success .reset path { 135 | fill: #fff; 136 | } 137 | -------------------------------------------------------------------------------- /css/example2.css: -------------------------------------------------------------------------------- 1 | .example.example2 { 2 | background-color: #fff; 3 | } 4 | 5 | .example.example2 * { 6 | font-family: Source Code Pro, Consolas, Menlo, monospace; 7 | font-size: 16px; 8 | font-weight: 500; 9 | } 10 | 11 | .example.example2 .row { 12 | display: -ms-flexbox; 13 | display: flex; 14 | margin: 0 5px 10px; 15 | } 16 | 17 | .example.example2 .field { 18 | position: relative; 19 | width: 100%; 20 | height: 50px; 21 | margin: 0 10px; 22 | } 23 | 24 | .example.example2 .field.half-width { 25 | width: 50%; 26 | } 27 | 28 | .example.example2 .field.quarter-width { 29 | width: calc(25% - 10px); 30 | } 31 | 32 | .example.example2 .baseline { 33 | position: absolute; 34 | width: 100%; 35 | height: 1px; 36 | left: 0; 37 | bottom: 0; 38 | background-color: #cfd7df; 39 | transition: background-color 0.3s cubic-bezier(0.165, 0.84, 0.44, 1); 40 | } 41 | 42 | .example.example2 label { 43 | position: absolute; 44 | width: 100%; 45 | left: 0; 46 | bottom: 8px; 47 | color: #cfd7df; 48 | overflow: hidden; 49 | text-overflow: ellipsis; 50 | white-space: nowrap; 51 | transform-origin: 0 50%; 52 | cursor: text; 53 | pointer-events: none; 54 | transition-property: color, transform; 55 | transition-duration: 0.3s; 56 | transition-timing-function: cubic-bezier(0.165, 0.84, 0.44, 1); 57 | } 58 | 59 | .example.example2 .input { 60 | position: absolute; 61 | width: 100%; 62 | left: 0; 63 | bottom: 0; 64 | padding-bottom: 7px; 65 | color: #32325d; 66 | background-color: transparent; 67 | } 68 | 69 | .example.example2 .input::-webkit-input-placeholder { 70 | color: transparent; 71 | transition: color 0.3s cubic-bezier(0.165, 0.84, 0.44, 1); 72 | } 73 | 74 | .example.example2 .input::-moz-placeholder { 75 | color: transparent; 76 | transition: color 0.3s cubic-bezier(0.165, 0.84, 0.44, 1); 77 | } 78 | 79 | .example.example2 .input:-ms-input-placeholder { 80 | color: transparent; 81 | transition: color 0.3s cubic-bezier(0.165, 0.84, 0.44, 1); 82 | } 83 | 84 | .example.example2 .input.StripeElement { 85 | opacity: 0; 86 | transition: opacity 0.3s cubic-bezier(0.165, 0.84, 0.44, 1); 87 | will-change: opacity; 88 | } 89 | 90 | .example.example2 .input.focused, 91 | .example.example2 .input:not(.empty) { 92 | opacity: 1; 93 | } 94 | 95 | .example.example2 .input.focused::-webkit-input-placeholder, 96 | .example.example2 .input:not(.empty)::-webkit-input-placeholder { 97 | color: #cfd7df; 98 | } 99 | 100 | .example.example2 .input.focused::-moz-placeholder, 101 | .example.example2 .input:not(.empty)::-moz-placeholder { 102 | color: #cfd7df; 103 | } 104 | 105 | .example.example2 .input.focused:-ms-input-placeholder, 106 | .example.example2 .input:not(.empty):-ms-input-placeholder { 107 | color: #cfd7df; 108 | } 109 | 110 | .example.example2 .input.focused + label, 111 | .example.example2 .input:not(.empty) + label { 112 | color: #aab7c4; 113 | transform: scale(0.85) translateY(-25px); 114 | cursor: default; 115 | } 116 | 117 | .example.example2 .input.focused + label { 118 | color: #24b47e; 119 | } 120 | 121 | .example.example2 .input.invalid + label { 122 | color: #ffa27b; 123 | } 124 | 125 | .example.example2 .input.focused + label + .baseline { 126 | background-color: #24b47e; 127 | } 128 | 129 | .example.example2 .input.focused.invalid + label + .baseline { 130 | background-color: #e25950; 131 | } 132 | 133 | .example.example2 input, .example.example2 button { 134 | -webkit-appearance: none; 135 | -moz-appearance: none; 136 | appearance: none; 137 | outline: none; 138 | border-style: none; 139 | } 140 | 141 | .example.example2 input:-webkit-autofill { 142 | -webkit-text-fill-color: #e39f48; 143 | transition: background-color 100000000s; 144 | -webkit-animation: 1ms void-animation-out; 145 | } 146 | 147 | .example.example2 .StripeElement--webkit-autofill { 148 | background: transparent !important; 149 | } 150 | 151 | .example.example2 input, .example.example2 button { 152 | -webkit-animation: 1ms void-animation-out; 153 | } 154 | 155 | .example.example2 button { 156 | display: block; 157 | width: calc(100% - 30px); 158 | height: 40px; 159 | margin: 40px 15px 0; 160 | background-color: #24b47e; 161 | border-radius: 4px; 162 | color: #fff; 163 | text-transform: uppercase; 164 | font-weight: 600; 165 | cursor: pointer; 166 | } 167 | 168 | .example.example2 .error svg { 169 | margin-top: 0 !important; 170 | } 171 | 172 | .example.example2 .error svg .base { 173 | fill: #e25950; 174 | } 175 | 176 | .example.example2 .error svg .glyph { 177 | fill: #fff; 178 | } 179 | 180 | .example.example2 .error .message { 181 | color: #e25950; 182 | } 183 | 184 | .example.example2 .success .icon .border { 185 | stroke: #abe9d2; 186 | } 187 | 188 | .example.example2 .success .icon .checkmark { 189 | stroke: #24b47e; 190 | } 191 | 192 | .example.example2 .success .title { 193 | color: #32325d; 194 | font-size: 16px !important; 195 | } 196 | 197 | .example.example2 .success .message { 198 | color: #8898aa; 199 | font-size: 13px !important; 200 | } 201 | 202 | .example.example2 .success .reset path { 203 | fill: #24b47e; 204 | } 205 | -------------------------------------------------------------------------------- /css/example3.css: -------------------------------------------------------------------------------- 1 | .example.example3 { 2 | background-color: #525f7f; 3 | } 4 | 5 | .example.example3 * { 6 | font-family: Quicksand, Open Sans, Segoe UI, sans-serif; 7 | font-size: 16px; 8 | font-weight: 600; 9 | } 10 | 11 | .example.example3 .fieldset { 12 | margin: 0 15px 30px; 13 | padding: 0; 14 | border-style: none; 15 | display: -ms-flexbox; 16 | display: flex; 17 | -ms-flex-flow: row wrap; 18 | flex-flow: row wrap; 19 | -ms-flex-pack: justify; 20 | justify-content: space-between; 21 | } 22 | 23 | .example.example3 .field { 24 | padding: 10px 20px 11px; 25 | background-color: #7488aa; 26 | border-radius: 20px; 27 | width: 100%; 28 | } 29 | 30 | .example.example3 .field.half-width { 31 | width: calc(50% - (5px / 2)); 32 | } 33 | 34 | .example.example3 .field.third-width { 35 | width: calc(33% - (5px / 3)); 36 | } 37 | 38 | .example.example3 .field + .field { 39 | margin-top: 6px; 40 | } 41 | 42 | .example.example3 .field.focus, 43 | .example.example3 .field:focus { 44 | color: #424770; 45 | background-color: #f6f9fc; 46 | } 47 | 48 | .example.example3 .field.invalid { 49 | background-color: #fa755a; 50 | } 51 | 52 | .example.example3 .field.invalid.focus { 53 | background-color: #f6f9fc; 54 | } 55 | 56 | .example.example3 .field.focus::-webkit-input-placeholder, 57 | .example.example3 .field:focus::-webkit-input-placeholder { 58 | color: #cfd7df; 59 | } 60 | 61 | .example.example3 .field.focus::-moz-placeholder, 62 | .example.example3 .field:focus::-moz-placeholder { 63 | color: #cfd7df; 64 | } 65 | 66 | .example.example3 .field.focus:-ms-input-placeholder, 67 | .example.example3 .field:focus:-ms-input-placeholder { 68 | color: #cfd7df; 69 | } 70 | 71 | .example.example3 input, .example.example3 button { 72 | -webkit-appearance: none; 73 | -moz-appearance: none; 74 | appearance: none; 75 | outline: none; 76 | border-style: none; 77 | } 78 | 79 | .example.example3 input { 80 | color: #fff; 81 | } 82 | 83 | .example.example3 input::-webkit-input-placeholder { 84 | color: #9bacc8; 85 | } 86 | 87 | .example.example3 input::-moz-placeholder { 88 | color: #9bacc8; 89 | } 90 | 91 | .example.example3 input:-ms-input-placeholder { 92 | color: #9bacc8; 93 | } 94 | 95 | .example.example3 button { 96 | display: block; 97 | width: calc(100% - 30px); 98 | height: 40px; 99 | margin: 0 15px; 100 | background-color: #fcd669; 101 | border-radius: 20px; 102 | color: #525f7f; 103 | font-weight: 600; 104 | text-transform: uppercase; 105 | cursor: pointer; 106 | } 107 | 108 | .example.example3 button:active { 109 | background-color: #f5be58; 110 | } 111 | 112 | .example.example3 .error svg .base { 113 | fill: #fa755a; 114 | } 115 | 116 | .example.example3 .error svg .glyph { 117 | fill: #fff; 118 | } 119 | 120 | .example.example3 .error .message { 121 | color: #fff; 122 | } 123 | 124 | .example.example3 .success .icon .border { 125 | stroke: #fcd669; 126 | } 127 | 128 | .example.example3 .success .icon .checkmark { 129 | stroke: #fff; 130 | } 131 | 132 | .example.example3 .success .title { 133 | color: #fff; 134 | } 135 | 136 | .example.example3 .success .message { 137 | color: #9cabc8; 138 | } 139 | 140 | .example.example3 .success .reset path { 141 | fill: #fff; 142 | } 143 | -------------------------------------------------------------------------------- /css/example4.css: -------------------------------------------------------------------------------- 1 | .example.example4 { 2 | background-color: #f6f9fc; 3 | } 4 | 5 | .example.example4 * { 6 | font-family: Inter, Open Sans, Segoe UI, sans-serif; 7 | font-size: 16px; 8 | font-weight: 500; 9 | } 10 | 11 | .example.example4 form { 12 | max-width: 496px !important; 13 | padding: 0 15px; 14 | } 15 | 16 | .example.example4 form > * + * { 17 | margin-top: 20px; 18 | } 19 | 20 | .example.example4 .container { 21 | background-color: #fff; 22 | box-shadow: 0 4px 6px rgba(50, 50, 93, 0.11), 0 1px 3px rgba(0, 0, 0, 0.08); 23 | border-radius: 4px; 24 | padding: 3px; 25 | } 26 | 27 | .example.example4 fieldset { 28 | border-style: none; 29 | padding: 5px; 30 | margin-left: -5px; 31 | margin-right: -5px; 32 | background: rgba(18, 91, 152, 0.05); 33 | border-radius: 8px; 34 | } 35 | 36 | .example.example4 fieldset legend { 37 | float: left; 38 | width: 100%; 39 | text-align: center; 40 | font-size: 13px; 41 | color: #8898aa; 42 | padding: 3px 10px 7px; 43 | } 44 | 45 | .example.example4 .card-only { 46 | display: block; 47 | } 48 | .example.example4 .payment-request-available { 49 | display: none; 50 | } 51 | 52 | .example.example4 fieldset legend + * { 53 | clear: both; 54 | } 55 | 56 | .example.example4 input, .example.example4 button { 57 | -webkit-appearance: none; 58 | -moz-appearance: none; 59 | appearance: none; 60 | outline: none; 61 | border-style: none; 62 | color: #fff; 63 | } 64 | 65 | .example.example4 input:-webkit-autofill { 66 | transition: background-color 100000000s; 67 | -webkit-animation: 1ms void-animation-out; 68 | } 69 | 70 | .example.example4 #example4-card { 71 | padding: 10px; 72 | margin-bottom: 2px; 73 | } 74 | 75 | .example.example4 input { 76 | -webkit-animation: 1ms void-animation-out; 77 | } 78 | 79 | .example.example4 input::-webkit-input-placeholder { 80 | color: #9bacc8; 81 | } 82 | 83 | .example.example4 input::-moz-placeholder { 84 | color: #9bacc8; 85 | } 86 | 87 | .example.example4 input:-ms-input-placeholder { 88 | color: #9bacc8; 89 | } 90 | 91 | .example.example4 button { 92 | display: block; 93 | width: 100%; 94 | height: 37px; 95 | background-color: #d782d9; 96 | border-radius: 2px; 97 | color: #fff; 98 | cursor: pointer; 99 | } 100 | 101 | .example.example4 button:active { 102 | background-color: #b76ac4; 103 | } 104 | 105 | .example.example4 .error svg .base { 106 | fill: #e25950; 107 | } 108 | 109 | .example.example4 .error svg .glyph { 110 | fill: #f6f9fc; 111 | } 112 | 113 | .example.example4 .error .message { 114 | color: #e25950; 115 | } 116 | 117 | .example.example4 .success .icon .border { 118 | stroke: #ffc7ee; 119 | } 120 | 121 | .example.example4 .success .icon .checkmark { 122 | stroke: #d782d9; 123 | } 124 | 125 | .example.example4 .success .title { 126 | color: #32325d; 127 | } 128 | 129 | .example.example4 .success .message { 130 | color: #8898aa; 131 | } 132 | 133 | .example.example4 .success .reset path { 134 | fill: #d782d9; 135 | } 136 | -------------------------------------------------------------------------------- /css/example5.css: -------------------------------------------------------------------------------- 1 | .example.example5 { 2 | background-color: #9169d8; 3 | } 4 | 5 | .example.example5 * { 6 | font-family: Helvetica Neue, Helvetica, Arial, sans-serif; 7 | font-size: 16px; 8 | font-weight: 400; 9 | } 10 | 11 | #example5-paymentRequest { 12 | max-width: 500px; 13 | width: 100%; 14 | margin-bottom: 10px; 15 | } 16 | 17 | .example.example5 fieldset { 18 | border: 1px solid #b5a4ed; 19 | padding: 15px; 20 | border-radius: 6px; 21 | } 22 | 23 | .example.example5 fieldset legend { 24 | margin: 0 auto; 25 | padding: 0 10px; 26 | text-align: center; 27 | font-size: 14px; 28 | font-weight: 500; 29 | color: #cdd0f8; 30 | background-color: #9169d8; 31 | } 32 | 33 | .example.example5 fieldset legend + * { 34 | clear: both; 35 | } 36 | 37 | .example.example5 .card-only { 38 | display: block; 39 | } 40 | .example.example5 .payment-request-available { 41 | display: none; 42 | } 43 | 44 | .example.example5 .row { 45 | display: -ms-flexbox; 46 | display: flex; 47 | margin: 0 0 10px; 48 | } 49 | 50 | .example.example5 .field { 51 | position: relative; 52 | width: 100%; 53 | } 54 | 55 | .example.example5 .field + .field { 56 | margin-left: 10px; 57 | } 58 | 59 | .example.example5 label { 60 | width: 100%; 61 | color: #cdd0f8; 62 | font-size: 13px; 63 | font-weight: 500; 64 | overflow: hidden; 65 | text-overflow: ellipsis; 66 | white-space: nowrap; 67 | } 68 | 69 | .example.example5 .input { 70 | width: 100%; 71 | color: #fff; 72 | background: transparent; 73 | padding: 5px 0 6px 0; 74 | border-bottom: 1px solid #a988ec; 75 | transition: border-color 0.3s cubic-bezier(0.165, 0.84, 0.44, 1); 76 | } 77 | 78 | .example.example5 .input::-webkit-input-placeholder { 79 | color: #bfaef6; 80 | } 81 | 82 | .example.example5 .input::-moz-placeholder { 83 | color: #bfaef6; 84 | } 85 | 86 | .example.example5 .input:-ms-input-placeholder { 87 | color: #bfaef6; 88 | } 89 | 90 | .example.example5 .input.StripeElement--focus, 91 | .example.example5 .input:focus { 92 | border-color: #fff; 93 | } 94 | .example.example5 .input.StripeElement--invalid { 95 | border-color: #ffc7ee; 96 | } 97 | 98 | .example.example5 input:-webkit-autofill, 99 | .example.example5 select:-webkit-autofill { 100 | -webkit-text-fill-color: #fce883; 101 | transition: background-color 100000000s; 102 | -webkit-animation: 1ms void-animation-out; 103 | } 104 | 105 | .example.example5 .StripeElement--webkit-autofill { 106 | background: transparent !important; 107 | } 108 | 109 | .example.example5 input, 110 | .example.example5 button, 111 | .example.example5 select { 112 | -webkit-animation: 1ms void-animation-out; 113 | -webkit-appearance: none; 114 | -moz-appearance: none; 115 | appearance: none; 116 | outline: none; 117 | border-style: none; 118 | border-radius: 0; 119 | } 120 | 121 | .example.example5 select.input, 122 | .example.example5 select:-webkit-autofill { 123 | background-image: url('data:image/svg+xml;utf8,'); 124 | background-position: 100%; 125 | background-size: 10px 5px; 126 | background-repeat: no-repeat; 127 | overflow: hidden; 128 | text-overflow: ellipsis; 129 | padding-right: 20px; 130 | } 131 | 132 | .example.example5 button { 133 | display: block; 134 | width: 100%; 135 | height: 40px; 136 | margin: 20px 0 0; 137 | background-color: #fff; 138 | border-radius: 6px; 139 | color: #9169d8; 140 | font-weight: 500; 141 | cursor: pointer; 142 | } 143 | 144 | .example.example5 button:active { 145 | background-color: #cdd0f8; 146 | } 147 | 148 | .example.example5 .error svg .base { 149 | fill: #fff; 150 | } 151 | 152 | .example.example5 .error svg .glyph { 153 | fill: #9169d8; 154 | } 155 | 156 | .example.example5 .error .message { 157 | color: #fff; 158 | } 159 | 160 | .example.example5 .success .icon .border { 161 | stroke: #bfaef6; 162 | } 163 | 164 | .example.example5 .success .icon .checkmark { 165 | stroke: #fff; 166 | } 167 | 168 | .example.example5 .success .title { 169 | color: #fff; 170 | } 171 | 172 | .example.example5 .success .message { 173 | color: #cdd0f8; 174 | } 175 | 176 | .example.example5 .success .reset path { 177 | fill: #fff; 178 | } 179 | -------------------------------------------------------------------------------- /img/apple-touch-icon/180x180.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/stripe/elements-examples/7cb00ab571c98a68c72bb67243d35cff3e2b560e/img/apple-touch-icon/180x180.png -------------------------------------------------------------------------------- /img/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/stripe/elements-examples/7cb00ab571c98a68c72bb67243d35cff3e2b560e/img/favicon.ico -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Stripe Elements: Build beautiful, smart checkout flows 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | 27 | 28 | 29 | 30 | 31 |
32 |
33 |
34 |
35 |
36 |
37 |
38 |
39 | 40 |
41 | 73 |

Stripe Elements examples

74 |

Stripe Elements are pre-built rich UI components that help you build your own pixel-perfect checkout flows across desktop and mobile.

75 |

76 | 77 | Learn more 78 | 79 | 80 | Explore the docs 81 | 82 |

83 |
84 | 85 | 86 |
87 |
88 |
89 |
90 | 91 | 92 |
93 |
94 | 95 | 96 |
97 |
98 | 99 | 100 |
101 |
102 |
103 |
104 |
105 |
106 |
107 | 108 | 113 |
114 |
115 |
116 | 117 | 118 | 119 | 120 |
121 |

Payment successful

122 |

Thanks for trying Stripe Elements. No money was charged, but we generated a token: tok_189gMN2eZvKYlo2CwTBv9KKh

123 | 124 | 125 | 126 | 127 | 128 |
129 | 130 |
131 | Your card won't be charged 132 | 133 | 134 | 135 | 136 | View source on GitHub 137 | 138 |
139 |
140 | 141 | 142 |
143 |
144 |
145 |
146 |
147 | 148 | 149 |
150 |
151 |
152 |
153 |
154 | 155 | 156 |
157 |
158 |
159 | 160 | 161 |
162 |
163 |
164 | 165 | 166 |
167 |
168 |
169 |
170 |
171 |
172 |
173 | 174 |
175 |
176 |
177 |
178 |
179 |
180 | 181 |
182 |
183 |
184 |
185 | 186 |
187 |
188 |
189 | 190 | 195 |
196 |
197 |
198 | 199 | 200 | 201 | 202 |
203 |

Payment successful

204 |

Thanks for trying Stripe Elements. No money was charged, but we generated a token: tok_189gMN2eZvKYlo2CwTBv9KKh

205 | 206 | 207 | 208 | 209 | 210 |
211 | 212 |
213 | Your card won't be charged 214 | 215 | 216 | 217 | 218 | View source on GitHub 219 | 220 |
221 |
222 | 223 | 224 |
225 |
226 |
227 | 228 | 229 | 230 |
231 |
232 |
233 |
234 |
235 | 236 |
237 | 238 | 243 |
244 |
245 |
246 | 247 | 248 | 249 | 250 |
251 |

Payment successful

252 |

Thanks for trying Stripe Elements. No money was charged, but we generated a token: tok_189gMN2eZvKYlo2CwTBv9KKh

253 | 254 | 255 | 256 | 257 | 258 |
259 | 260 |
261 | Your card won't be charged 262 | 263 | 264 | 265 | 266 | View source on GitHub 267 | 268 |
269 |
270 | 271 | 272 |
273 |
274 |
275 | 276 |
277 |
278 | Pay with card 279 | Or enter card details 280 |
281 |
282 | 283 |
284 |
285 | 290 |
291 |
292 |
293 | 294 | 295 | 296 | 297 |
298 |

Payment successful

299 |

Thanks for trying Stripe Elements. No money was charged, but we generated a token: tok_189gMN2eZvKYlo2CwTBv9KKh

300 | 301 | 302 | 303 | 304 | 305 |
306 | 307 |
308 | Your card won't be charged 309 | 310 | 311 | 312 | 313 | View source on GitHub 314 | 315 |
316 |
317 | 318 | 319 |
320 |
321 |
322 | 323 |
324 |
325 | Pay with card 326 | Or enter card details 327 |
328 |
329 | 330 | 331 |
332 |
333 |
334 |
335 | 336 | 337 |
338 |
339 | 340 | 341 |
342 |
343 |
344 |
345 |
346 | 347 | 348 |
349 |
350 |
351 |
352 | 353 | 354 |
355 |
356 | 357 | 358 |
359 |
360 | 361 | 362 |
363 |
364 |
365 |
366 |
367 | 368 |
369 |
370 |
371 | 372 |
373 | 378 |
379 |
380 |
381 | 382 | 383 | 384 | 385 |
386 |

Payment successful

387 |

Thanks for trying Stripe Elements. No money was charged, but we generated a token: tok_189gMN2eZvKYlo2CwTBv9KKh

388 | 389 | 390 | 391 | 392 | 393 |
394 | 395 |
396 | Your card won't be charged 397 | 398 | 399 | 400 | 401 | View source on GitHub 402 | 403 |
404 |
405 |
406 | 407 |
408 |
409 | 410 | 411 | 412 | 413 | 414 | 415 | 416 | 417 | 418 | 419 | 420 | 421 | 422 | -------------------------------------------------------------------------------- /js/example1.js: -------------------------------------------------------------------------------- 1 | (function() { 2 | 'use strict'; 3 | 4 | var elements = stripe.elements({ 5 | fonts: [ 6 | { 7 | cssSrc: 'https://fonts.googleapis.com/css?family=Roboto', 8 | }, 9 | ], 10 | // Stripe's examples are localized to specific languages, but if 11 | // you wish to have Elements automatically detect your user's locale, 12 | // use `locale: 'auto'` instead. 13 | locale: window.__exampleLocale 14 | }); 15 | 16 | var card = elements.create('card', { 17 | iconStyle: 'solid', 18 | style: { 19 | base: { 20 | iconColor: '#c4f0ff', 21 | color: '#fff', 22 | fontWeight: 500, 23 | fontFamily: 'Roboto, Open Sans, Segoe UI, sans-serif', 24 | fontSize: '16px', 25 | fontSmoothing: 'antialiased', 26 | 27 | ':-webkit-autofill': { 28 | color: '#fce883', 29 | }, 30 | '::placeholder': { 31 | color: '#87BBFD', 32 | }, 33 | }, 34 | invalid: { 35 | iconColor: '#FFC7EE', 36 | color: '#FFC7EE', 37 | }, 38 | }, 39 | }); 40 | card.mount('#example1-card'); 41 | 42 | registerElements([card], 'example1'); 43 | })(); 44 | -------------------------------------------------------------------------------- /js/example2.js: -------------------------------------------------------------------------------- 1 | (function() { 2 | 'use strict'; 3 | 4 | var elements = stripe.elements({ 5 | fonts: [ 6 | { 7 | cssSrc: 'https://fonts.googleapis.com/css?family=Source+Code+Pro', 8 | }, 9 | ], 10 | // Stripe's examples are localized to specific languages, but if 11 | // you wish to have Elements automatically detect your user's locale, 12 | // use `locale: 'auto'` instead. 13 | locale: window.__exampleLocale 14 | }); 15 | 16 | // Floating labels 17 | var inputs = document.querySelectorAll('.cell.example.example2 .input'); 18 | Array.prototype.forEach.call(inputs, function(input) { 19 | input.addEventListener('focus', function() { 20 | input.classList.add('focused'); 21 | }); 22 | input.addEventListener('blur', function() { 23 | input.classList.remove('focused'); 24 | }); 25 | input.addEventListener('keyup', function() { 26 | if (input.value.length === 0) { 27 | input.classList.add('empty'); 28 | } else { 29 | input.classList.remove('empty'); 30 | } 31 | }); 32 | }); 33 | 34 | var elementStyles = { 35 | base: { 36 | color: '#32325D', 37 | fontWeight: 500, 38 | fontFamily: 'Source Code Pro, Consolas, Menlo, monospace', 39 | fontSize: '16px', 40 | fontSmoothing: 'antialiased', 41 | 42 | '::placeholder': { 43 | color: '#CFD7DF', 44 | }, 45 | ':-webkit-autofill': { 46 | color: '#e39f48', 47 | }, 48 | }, 49 | invalid: { 50 | color: '#E25950', 51 | 52 | '::placeholder': { 53 | color: '#FFCCA5', 54 | }, 55 | }, 56 | }; 57 | 58 | var elementClasses = { 59 | focus: 'focused', 60 | empty: 'empty', 61 | invalid: 'invalid', 62 | }; 63 | 64 | var cardNumber = elements.create('cardNumber', { 65 | style: elementStyles, 66 | classes: elementClasses, 67 | }); 68 | cardNumber.mount('#example2-card-number'); 69 | 70 | var cardExpiry = elements.create('cardExpiry', { 71 | style: elementStyles, 72 | classes: elementClasses, 73 | }); 74 | cardExpiry.mount('#example2-card-expiry'); 75 | 76 | var cardCvc = elements.create('cardCvc', { 77 | style: elementStyles, 78 | classes: elementClasses, 79 | }); 80 | cardCvc.mount('#example2-card-cvc'); 81 | 82 | registerElements([cardNumber, cardExpiry, cardCvc], 'example2'); 83 | })(); 84 | -------------------------------------------------------------------------------- /js/example3.js: -------------------------------------------------------------------------------- 1 | (function() { 2 | 'use strict'; 3 | 4 | var elements = stripe.elements({ 5 | fonts: [ 6 | { 7 | cssSrc: 'https://fonts.googleapis.com/css?family=Quicksand', 8 | }, 9 | ], 10 | // Stripe's examples are localized to specific languages, but if 11 | // you wish to have Elements automatically detect your user's locale, 12 | // use `locale: 'auto'` instead. 13 | locale: window.__exampleLocale, 14 | }); 15 | 16 | var elementStyles = { 17 | base: { 18 | color: '#fff', 19 | fontWeight: 600, 20 | fontFamily: 'Quicksand, Open Sans, Segoe UI, sans-serif', 21 | fontSize: '16px', 22 | fontSmoothing: 'antialiased', 23 | 24 | ':focus': { 25 | color: '#424770', 26 | }, 27 | 28 | '::placeholder': { 29 | color: '#9BACC8', 30 | }, 31 | 32 | ':focus::placeholder': { 33 | color: '#CFD7DF', 34 | }, 35 | }, 36 | invalid: { 37 | color: '#fff', 38 | ':focus': { 39 | color: '#FA755A', 40 | }, 41 | '::placeholder': { 42 | color: '#FFCCA5', 43 | }, 44 | }, 45 | }; 46 | 47 | var elementClasses = { 48 | focus: 'focus', 49 | empty: 'empty', 50 | invalid: 'invalid', 51 | }; 52 | 53 | var cardNumber = elements.create('cardNumber', { 54 | style: elementStyles, 55 | classes: elementClasses, 56 | }); 57 | cardNumber.mount('#example3-card-number'); 58 | 59 | var cardExpiry = elements.create('cardExpiry', { 60 | style: elementStyles, 61 | classes: elementClasses, 62 | }); 63 | cardExpiry.mount('#example3-card-expiry'); 64 | 65 | var cardCvc = elements.create('cardCvc', { 66 | style: elementStyles, 67 | classes: elementClasses, 68 | }); 69 | cardCvc.mount('#example3-card-cvc'); 70 | 71 | registerElements([cardNumber, cardExpiry, cardCvc], 'example3'); 72 | })(); 73 | -------------------------------------------------------------------------------- /js/example4.js: -------------------------------------------------------------------------------- 1 | (function() { 2 | "use strict"; 3 | 4 | var elements = stripe.elements({ 5 | fonts: [ 6 | { 7 | cssSrc: "https://rsms.me/inter/inter.css" 8 | } 9 | ], 10 | // Stripe's examples are localized to specific languages, but if 11 | // you wish to have Elements automatically detect your user's locale, 12 | // use `locale: 'auto'` instead. 13 | locale: window.__exampleLocale 14 | }); 15 | 16 | /** 17 | * Card Element 18 | */ 19 | var card = elements.create("card", { 20 | style: { 21 | base: { 22 | color: "#32325D", 23 | fontWeight: 500, 24 | fontFamily: "Inter, Open Sans, Segoe UI, sans-serif", 25 | fontSize: "16px", 26 | fontSmoothing: "antialiased", 27 | 28 | "::placeholder": { 29 | color: "#CFD7DF" 30 | } 31 | }, 32 | invalid: { 33 | color: "#E25950" 34 | } 35 | } 36 | }); 37 | 38 | card.mount("#example4-card"); 39 | 40 | /** 41 | * Payment Request Element 42 | */ 43 | var paymentRequest = stripe.paymentRequest({ 44 | country: "US", 45 | currency: "usd", 46 | total: { 47 | amount: 2000, 48 | label: "Total" 49 | } 50 | }); 51 | paymentRequest.on("token", function(result) { 52 | var example = document.querySelector(".example4"); 53 | example.querySelector(".token").innerText = result.token.id; 54 | example.classList.add("submitted"); 55 | result.complete("success"); 56 | }); 57 | 58 | var paymentRequestElement = elements.create("paymentRequestButton", { 59 | paymentRequest: paymentRequest, 60 | style: { 61 | paymentRequestButton: { 62 | type: "donate" 63 | } 64 | } 65 | }); 66 | 67 | paymentRequest.canMakePayment().then(function(result) { 68 | if (result) { 69 | document.querySelector(".example4 .card-only").style.display = "none"; 70 | document.querySelector( 71 | ".example4 .payment-request-available" 72 | ).style.display = 73 | "block"; 74 | paymentRequestElement.mount("#example4-paymentRequest"); 75 | } 76 | }); 77 | 78 | registerElements([card, paymentRequestElement], "example4"); 79 | })(); 80 | -------------------------------------------------------------------------------- /js/example5.js: -------------------------------------------------------------------------------- 1 | (function() { 2 | "use strict"; 3 | 4 | var elements = stripe.elements({ 5 | // Stripe's examples are localized to specific languages, but if 6 | // you wish to have Elements automatically detect your user's locale, 7 | // use `locale: 'auto'` instead. 8 | locale: window.__exampleLocale 9 | }); 10 | 11 | /** 12 | * Card Element 13 | */ 14 | var card = elements.create("card", { 15 | iconStyle: "solid", 16 | style: { 17 | base: { 18 | iconColor: "#fff", 19 | color: "#fff", 20 | fontWeight: 400, 21 | fontFamily: "Helvetica Neue, Helvetica, Arial, sans-serif", 22 | fontSize: "16px", 23 | fontSmoothing: "antialiased", 24 | 25 | "::placeholder": { 26 | color: "#BFAEF6" 27 | }, 28 | ":-webkit-autofill": { 29 | color: "#fce883" 30 | } 31 | }, 32 | invalid: { 33 | iconColor: "#FFC7EE", 34 | color: "#FFC7EE" 35 | } 36 | } 37 | }); 38 | card.mount("#example5-card"); 39 | 40 | /** 41 | * Payment Request Element 42 | */ 43 | var paymentRequest = stripe.paymentRequest({ 44 | country: "US", 45 | currency: "usd", 46 | total: { 47 | amount: 2500, 48 | label: "Total" 49 | }, 50 | requestShipping: true, 51 | shippingOptions: [ 52 | { 53 | id: "free-shipping", 54 | label: "Free shipping", 55 | detail: "Arrives in 5 to 7 days", 56 | amount: 0 57 | } 58 | ] 59 | }); 60 | paymentRequest.on("token", function(result) { 61 | var example = document.querySelector(".example5"); 62 | example.querySelector(".token").innerText = result.token.id; 63 | example.classList.add("submitted"); 64 | result.complete("success"); 65 | }); 66 | 67 | var paymentRequestElement = elements.create("paymentRequestButton", { 68 | paymentRequest: paymentRequest, 69 | style: { 70 | paymentRequestButton: { 71 | theme: "light" 72 | } 73 | } 74 | }); 75 | 76 | paymentRequest.canMakePayment().then(function(result) { 77 | if (result) { 78 | document.querySelector(".example5 .card-only").style.display = "none"; 79 | document.querySelector( 80 | ".example5 .payment-request-available" 81 | ).style.display = 82 | "block"; 83 | paymentRequestElement.mount("#example5-paymentRequest"); 84 | } 85 | }); 86 | 87 | registerElements([card], "example5"); 88 | })(); 89 | -------------------------------------------------------------------------------- /js/index.js: -------------------------------------------------------------------------------- 1 | 'use strict'; 2 | 3 | var stripe = Stripe('pk_test_6pRNASCoBOKtIshFeQd4XMUh'); 4 | 5 | function registerElements(elements, exampleName) { 6 | var formClass = '.' + exampleName; 7 | var example = document.querySelector(formClass); 8 | 9 | var form = example.querySelector('form'); 10 | var resetButton = example.querySelector('a.reset'); 11 | var error = form.querySelector('.error'); 12 | var errorMessage = error.querySelector('.message'); 13 | 14 | function enableInputs() { 15 | Array.prototype.forEach.call( 16 | form.querySelectorAll( 17 | "input[type='text'], input[type='email'], input[type='tel']" 18 | ), 19 | function(input) { 20 | input.removeAttribute('disabled'); 21 | } 22 | ); 23 | } 24 | 25 | function disableInputs() { 26 | Array.prototype.forEach.call( 27 | form.querySelectorAll( 28 | "input[type='text'], input[type='email'], input[type='tel']" 29 | ), 30 | function(input) { 31 | input.setAttribute('disabled', 'true'); 32 | } 33 | ); 34 | } 35 | 36 | function triggerBrowserValidation() { 37 | // The only way to trigger HTML5 form validation UI is to fake a user submit 38 | // event. 39 | var submit = document.createElement('input'); 40 | submit.type = 'submit'; 41 | submit.style.display = 'none'; 42 | form.appendChild(submit); 43 | submit.click(); 44 | submit.remove(); 45 | } 46 | 47 | // Listen for errors from each Element, and show error messages in the UI. 48 | var savedErrors = {}; 49 | elements.forEach(function(element, idx) { 50 | element.on('change', function(event) { 51 | if (event.error) { 52 | error.classList.add('visible'); 53 | savedErrors[idx] = event.error.message; 54 | errorMessage.innerText = event.error.message; 55 | } else { 56 | savedErrors[idx] = null; 57 | 58 | // Loop over the saved errors and find the first one, if any. 59 | var nextError = Object.keys(savedErrors) 60 | .sort() 61 | .reduce(function(maybeFoundError, key) { 62 | return maybeFoundError || savedErrors[key]; 63 | }, null); 64 | 65 | if (nextError) { 66 | // Now that they've fixed the current error, show another one. 67 | errorMessage.innerText = nextError; 68 | } else { 69 | // The user fixed the last error; no more errors. 70 | error.classList.remove('visible'); 71 | } 72 | } 73 | }); 74 | }); 75 | 76 | // Listen on the form's 'submit' handler... 77 | form.addEventListener('submit', function(e) { 78 | e.preventDefault(); 79 | 80 | // Trigger HTML5 validation UI on the form if any of the inputs fail 81 | // validation. 82 | var plainInputsValid = true; 83 | Array.prototype.forEach.call(form.querySelectorAll('input'), function( 84 | input 85 | ) { 86 | if (input.checkValidity && !input.checkValidity()) { 87 | plainInputsValid = false; 88 | return; 89 | } 90 | }); 91 | if (!plainInputsValid) { 92 | triggerBrowserValidation(); 93 | return; 94 | } 95 | 96 | // Show a loading screen... 97 | example.classList.add('submitting'); 98 | 99 | // Disable all inputs. 100 | disableInputs(); 101 | 102 | // Gather additional customer data we may have collected in our form. 103 | var name = form.querySelector('#' + exampleName + '-name'); 104 | var address1 = form.querySelector('#' + exampleName + '-address'); 105 | var city = form.querySelector('#' + exampleName + '-city'); 106 | var state = form.querySelector('#' + exampleName + '-state'); 107 | var zip = form.querySelector('#' + exampleName + '-zip'); 108 | var additionalData = { 109 | name: name ? name.value : undefined, 110 | address_line1: address1 ? address1.value : undefined, 111 | address_city: city ? city.value : undefined, 112 | address_state: state ? state.value : undefined, 113 | address_zip: zip ? zip.value : undefined, 114 | }; 115 | 116 | // Use Stripe.js to create a token. We only need to pass in one Element 117 | // from the Element group in order to create a token. We can also pass 118 | // in the additional customer data we collected in our form. 119 | stripe.createToken(elements[0], additionalData).then(function(result) { 120 | // Stop loading! 121 | example.classList.remove('submitting'); 122 | 123 | if (result.token) { 124 | // If we received a token, show the token ID. 125 | example.querySelector('.token').innerText = result.token.id; 126 | example.classList.add('submitted'); 127 | } else { 128 | // Otherwise, un-disable inputs. 129 | enableInputs(); 130 | } 131 | }); 132 | }); 133 | 134 | resetButton.addEventListener('click', function(e) { 135 | e.preventDefault(); 136 | // Resetting the form (instead of setting the value to `''` for each input) 137 | // helps us clear webkit autofill styles. 138 | form.reset(); 139 | 140 | // Clear each Element. 141 | elements.forEach(function(element) { 142 | element.clear(); 143 | }); 144 | 145 | // Reset error state as well. 146 | error.classList.remove('visible'); 147 | 148 | // Resetting the form does not un-disable inputs, so we need to do it separately: 149 | enableInputs(); 150 | example.classList.remove('submitted'); 151 | }); 152 | } 153 | -------------------------------------------------------------------------------- /js/l10n.js: -------------------------------------------------------------------------------- 1 | // Simple localization 2 | const isStripeDev = window.location.hostname === 'stripe.dev'; 3 | const localeIndex = isStripeDev ? 2 : 1; 4 | window.__exampleLocale = window.location.pathname.split('/')[localeIndex] || 'en'; 5 | const urlPrefix = isStripeDev ? '/elements-examples/' : '/'; 6 | 7 | document.querySelectorAll('.optionList a').forEach(function(langNode) { 8 | const langValue = langNode.getAttribute('data-lang'); 9 | const langUrl = langValue === 'en' ? urlPrefix : (urlPrefix + langValue + '/'); 10 | 11 | if (langUrl === window.location.pathname || langUrl === window.location.pathname + '/') { 12 | langNode.className += ' selected'; 13 | langNode.parentNode.setAttribute('aria-selected', 'true'); 14 | } else { 15 | langNode.setAttribute('href', langUrl); 16 | langNode.parentNode.setAttribute('aria-selected', 'false'); 17 | } 18 | }); 19 | --------------------------------------------------------------------------------