add paypal button

layouts/youtube-views/single.html

@@ -105,7 +105,7 @@
 
     <div class="container">
       <div class="card-group flex-column flex-lg-row">
-        <div class="card">
+        <div class="card h-100">
           <div class="card-body p-0 py-4 d-flex flex-column align-items-center">
             <div class="d-flex flex-column mb-2">
               <section class="d-flex mx-auto">
@@ -129,10 +129,26 @@
               <!-- <p class="card-text mb-2">Placement fee : NT$400／video</p> -->
               <!-- <p class="card-text">Cost per valid view : NT$0.4</p> -->
             </div>
-            <button class="buy-btn">Buy Now</button>
+
+            <p>
+              <button class="buy-btn" type="button" data-bs-toggle="collapse" data-bs-target="#paypal_box"
+                aria-expanded="false" aria-controls="collapseExample">
+                Buy Now
+              </button>
+            </p>
+            <div class="collapse w-100" id="paypal_box">
+              <div class="card card-body paypal-content">
+                <div id="smart-button-container">
+                  <div style="text-align: center;">
+                    <div id="paypal-button-container-30"></div>
+                  </div>
+                </div>
+              </div>
+            </div>
+            <!-- <button class="buy-btn">Buy Now</button> -->
           </div>
         </div>
-        <div class="card mx-lg-5 my-5 my-lg-0">
+        <div class="card mx-lg-5 my-5 my-lg-0 h-100">
           <div class="card-body p-0 py-4 d-flex flex-column align-items-center">
             <div class="d-flex flex-column mb-2">
               <section class="d-flex mx-auto">
@@ -156,10 +172,25 @@
               <!-- <p class="card-text mb-2">Placement fee : NT$400／video</p> -->
               <!-- <p class="card-text">Cost per valid view : NT$0.4</p> -->
             </div>
-            <button class="buy-btn">Buy Now</button>
+
+            <p>
+              <button class="buy-btn" type="button" data-bs-toggle="collapse" data-bs-target="#paypal_box_60"
+                aria-expanded="false" aria-controls="collapseExample">
+                Buy Now
+              </button>
+            </p>
+            <div class="collapse w-100" id="paypal_box_60">
+              <div class="card card-body paypal-content">
+                <div id="smart-button-container">
+                  <div style="text-align: center;">
+                    <div id="paypal-button-container-60"></div>
+                  </div>
+                </div>
+              </div>
+            </div>
           </div>
         </div>
-        <div class="card">
+        <div class="card h-100">
           <div class="card-body p-0 py-4 d-flex flex-column align-items-center">
             <div class="d-flex flex-column mb-2">
               <section class="d-flex mx-auto">
@@ -183,7 +214,21 @@
               <!-- <p class="card-text mb-2">Placement fee : NT$400／video</p> -->
               <!-- <p class="card-text">Cost per valid view : NT$0.4</p> -->
             </div>
-            <button class="buy-btn">Buy Now</button>
+            <p>
+              <button class="buy-btn" type="button" data-bs-toggle="collapse" data-bs-target="#paypal_box_100"
+                aria-expanded="false" aria-controls="collapseExample">
+                Buy Now
+              </button>
+            </p>
+            <div class="collapse w-100" id="paypal_box_100">
+              <div class="card card-body paypal-content">
+                <div id="smart-button-container">
+                  <div style="text-align: center;">
+                    <div id="paypal-button-container-100"></div>
+                  </div>
+                </div>
+              </div>
+            </div>
           </div>
         </div>
       </div>
@@ -555,6 +600,122 @@
   <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.min.js"
     integrity="sha384-cVKIPhGWiC2Al4u+LWgxfKTRIcfu0JTxR+EQDz/bgldoEyl4H0zUF0QKbrJ0EcQF"
     crossorigin="anonymous"></script>
