feat: add PayPal Credit button example (#45)

Author: dtjones404

client/oneTimePayment/html/src/index.html

@@ -11,7 +11,8 @@ <h1>One-Time Payment Integrations</h1>
     <ul>
       <li>
         <a href="/recommended/index.html"
-          >Recommended integration with PayPal, Venmo, and PayLater buttons</a
+          >Recommended integration with PayPal, Venmo, PayLater, and PayPal
+          Credit buttons</a
         >
       </li>
       <li>

client/oneTimePayment/html/src/recommended/app.js

@@ -24,6 +24,12 @@ async function onPayPalLoaded() {
         paymentMethods.getDetails("paylater");
       setupPayLaterButton(sdkInstance, paylaterPaymentMethodDetails);
     }
+
+    if (paymentMethods.isEligible("credit")) {
+      const paypalCreditPaymentMethodDetails =
+        paymentMethods.getDetails("credit");
+      setupPayPalCreditButton(sdkInstance, paypalCreditPaymentMethodDetails);
+    }
   } catch (error) {
     console.error(error);
   }
@@ -107,6 +113,31 @@ async function setupPayLaterButton(sdkInstance, paylaterPaymentMethodDetails) {
   });
 }
 
+async function setupPayPalCreditButton(
+  sdkInstance,
+  paypalCreditPaymentMethodDetails,
+) {
+  const paypalCreditPaymentSession =
+    sdkInstance.createPayPalCreditOneTimePaymentSession(paymentSessionOptions);
+
+  const { countryCode } = paypalCreditPaymentMethodDetails;
+  const paypalCreditButton = document.querySelector("#paypal-credit-button");
+
+  paypalCreditButton.countryCode = countryCode;
+  paypalCreditButton.removeAttribute("hidden");
+
+  paypalCreditButton.addEventListener("click", async () => {
+    try {
+      await paypalCreditPaymentSession.start(
+        { presentationMode: "auto" },
+        createOrder(),
+      );
+    } catch (error) {
+      console.error(error);
+    }
+  });
+}
+
 async function getBrowserSafeClientToken() {
   const response = await fetch("/paypal-api/auth/browser-safe-client-token", {
     method: "GET",

client/oneTimePayment/html/src/recommended/index.html

@@ -22,6 +22,10 @@ <h1>One-Time Payment Recommended Integration</h1>
         id="paylater-button"
         hidden
       ></paypal-pay-later-button>
+      <paypal-credit-button
+        id="paypal-credit-button"
+        hidden
+      ></paypal-credit-button>
     </div>
     <script src="app.js"></script>