Updates Demos

bennypowers · Jan 17, 2018 · 126e25e · 126e25e
1 parent e90a86e
commit 126e25e
Show file tree

Hide file tree

Showing 3 changed files with 22 additions and 20 deletions.
diff --git a/README.md b/README.md
@@ -27,28 +27,19 @@ You should make sure to load stripe.js on your app's index.html, as per Stripe's
 ```
 -->
 ```html
-<custom-style>
-  <style>
-    html {
-      --stripe-elements-base-color: var(--paper-grey-700);
-      --stripe-elements-base-text-transform: uppercase;
-      --stripe-elements-base-font-family: 'Georgia';
-      --stripe-elements-base-font-style: italic;
-      --stripe-elements-element: {
-        padding: 14px;
-        background-color: #c0fefe;
-      }
-    }
-  </style>
-</custom-style>
+<p>Insert a test key to create the element, then use a <a href="https://stripe.com/docs/testing#cards">test card</a> to generate a token.</p>
 
 <paper-input label="Stripe Publishable Key" value="{{key}}"></paper-input>
 
-<stripe-elements id="stripe" publishable-key="[[key]]" token="{{token}}"></stripe-elements>
+<div style="display:flex;">
 
-<paper-button onclick="stripe.submit();"></paper-button>
+  <stripe-elements id="stripe" stripe-ready="{{ready}}" publishable-key="[[key]]" token="{{token}}"></stripe-elements>
 
-<show-json hide-copy-button json="[[token]]"></show-json>
+  <paper-button disabled="[[!ready]]" onclick="stripe.submit();">Get Token</paper-button>
+
+</div>
+
+<paper-toast opened="[[token]]" text="Token received for 💳 [[token.card.last4]]! 🤑"></paper-toast>
 ```
 
 ## Styling

diff --git a/bower.json b/bower.json
@@ -18,6 +18,7 @@
     "web-component-tester": "^6.0.0",
     "webcomponentsjs": "webcomponents/webcomponentsjs#^1.0.0",
     "paper-input": "PolymerElements/paper-input#^2.0.0",
-    "show-json": "ryanburns23/show-json#^2"
+    "show-json": "ryanburns23/show-json#^2",
+    "paper-button": "PolymerElements/paper-button#^2.0.0"
   }
 }
diff --git a/demo/index.html b/demo/index.html
@@ -39,14 +39,24 @@ <h3>Basic stripe-elements demo</h3>
                       background-color: #c0fefe;
                     }
                   }
+                  .form {
+                    display: flex;
+                  }
                 </style>
               </custom-style>
 
+              <p>Insert a test key to create the element, then use a <a href="https://stripe.com/docs/testing#cards">test card</a> to generate a token.</p>
+
               <paper-input label="Stripe Publishable Key" value="{{key}}"></paper-input>
 
-              <stripe-elements id="stripe" publishable-key="[[key]]" token="{{token}}"></stripe-elements>
+              <div class="form">
+
+                <stripe-elements id="stripe" stripe-ready="{{ready}}" publishable-key="[[key]]" token="{{token}}"></stripe-elements>
+
+                <paper-button disabled="[[!ready]]" onclick="stripe.submit();">Get Token</paper-button>
+
+              </div>
 
-              <paper-button onclick="stripe.submit();"></paper-button>
 
               <show-json hide-copy-button json="[[token]]"></show-json>
             </template>