Update PRAPI integration

vilhelmjosander · Sep 15, 2017 · 2a6e836 · 2a6e836
1 parent c4ef34e
commit 2a6e836
Show file tree

Hide file tree

Showing 4 changed files with 10 additions and 107 deletions.
diff --git a/css/example4.css b/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;

diff --git a/index.html b/index.html
@@ -4,7 +4,7 @@
   <title>Elements: Build beautiful, smart checkout flows</title>
   <meta name="description" content="Build beautiful, smart checkout flows.">
 
-  <script src="https://edge-js.stripe.com/v3/"></script>
+  <script src="https://js.stripe.com/v3/"></script>
   <script src="js/index.js"></script>
 
   <link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet">
@@ -219,19 +219,6 @@ <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-paymentRequest">
             <!--Stripe Apple Pay element inserted here-->
           </div>

diff --git a/js/example4.js b/js/example4.js
@@ -32,36 +32,25 @@
   /**
    * Payment Request Element
    */
-  var paymentRequest = stripe._paymentRequestBeta({
+  var paymentRequest = stripe.paymentRequest({
     country: 'US',
     currency: 'USD',
     total: {
-      amount:
-        document.querySelector('.example4 input[name="amount"]:checked').value *
-        100,
+      amount: 2000,
       label: 'Total',
     },
   });
-  var paymentRequestElement = elements.create('_paymentRequestBeta', {
+  var paymentRequestElement = elements.create('paymentRequestButton', {
     paymentRequest: paymentRequest,
     style: {
-      _paymentRequestBeta: {
+      paymentRequestButton: {
         type: 'donate',
       },
     },
   });
 
-  document
-    .querySelector('.example4 input[name="amount"]')
-    .addEventListener('change', function(ev) {
-      if (ev.target.checked) {
-        // TODO: This API is not yet implemented.
-        // paymentRequest.update({total: ev.target.value});
-      }
-    });
-
   paymentRequest.canMakePayment().then(function(result) {
-    if (result.available) {
+    if (result) {
       document.querySelector('.example4 .card-only').style.display = 'none';
       document.querySelector(
         '.example4 .payment-request-available'

diff --git a/js/example5.js b/js/example5.js
@@ -35,25 +35,25 @@
   /**
    * Payment Request Element
    */
-  var paymentRequest = stripe._paymentRequestBeta({
+  var paymentRequest = stripe.paymentRequest({
     country: 'US',
     currency: 'USD',
     total: {
       amount: 2500,
       label: 'Total',
     },
   });
-  var paymentRequestElement = elements.create('_paymentRequestBeta', {
+  var paymentRequestElement = elements.create('paymentRequestButton', {
     paymentRequest: paymentRequest,
     style: {
-      _paymentRequestBeta: {
+      paymentRequestButton: {
         theme: 'light',
       },
     },
   });
 
   paymentRequest.canMakePayment().then(function(result) {
-    if (result.available) {
+    if (result) {
       document.querySelector('.example5 .card-only').style.display = 'none';
       document.querySelector(
         '.example5 .payment-request-available'