Release braintree-web 3.137.0 source

Author: braintreeps

.github/workflows/security.dependency-review.yml

@@ -2,7 +2,7 @@ name: Security
 
 on:
   pull_request:
-    branches: [master]
+    branches: [master, v3.x]
   workflow_dispatch:
 
 jobs:

.gitignore

@@ -23,3 +23,8 @@ browserstack.err
 local.log
 logs/
 .storybook/certs/
+
+# Playwright
+test-results/
+playwright-report/
+playwright/.cache/

.storybook/constants.ts

@@ -61,3 +61,32 @@ export const PAYPAL_SELECTORS = {
   CANCEL_LINK: "#cancelLink",
   ALT_CANCEL_LINK: "a*=Cancel",
 };
+
+export const browsers = [
+  {
+    browserName: "chrome",
+    osName: "Windows",
+    osVersion: "10",
+    browserVersion: "latest",
+  },
+  {
+    browserName: "Edge",
+    osName: "Windows",
+    osVersion: "10",
+    browserVersion: "latest",
+  },
+  {
+    browserName: "Safari",
+    playwrightName: "playwright-webkit",
+    osName: "OS X",
+    osVersion: "Tahoe",
+    browserVersion: "latest",
+  },
+  {
+    browserName: "firefox",
+    playwrightName: "playwright-firefox",
+    osName: "Windows",
+    osVersion: "10",
+    browserVersion: "latest",
+  },
+];

.storybook/scripts/browserstack/browserstack-local.ts

@@ -0,0 +1,71 @@
+/* eslint-disable no-console */
+import browserstack from "browserstack-local";
+import uuid from "@braintree/uuid";
+
+// Generate a consistent local identifier, or use environment variable if set
+const localIdentifier =
+  process.env.BROWSERSTACK_LOCAL_IDENTIFIER || (uuid() as string);
+let bsLocal: browserstack.Local | null = null;
+let isConnected = false;
+
+export function startBrowserStackLocal(): Promise<void> {
+  return new Promise((resolve, reject) => {
+    if (isConnected) {
+      console.log("BrowserStack Local already connected");
+      resolve();
+      return;
+    }
+
+    bsLocal = new browserstack.Local();
+
+    const bsLocalArgs = {
+      key: process.env.BROWSERSTACK_ACCESS_KEY ?? "",
+      localIdentifier,
+      verbose: true,
+      forcelocal: true,
+      force: true,
+    };
+    bsLocal.start(bsLocalArgs, (error) => {
+      if (error) {
+        console.error("Error starting BrowserStack Local:", error);
+        reject(error);
+        return;
+      }
+
+      // Verify the connection is actually running
+      if (bsLocal && bsLocal.isRunning()) {
+        isConnected = true;
+        console.log(
+          `BrowserStack Local connected with localIdentifier=${localIdentifier}`
+        );
+        resolve();
+      } else {
+        console.error("BrowserStack Local started but is not running");
+        reject(new Error("BrowserStack Local is not running"));
+      }
+    });
+  });
+}
+
+export function stopBrowserStackLocal(): Promise<void> {
+  return new Promise((resolve) => {
+    if (bsLocal && isConnected) {
+      console.log("Stopping BrowserStack Local...");
+      bsLocal.stop(() => {
+        console.log("BrowserStack Local stopped");
+        isConnected = false;
+        resolve();
+      });
+    } else {
+      resolve();
+    }
+  });
+}
+
+export function getLocalIdentifier(): string {
+  return localIdentifier;
+}
+
+export function isLocalConnected(): boolean {
+  return isConnected;
+}

.storybook/scripts/browserstack/global-setup.ts

@@ -0,0 +1,25 @@
+/* eslint-disable no-console */
+import {
+  startBrowserStackLocal,
+  getLocalIdentifier,
+  isLocalConnected,
+} from "./browserstack-local";
+
+module.exports = async () => {
+  if (
+    process.env.BROWSERSTACK_USERNAME &&
+    process.env.BROWSERSTACK_ACCESS_KEY
+  ) {
+    const localId = getLocalIdentifier();
+    process.env.BROWSERSTACK_LOCAL_IDENTIFIER = localId;
+
+    await startBrowserStackLocal();
+
+    if (!isLocalConnected()) {
+      console.error("✗ BrowserStack Local failed to connect properly");
+      throw new Error("BrowserStack Local is not connected");
+    }
+  } else {
+    console.log("Skipping BrowserStack Local - credentials not set");
+  }
+};

.storybook/scripts/browserstack/global-teardown.ts

@@ -0,0 +1,5 @@
+import { stopBrowserStackLocal } from "./browserstack-local";
+
+module.exports = async () => {
+  await stopBrowserStackLocal();
+};

.storybook/stories/LocalPaymentMethods/LocalPayments.stories.ts

