added class names and paypal button code

MAD-CITY-MULTIMEDIA-CO · Mar 10, 2022 · 24a8bdc · 24a8bdc
1 parent 8922915
commit 24a8bdc
Show file tree

Hide file tree

Showing 2 changed files with 40 additions and 0 deletions.
diff --git a/advanced-integration/public/app.js b/advanced-integration/public/app.js
@@ -1,3 +1,42 @@
+paypal
+  .Buttons({
+    // Sets up the transaction when a payment button is clicked
+    createOrder: function (data, actions) {
+      return fetch("/api/orders", {
+        method: "post",
+        // use the "body" param to optionally pass additional order information
+        // like product ids or amount
+      })
+        .then((response) => response.json())
+        .then((order) => order.id);
+    },
+    // Finalize the transaction after payer approval
+    onApprove: function (data, actions) {
+      return fetch(`/api/orders/${data.orderID}/capture`, {
+        method: "post",
+      })
+        .then((response) => response.json())
+        .then((orderData) => {
+          // Successful capture! For dev/demo purposes:
+          console.log(
+            "Capture result",
+            orderData,
+            JSON.stringify(orderData, null, 2)
+          );
+          var transaction = orderData.purchase_units[0].payments.captures[0];
+          alert(`Transaction ${transaction.status}: ${transaction.id}
+
+            See console for all available details
+          `);
+          // When ready to go live, remove the alert and show a success message within this page. For example:
+          // var element = document.getElementById('paypal-button-container');
+          // element.innerHTML = '<h3>Thank you for your payment!</h3>';
+          // Or go to another URL:  actions.redirect('thank_you.html');
+        });
+    },
+  })
+  .render("#paypal-button-container");
+
 // If this returns false or the card fields aren't visible, see Step #1.
 if (paypal.HostedFields.isEligible()) {
   let orderId;

diff --git a/advanced-integration/views/checkout.ejs b/advanced-integration/views/checkout.ejs
@@ -13,6 +13,7 @@
     ></script>
   </head>
   <body>
+    <div id="paypal-button-container" class="paypal-button-container"></div>
     <div class="card_container">
       <form id="card-form">
         <label for="card-number">Card Number</label>