From aa48dddea4ba86e8ef7a1db7a9eb1214ec4b11c0 Mon Sep 17 00:00:00 2001
From: Greg Jopa <534034+gregjopa@users.noreply.github.com>
Date: Thu, 17 Aug 2023 10:38:44 -0500
Subject: [PATCH] Use a separate container for the result message

---
 standard-integration/index.html | 13 ++++++-------
 1 file changed, 6 insertions(+), 7 deletions(-)
diff --git a/standard-integration/index.html b/standard-integration/index.html
index a8baf73f..d22c1d1f 100644
--- a/standard-integration/index.html
+++ b/standard-integration/index.html
@@ -7,12 +7,13 @@
   </head>
   <body>
     <div id="paypal-button-container"></div>
+    <p id="result-message"></p>
     <!-- Replace the "test" client-id value with your client-id -->
     <script src="https://www.paypal.com/sdk/js?client-id=test&currency=USD"></script>
     <script>
       paypal
         .Buttons({
-          createOrder: async (data) => {
+          createOrder: async () => {
             try {
               const response = await fetch('/api/orders', {
                 method: 'POST',
@@ -88,7 +89,7 @@
                 const transaction =
                   orderData.purchase_units[0].payments.captures[0];
                 resultMessage(
-                  `<h3>Transaction ${transaction.status}: ${transaction.id}<br><br>See console for all available details</h3>`,
+                  `Transaction ${transaction.status}: ${transaction.id}<br><br>See console for all available details`,
                 );
                 console.log(
                   'Capture result',
@@ -107,12 +108,10 @@
         .render('#paypal-button-container');
 
       // Example function to show a result to the user. Your site's UI library can be used instead,
-      // however alert() should not be used as it will interrupt the JS SDK window
+      // however alert() should not be used as it will interrupt the JS SDK popup window
       function resultMessage(message) {
-        const container = document.getElementById('paypal-button-container');
-        const p = document.createElement('p');
-        p.innerHTML = message;
-        container.parentNode.appendChild(p);
+        const container = document.getElementById('result-message');
+        container.innerHTML = message;
       }
     </script>
   </body>
