Merge pull request #1 from amsourav/feature/add-html-message-for-card-fields

feat: add component show to show transaction message

Author: rekhaabaidipati

advanced-integration/v2/client/react/client/App.jsx

@@ -9,6 +9,7 @@ import {
 
 export default function App() {
   const [isPaying, setIsPaying] = useState(false);
+  const [message, setMessage] = useState("");
   const initialOptions = {
     "client-id": import.meta.env.PAYPAL_CLIENT_ID,
     "enable-funding": "venmo",
@@ -126,7 +127,7 @@ export default function App() {
       <PayPalScriptProvider options={initialOptions}>
         <PayPalButtons
           createOrder={createOrder}
-          onApprove={onApprove}
+          onApprove={async (data) => setMessage(await onApprove(data))}
           onError={onError}
           style={{
             shape: "rect",
@@ -138,7 +139,7 @@ export default function App() {
 
         <PayPalCardFieldsProvider
           createOrder={createOrder}
-          onApprove={onApprove}
+          onApprove={async (data) => setMessage(await onApprove(data))}
         >
           <PayPalCardFieldsForm />
           <input
@@ -203,6 +204,7 @@ export default function App() {
           />
         </PayPalCardFieldsProvider>
       </PayPalScriptProvider>
+      <Message content={message} />
     </div>
   );
 }
@@ -224,7 +226,7 @@ const SubmitPayment = ({ isPaying, setIsPaying, billingAddress }) => {
     }
     setIsPaying(true);
 
-    cardFieldsForm.submit({ billingAddress }).catch((err) => {
+    cardFieldsForm.submit({ billingAddress }).finally((err) => {
       setIsPaying(false);
     });
   };
@@ -238,3 +240,7 @@ const SubmitPayment = ({ isPaying, setIsPaying, billingAddress }) => {
     </button>
   );
 };
+
+const Message = ({ content }) => {
+  return <p>{content}</p>;
+};

standard-integration/client/html/client/app.js

@@ -42,7 +42,7 @@ window.paypal
         throw new Error(errorMessage);
       } catch (error) {
         console.error(error);
-        // resultMessage(`Could not initiate PayPal Checkout...<br><br>${error}`);
+        resultMessage(`Could not initiate PayPal Checkout...<br><br>${error}`);
       }
     },
 
@@ -98,3 +98,9 @@ window.paypal
     },
   })
   .render("#paypal-button-container");
+
+// Example function to show a result to the user. Your site's UI library can be used instead.
+function resultMessage(message) {
+  const container = document.querySelector("#result-message");
+  container.innerHTML = message;
+}