paypal-examples · nbierdeman · Jun 13, 2025 · Jun 16, 2025 · Jun 16, 2025 · Jun 16, 2025
@@ -8,7 +8,7 @@
     "preview": "vite preview",
     "start": "vite",
     "format": "prettier . --write",
-    "format:check": "prettier . --check",
+    "format:check": "prettier . --check --log-level debug",
     "lint": "echo \"eslint is not set up\""
   },
   "license": "Apache-2.0",

@@ -0,0 +1,134 @@
+async function onPayPalLoaded() {
+  try {
+    const clientToken = await getBrowserSafeClientToken();
+    const sdkInstance = await window.paypal.createInstance({
+      clientToken,
+      components: ["paypal-payments"],
+      pageType: "checkout",
+    });
+
+    setupPayPalButton(sdkInstance);
+  } catch (error) {
+    console.error(error);
+  }
+}
+
+const paymentSessionOptions = {
+  async onApprove(data) {
+    console.log("onApprove", data);
+    const orderData = await captureOrder({
+      orderId: data.orderId,
+    });
+    console.log("Capture result", orderData);
+  },
+  onCancel(data) {
+    console.log("onCancel", data);
+  },
+  onError(error) {
+    console.log("onError", error);
+  },
+};
+
+async function setupPayPalButton(sdkInstance) {
+  const paypalPaymentSession = sdkInstance.createPayPalOneTimePaymentSession(
+    paymentSessionOptions,
+  );
+
+  const enableAutoRedirect = document.querySelector("#enable-auto-redirect");
+  const paypalButton = document.querySelector("#paypal-button");
+  paypalButton.removeAttribute("hidden");
+
+  paypalButton.addEventListener("click", async () => {
+    const createOrderPromiseReference = createRedirectOrder();
+
+    try {
+      const { redirectURL } = await paypalPaymentSession.start(
+        {
+          presentationMode: "redirect",
+          autoRedirect: {
+            enabled: enableAutoRedirect.checked,
+          },
+        },
+        createOrderPromiseReference,
+      );
+      if (redirectURL) {
+        console.log(`redirectURL: ${redirectURL}`);
+        window.location.assign(redirectURL);
+      }
+    } catch (error) {
+      console.error(error);
+    }
+  });
+}
+
+async function getBrowserSafeClientToken() {
+  const response = await fetch("/paypal-api/auth/browser-safe-client-token", {
+    method: "GET",
+    headers: {
+      "Content-Type": "application/json",
+    },
+  });
+  const { accessToken } = await response.json();
+
+  return accessToken;
+}
+
+async function createRedirectOrder() {
+  const returnUrl = new URL(window.location);
+  returnUrl.searchParams.set("flowState", "approve");
+
+  const cancelUrl = new URL(window.location);
+  cancelUrl.searchParams.set("flowState", "cancel");
+
+  const orderPayload = {
+    intent: "CAPTURE",
+    paymentSource: {
+      paypal: {
+        experienceContext: {
+          shippingPreference: "NO_SHIPPING",
+          userAction: "CONTINUE",
+          returnUrl,
+          cancelUrl,
+        },
+      },
+    },
+    purchaseUnits: [
+      {
+        amount: {
+          currencyCode: "USD",
+          value: "10.00",
+          breakdown: {
+            itemTotal: {
+              currencyCode: "USD",
+              value: "10.00",
+            },
+          },
+        },
+      },
+    ],
+  };
+
+  const response = await fetch("/paypal-api/checkout/orders/create", {
+    method: "POST",
+    headers: {
+      "Content-Type": "application/json",
+    },
+    body: JSON.stringify(orderPayload),
+  });
+  const { id } = await response.json();
+  return { orderId: id };
+}
+
+async function captureOrder({ orderId }) {
+  const response = await fetch(
+    `/paypal-api/checkout/orders/${orderId}/capture`,
+    {
+      method: "POST",
+      headers: {
+        "Content-Type": "application/json",
+      },
+    },
+  );
+  const data = await response.json();
+  return data;
+}
@@ -0,0 +1,25 @@
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <title>One-Time Payment - Redirect Flow - PayPal Web SDK</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+  </head>
+
+  <body>
+    <h1>Paypal Redirect Flow</h1>
+    <div>
+      <input type="checkbox" id="enable-auto-redirect" checked />
+      <label for="enable-auto-redirect"> Enable auto-redirect </label>
+    </div>
+    <div id="button-container">
+      <paypal-button id="paypal-button" hidden></paypal-button>
+    </div>
+
+    <script src="app.js"></script>
+    <script
+      async
+      onload="onPayPalLoaded()"
+      src="https://www.sandbox.paypal.com/web-sdk/v6/core"
+    ></script>
+  </body>
+</html>
@@ -20,6 +20,11 @@ <h1>One-Time Payment Integrations</h1>
           >Custom "payment-handler" presentation mode with PayPal button</a
         >
       </li>
+      <li>
+        <a href="/custom/redirect/index.html"
+          >Custom Redirect flow with PayPal button</a
+        >
+      </li>
     </ul>
   </body>
 </html>