Merge pull request stripe#1 from stripe/michelle-paymentRequest

Author: michelle

css/example4.css

@@ -24,79 +24,6 @@
   padding: 3px;
 }
 
-.example.example4 .amount {
-  position: relative;
-  display: -ms-flexbox;
-  display: flex;
-  height: 40px;
-}
-
-.example.example4 .amount input[type="radio"] {
-  display: none;
-}
-
-.example.example4 .amount input[type="radio"]:checked + label {
-  color: #fff;
-}
-
-.example.example4 .amount input[type="radio"]:checked + label:active {
-  color: #ffe0f5;
-}
-
-.example.example4
-  .amount
-  input[type="radio"]:nth-of-type(2):checked
-  ~ .highlight {
-  transform: translateX(100%);
-}
-
-.example.example4
-  .amount
-  input[type="radio"]:nth-of-type(3):checked
-  ~ .highlight {
-  transform: translateX(200%);
-}
-
-.example.example4
-  .amount
-  input[type="radio"]:nth-of-type(4):checked
-  ~ .highlight {
-  transform: translateX(300%);
-}
-
-.example.example4
-  .amount
-  input[type="radio"]:nth-of-type(5):checked
-  ~ .highlight {
-  transform: translateX(400%);
-}
-
-.example.example4 .amount label {
-  -ms-flex: 1;
-  flex: 1;
-  text-align: center;
-  line-height: 34px;
-  cursor: pointer;
-  color: #32325d;
-  z-index: 1;
-  transition: color 0.3s cubic-bezier(0.165, 0.84, 0.44, 1);
-  -webkit-tap-highlight-color: transparent;
-}
-
-.example.example4 .amount label:active {
-  color: #8898aa;
-}
-
-.example.example4 .amount .highlight {
-  position: absolute;
-  width: calc(20% - 1px);
-  height: calc(100% - 6px);
-  left: 3px;
-  border-radius: 2px;
-  background-color: #d782d9;
-  transition: transform 0.3s cubic-bezier(0.165, 0.84, 0.44, 1);
-}
-
 .example.example4 fieldset {
   border-style: none;
   padding: 5px;
@@ -115,6 +42,13 @@
   padding: 3px 10px 7px;
 }
 
+.example.example4 .card-only {
+  display: block;
+}
+.example.example4 .payment-request-available {
+  display: none;
+}
+
 .example.example4 fieldset legend + * {
   clear: both;
 }
@@ -136,7 +70,7 @@
   -webkit-animation: 1ms void-animation-out;
 }
 
-.example.example4 .StripeElement {
+.example.example4 #example4-card {
   padding: 10px;
   margin-bottom: 2px;
 }

css/example5.css

@@ -12,6 +12,12 @@
   padding: 0 20px;
 }
 
+#example5-paymentRequest {
+  max-width: 500px;
+  width: 100%;
+  margin-bottom: 10px;
+}
+
 .example.example5 fieldset {
   border: 1px solid #b5a4ed;
   padding: 15px;
@@ -33,6 +39,13 @@
   clear: both;
 }
 
+.example.example5 .card-only {
+  display: block;
+}
+.example.example5 .payment-request-available {
+  display: none;
+}
+
 .example.example5 .row {
   display: -ms-flexbox;
   display: flex;

index.html

@@ -219,24 +219,12 @@ <h3 class="title">Payment successful</h3>
       <!--Example 4-->
       <div class="cell example example4">
         <form>
-          <div class="amount container">
-            <input id="example4-amount-1" type="radio" name="amount" value="1">
-            <label for="example4-amount-1">$1</label>
-            <input id="example4-amount-5" type="radio" name="amount" value="5" checked="">
-            <label for="example4-amount-5">$5</label>
-            <input id="example4-amount-20" type="radio" name="amount" value="20">
-            <label for="example4-amount-20">$20</label>
-            <input id="example4-amount-50" type="radio" name="amount" value="50">
-            <label for="example4-amount-50">$50</label>
-            <input id="example4-amount-100" type="radio" name="amount" value="100">
-            <label for="example4-amount-100">$100</label>
-            <div class="highlight"></div>
-          </div>
-          <div id="example4-apple-pay">
+          <div id="example4-paymentRequest">
             <!--Stripe Apple Pay element inserted here-->
           </div>
           <fieldset>
-            <legend>Pay with card</legend>
+            <legend class="card-only">Pay with card</legend>
+            <legend class="payment-request-available">Or enter card details</legend>
             <div class="container">
               <div id="example4-card"></div>
               <input type="submit" value="Donate">
@@ -271,12 +259,13 @@ <h3 class="title">Payment successful</h3>
 
       <!--Example 5-->
       <div class="cell example example5">
+        <div id="example5-paymentRequest">
+          <!--Stripe payment request API element inserted here-->
+        </div>
         <form>
-          <div id="example5-payment-request">
-            <!--Stripe payment request API element inserted here-->
-          </div>
           <fieldset>
-            <legend>Pay with card</legend>
+            <legend class="card-only">Pay with card</legend>
+            <legend class="payment-request-available">Or enter card details</legend>
             <div class="row">
               <div class="field">
                 <label for="example5-name">Name</label>

js/example4.js

@@ -5,6 +5,9 @@
     cssSrc: 'https://rsms.me/interface/interface.css',
   });
 
+  /**
+   * Card Element
+   */
   var card = elements.create('card', {
     style: {
       base: {
@@ -23,7 +26,39 @@
       },
     },
   });
+
   card.mount('#example4-card');
 
-  registerElements([card], 'example4');
+  /**
+   * Payment Request Element
+   */
+  var paymentRequest = stripe.paymentRequest({
+    country: 'US',
+    currency: 'USD',
+    total: {
+      amount: 2000,
+      label: 'Total',
+    },
+  });
+  var paymentRequestElement = elements.create('paymentRequestButton', {
+    paymentRequest: paymentRequest,
+    style: {
+      paymentRequestButton: {
+        type: 'donate',
+      },
+    },
+  });
+
+  paymentRequest.canMakePayment().then(function(result) {
+    if (result) {
+      document.querySelector('.example4 .card-only').style.display = 'none';
+      document.querySelector(
+        '.example4 .payment-request-available'
+      ).style.display =
+        'block';
+      paymentRequestElement.mount('#example4-paymentRequest');
+    }
+  });
+
+  registerElements([card, paymentRequestElement], 'example4');
 })();

js/example5.js

@@ -3,6 +3,9 @@
 
   var elements = stripe.elements();
 
+  /**
+   * Card Element
+   */
   var card = elements.create('card', {
     style: {
       iconStyle: 'solid',
@@ -29,5 +32,36 @@
   });
   card.mount('#example5-card');
 
+  /**
+   * Payment Request Element
+   */
+  var paymentRequest = stripe.paymentRequest({
+    country: 'US',
+    currency: 'USD',
+    total: {
+      amount: 2500,
+      label: 'Total',
+    },
+  });
+  var paymentRequestElement = elements.create('paymentRequestButton', {
+    paymentRequest: paymentRequest,
+    style: {
+      paymentRequestButton: {
+        theme: 'light',
+      },
+    },
+  });
+
+  paymentRequest.canMakePayment().then(function(result) {
+    if (result) {
+      document.querySelector('.example5 .card-only').style.display = 'none';
+      document.querySelector(
+        '.example5 .payment-request-available'
+      ).style.display =
+        'block';
+      paymentRequestElement.mount('#example5-paymentRequest');
+    }
+  });
+
   registerElements([card], 'example5');
 })();