@@ -26,7 +26,8 @@ export default meta;
 
 const createLocalPaymentForm = (
   title: string,
-  description: string
+  description: string,
+  paymentType: string
 ): HTMLElement => {
   const container = document.createElement("div");
   container.innerHTML = `
@@ -39,6 +40,9 @@ const createLocalPaymentForm = (
         </p>
       </div>
 
+      ${
+        paymentType !== "crypto"
+          ? `
       <div class="local-payment-form-section">
         <div class="shared-form-group">
           <label class="shared-label">Amount</label>
@@ -61,6 +65,10 @@ const createLocalPaymentForm = (
             <option value="IT">Italy (IT)</option>
           </select>
         </div>
+      `
+          : ""
+      }
+
       </div>
 
       <button type="button" id="payment-button" class="shared-button" disabled>Initializing...</button>
@@ -147,33 +155,40 @@ const initializeLocalPayments = (
       | Record<string, string>
       | boolean
       | ((_data: unknown, _start: () => void) => void)
-    > = {
-      paymentType: paymentType.toLowerCase(),
-      amount: amountInput.value,
-      currencyCode: currencySelect.value,
-      address: {
+    > = {};
+
+    if (paymentType !== "crypto") {
+      paymentOptions.paymentType = paymentType.toLowerCase();
+      paymentOptions.amount = amountInput.value;
+      paymentOptions.currencyCode = currencySelect.value;
+      paymentOptions.address = {
         countryCode: countrySelect.value,
-      },
-      givenName: "John",
-      surname: "Doe",
-      fallback: {
+      };
+      paymentOptions.givenName = "John";
+      paymentOptions.surname = "Doe";
+      paymentOptions.fallback = {
         url: "https://your-domain.com/page-to-complete-checkout",
         buttonText: "Complete Payment",
-      },
-      onPaymentStart: function (_data, start) {
+      };
+      paymentOptions.onPaymentStart = function (_data, start) {
         // NOTE: It is critical here to store data.paymentId on your server
         //       so it can be mapped to a webhook sent by Braintree once the
         //       buyer completes their payment. See Start the payment
         //       section for details.
 
         // Call start to initiate the popup
         start();
-      },
-    };
+      };
+    }
 
     // Add payment type specific options
     if (paymentType === "iDEAL") {
       paymentOptions.paymentType = "ideal";
+    } else if (paymentType === "crypto") {
+      paymentOptions.paymentType = "crypto";
+      paymentOptions.cryptoOptions = {
+        approvalUrl: "https://example.com/crypto-approval",
+      };
     } else if (paymentType === "Pay Upon Invoice") {
       paymentOptions.paymentType = "payuponinvoice";
       paymentOptions.shippingAddressRequired = true;
@@ -187,18 +202,24 @@ const initializeLocalPayments = (
       paymentOptions.countryCode = "DE";
     }
 
-    localPaymentInstance
-      .startPayment(paymentOptions)
-      .then(function (payload) {
-        // Submit payload.nonce to your server
-        console.log("nonce", payload.nonce);
-        paymentButton.disabled = false;
-        paymentButton.textContent = `Pay with ${paymentType}`;
-        showSuccess(resultDiv, payload);
-      })
-      .catch((error) => {
+    if (paymentType !== "crypto") {
+      localPaymentInstance
+        .startPayment(paymentOptions)
+        .then(function (payload) {
+          // Submit payload.nonce to your server
+          console.log("nonce", payload.nonce);
+          paymentButton.disabled = false;
+          paymentButton.textContent = `Pay with ${paymentType}`;
+          showSuccess(resultDiv, payload);
+        })
+        .catch((error) => {
+          console.error(error);
+        });
+    } else {
+      localPaymentInstance.startPayment(paymentOptions).catch((error) => {
         console.error(error);
       });
+    }
   });
 };
 
@@ -207,7 +228,8 @@ export const iDEAL: StoryObj = {
     (container) => {
       const formContainer = createLocalPaymentForm(
         "iDEAL Local Payment",
-        "iDEAL is a popular payment method in the Netherlands. Select your bank and complete the payment."
+        "iDEAL is a popular payment method in the Netherlands. Select your bank and complete the payment.",
+        "ideal"
       );
       container.appendChild(formContainer);
       initializeLocalPayments(formContainer, "iDEAL");
@@ -219,3 +241,22 @@ export const iDEAL: StoryObj = {
     debugMode: false,
   },
 };
+
+export const payWithCrypto: StoryObj = {
+  render: createSimpleBraintreeStory(
+    (container) => {
+      const formContainer = createLocalPaymentForm(
+        "Pay with Crypto Local Payment",
+        "Pay with Crypto is a payment solution that allows you to accept cryptocurrency (crypto) payments from global buyers and receive automatic settlement in local currency.",
+        "crypto"
+      );
+      container.appendChild(formContainer);
+      initializeLocalPayments(formContainer, "crypto");
+    },
+    ["client.min.js", "local-payment.min.js"]
+  ),
+  args: {
+    // Example args that could be used to customize the payment flow
+    debugMode: false,
+  },
+};