Merge pull request #847 from paypal/feat/storybook-v6-use-clientid

refactor storybook to use clientId

Author: HackTheW2d

.github/workflows/build-and-deploy-docs.yml

@@ -53,6 +53,8 @@ jobs:
 
             - name: Build v6 react storybook
               run: npm run build-storybook:v6
+              env:
+                  STORYBOOK_PAYPAL_SANDBOX_CLIENT_ID: ${{ secrets.STORYBOOK_PAYPAL_SANDBOX_CLIENT_ID }}
 
             - name: Setup Pages
               uses: actions/configure-pages@v5

.gitignore

@@ -14,3 +14,4 @@ node_modules
 *.tgz
 
 .vscode
+.env

packages/react-paypal-js-storybook/v6/src/decorators/PayPalProviderDecorator.tsx

@@ -1,4 +1,4 @@
-import React, { useState, useEffect } from "react";
+import React, { useEffect } from "react";
 import type { Decorator } from "@storybook/react";
 import { action } from "storybook/actions";
 
@@ -8,63 +8,7 @@ import {
     useEligibleMethods,
     INSTANCE_LOADING_STATE,
 } from "@paypal/react-paypal-js/sdk-v6";
-import { SAMPLE_INTEGRATION_API } from "../shared/utils";
-
-async function fetchClientToken(): Promise<string> {
-    const response = await fetch(
-        `${SAMPLE_INTEGRATION_API}/paypal-api/auth/browser-safe-client-token`,
-    );
-
-    if (!response.ok) {
-        throw new Error(`Failed to fetch client token: ${response.status}`);
-    }
-
-    const data = await response.json();
-    return data.accessToken;
-}
-
-function LoadingSpinner() {
-    return (
-        <div style={{ padding: "40px", textAlign: "center", color: "#0070ba" }}>
-            <div
-                style={{
-                    display: "inline-block",
-                    width: "32px",
-                    height: "32px",
-                    border: "3px solid rgba(0, 112, 186, 0.2)",
-                    borderTopColor: "#0070ba",
-                    borderRadius: "50%",
-                    animation: "v6-spin 0.8s linear infinite",
-                }}
-            />
-            <p style={{ marginTop: "12px", fontSize: "14px" }}>
-                Loading PayPal SDK...
-            </p>
-            <style>{`@keyframes v6-spin { to { transform: rotate(360deg); } }`}</style>
-        </div>
-    );
-}
-
-function ErrorDisplay({ message }: { message: string }) {
-    return (
-        <div
-            style={{
-                padding: "20px",
-                backgroundColor: "#fef3cd",
-                border: "1px solid #ffc107",
-                borderRadius: "4px",
-                color: "#856404",
-            }}
-        >
-            <strong>Failed to load PayPal SDK</strong>
-            <p style={{ margin: "8px 0", fontSize: "14px" }}>{message}</p>
-            <p style={{ margin: 0, fontSize: "12px", color: "#666" }}>
-                Ensure the sample integration server is running at{" "}
-                {SAMPLE_INTEGRATION_API}
-            </p>
-        </div>
-    );
-}
+import { PAYPAL_CLIENT_ID } from "../shared/utils";
 
 // Logs SDK and button events to the Actions panel.
 function SdkStatusMonitor({ children }: { children: React.ReactNode }) {
@@ -96,24 +40,9 @@ function SdkStatusMonitor({ children }: { children: React.ReactNode }) {
 }
 
 function ProviderWrapper({ children }: { children: React.ReactNode }) {
-    const [clientToken, setClientToken] = useState<string>();
-    const [error, setError] = useState<Error>();
-
-    useEffect(() => {
-        fetchClientToken().then(setClientToken).catch(setError);
-    }, []);
-
-    if (error) {
-        return <ErrorDisplay message={error.message} />;
-    }
-
-    if (!clientToken) {
-        return <LoadingSpinner />;
-    }
-
     return (
         <PayPalProvider
-            clientToken={clientToken}
+            clientId={PAYPAL_CLIENT_ID}
             components={[
                 "paypal-payments",
                 "venmo-payments",

packages/react-paypal-js-storybook/v6/src/shared/code.ts

@@ -28,7 +28,7 @@ async function onApprove(data) {
 export default function App() {
     return (
         <PayPalProvider
-            clientToken="YOUR_CLIENT_TOKEN"
+            clientId="YOUR_CLIENT_ID"
             components={["paypal-payments"]}
             pageType="checkout"
         >
@@ -60,7 +60,7 @@ async function createOrder() {
 export default function App() {
     return (
         <PayPalProvider
-            clientToken="YOUR_CLIENT_TOKEN"
+            clientId="YOUR_CLIENT_ID"
             components={["venmo-payments"]}
             pageType="checkout"
         >
@@ -92,7 +92,7 @@ async function createVaultToken() {
 export default function App() {
     return (
         <PayPalProvider
-            clientToken="YOUR_CLIENT_TOKEN"
+            clientId="YOUR_CLIENT_ID"
             components={["paypal-payments"]}
             pageType="checkout"
         >
@@ -147,7 +147,7 @@ function Checkout() {
 export default function App() {
     return (
         <PayPalProvider
-            clientToken="YOUR_CLIENT_TOKEN"
+            clientId="YOUR_CLIENT_ID"
             components={["paypal-payments"]}
             pageType="checkout"
         >
@@ -171,7 +171,7 @@ async function createOrder() {
 export default function App() {
     return (
         <PayPalProvider
-            clientToken="YOUR_CLIENT_TOKEN"
+            clientId="YOUR_CLIENT_ID"
             components={["paypal-guest-payments"]}
             pageType="checkout"
         >

packages/react-paypal-js-storybook/v6/src/shared/utils.ts

@@ -21,6 +21,9 @@ export const SAMPLE_INTEGRATION_API =
     import.meta.env.STORYBOOK_PAYPAL_API_URL ||
     "https://v6-web-sdk-sample-integration-server.fly.dev";
 
+export const PAYPAL_CLIENT_ID =
+    import.meta.env.STORYBOOK_PAYPAL_SANDBOX_CLIENT_ID || "";
+
 // One-Time Payment APIs
 
 export async function createOrder(): Promise<{ orderId: string }> {