+
+  <!-- PayPal 按鈕 -->
+  <script
+    src="https://www.paypal.com/sdk/js?client-id=AYDfLD6TeH9KgbAzy1LNTNmBP4kwNlMoQ-pYEBlTBMq5bs-vjTAdQr3s2s3L_bD_5qEHYS079Svc9h2W&enable-funding=venmo&currency=USD"
+    data-sdk-integration-source="button-factory"></script>
+
+  <script>
+    //  30 USD
+    function initPayPalButton_30() {
+      paypal.Buttons({
+        style: {
+          shape: 'rect',
+          color: 'gold',
+          layout: 'vertical',
+          label: 'paypal',
+
+        },
+
+        createOrder: function (data, actions) {
+          return actions.order.create({
+            purchase_units: [{ "description": "2,000 real youtube video views", "amount": { "currency_code": "USD", "value": 30 } }]
+          });
+        },
+
+        onApprove: function (data, actions) {
+          return actions.order.capture().then(function (orderData) {
+            // Full available details
+            console.log('Capture result', orderData, JSON.stringify(orderData, null, 2));
+            // Show a success message within this page, e.g.
+            const element = document.getElementById('paypal-button-container-30');
+            element.innerHTML = '';
+            element.innerHTML = '<h3>Thank you for your payment!</h3>';
+            // Or go to another URL:  actions.redirect('thank_you.html');
+          });
+        },
+
+        onError: function (err) {
+          console.log(err);
+        }
+      }).render('#paypal-button-container-30');
+    }
+    initPayPalButton_30();
+
+    //  60 USD
+    function initPayPalButton_60() {
+      paypal.Buttons({
+        style: {
+          shape: 'rect',
+          color: 'gold',
+          layout: 'vertical',
+          label: 'paypal',
+
+        },
+
+        createOrder: function (data, actions) {
+          return actions.order.create({
+            purchase_units: [{ "description": "4,200 real youtube video views", "amount": { "currency_code": "USD", "value": 60 } }]
+          });
+        },
+
+        onApprove: function (data, actions) {
+          return actions.order.capture().then(function (orderData) {
+            // Full available details
+            console.log('Capture result', orderData, JSON.stringify(orderData, null, 2));
+            // Show a success message within this page, e.g.
+            const element = document.getElementById('paypal-button-container-60');
+            element.innerHTML = '';
+            element.innerHTML = '<h3>Thank you for your payment!</h3>';
+            // Or go to another URL:  actions.redirect('thank_you.html');
+          });
+        },
+
+        onError: function (err) {
+          console.log(err);
+        }
+      }).render('#paypal-button-container-60');
+    }
+    initPayPalButton_60();
+
+    //  100 USD
+    function initPayPalButton_100() {
+      paypal.Buttons({
+        style: {
+          shape: 'rect',
+          color: 'gold',
+          layout: 'vertical',
+          label: 'paypal',
+
+        },
+
+        createOrder: function (data, actions) {
+          return actions.order.create({
+            purchase_units: [{ "description": "7,500 real youtube video views", "amount": { "currency_code": "USD", "value": 100 } }]
+          });
+        },
+
+        onApprove: function (data, actions) {
+          return actions.order.capture().then(function (orderData) {
+            // Full available details
+            console.log('Capture result', orderData, JSON.stringify(orderData, null, 2));
+            // Show a success message within this page, e.g.
+            const element = document.getElementById('paypal-button-container-100');
+            element.innerHTML = '';
+            element.innerHTML = '<h3>Thank you for your payment!</h3>';
+            // Or go to another URL:  actions.redirect('thank_you.html');
+          });
+        },
+
+        onError: function (err) {
+          console.log(err);
+        }
+      }).render('#paypal-button-container-100');
+    }
+    initPayPalButton_100();
+  </script>
+
 </body>
 
 </html>

static/css/style.css

@@ -1119,6 +1119,10 @@
   border: 1px solid #ea5413;
   background: #fff;
 }
+#youtube-views .card-group .paypal-content {
+  margin: 0 20px;
+  box-shadow: none;
+}
 #youtube-views .direction-list {
   margin-top: 100px;
 }

static/css/style.scss

@@ -1146,6 +1146,10 @@
         }
       }
     }
+    .paypal-content {
+        margin: 0 20px;
+        box-shadow: none;
+    }
   }
   .direction-list {
     margin-top: 100px;