Add optional button label customization to payment components

Co-authored-by: joaquim.verges <joaquim.verges@gmail.com>

Author: cursoragent

apps/playground-web/src/app/payments/components/CodeGen.tsx

@@ -71,7 +71,7 @@ function Example() {
     <${componentName}
       client={client}
       chain={defineChain(${options.payOptions.buyTokenChain.id})}
-      amount="${options.payOptions.buyTokenAmount}"${options.payOptions.buyTokenAddress ? `\n\t  tokenAddress="${options.payOptions.buyTokenAddress}"` : ""}${options.payOptions.sellerAddress ? `\n\t  seller="${options.payOptions.sellerAddress}"` : ""}${options.payOptions.title ? `\n\t  ${options.payOptions.widget === "checkout" ? "name" : "title"}="${options.payOptions.title}"` : ""}${options.payOptions.image ? `\n\t  image="${options.payOptions.image}"` : ""}${options.payOptions.description ? `\n\t  description="${options.payOptions.description}"` : ""}${options.payOptions.paymentMethods && options.payOptions.paymentMethods.length > 0 ? `\n\t  paymentMethods={${JSON.stringify(options.payOptions.paymentMethods)}}` : ""}${options.payOptions.currency ? `\n\t  currency="${options.payOptions.currency}"` : ""}${
+      amount="${options.payOptions.buyTokenAmount}"${options.payOptions.buyTokenAddress ? `\n\t  tokenAddress="${options.payOptions.buyTokenAddress}"` : ""}${options.payOptions.sellerAddress ? `\n\t  seller="${options.payOptions.sellerAddress}"` : ""}${options.payOptions.title ? `\n\t  ${options.payOptions.widget === "checkout" ? "name" : "title"}="${options.payOptions.title}"` : ""}${options.payOptions.image ? `\n\t  image="${options.payOptions.image}"` : ""}${options.payOptions.description ? `\n\t  description="${options.payOptions.description}"` : ""}${options.payOptions.buttonLabel ? `\n\t  buttonLabel="${options.payOptions.buttonLabel}"` : ""}${options.payOptions.paymentMethods && options.payOptions.paymentMethods.length > 0 ? `\n\t  paymentMethods={${JSON.stringify(options.payOptions.paymentMethods)}}` : ""}${options.payOptions.currency ? `\n\t  currency="${options.payOptions.currency}"` : ""}${
         options.payOptions.widget === "transaction"
           ? `\n\t  transaction={claimTo({
         contract: nftContract,

apps/playground-web/src/app/payments/components/types.ts

@@ -41,6 +41,7 @@ export type BridgeComponentsPlaygroundOptions = {
     title: string | undefined;
     image: string | undefined;
     description: string | undefined;
+    buttonLabel: string | undefined;
 
     buyTokenAddress?: Address;
     buyTokenAmount: string;

apps/playground-web/src/app/payments/embed/LeftSection.tsx

@@ -73,6 +73,7 @@ export function LeftSection(props: {
   const modalTitleId = useId();
   const modalTitleIconId = useId();
   const modalDescriptionId = useId();
+  const buttonLabelId = useId();
   const themeId = useId();
   const cryptoPaymentId = useId();
   const cardPaymentId = useId();
@@ -486,6 +487,26 @@ export function LeftSection(props: {
               value={options.payOptions.description}
             />
           </div>
+
+          {/* Button Label */}
+          <div className="flex flex-col gap-2">
+            <Label htmlFor={buttonLabelId}>Button Label</Label>
+            <Input
+              className="bg-card"
+              id={buttonLabelId}
+              onChange={(e) =>
+                setOptions((v) => ({
+                  ...v,
+                  payOptions: {
+                    ...payOptions,
+                    buttonLabel: e.target.value,
+                  },
+                }))
+              }
+              placeholder="Custom button text (optional)"
+              value={options.payOptions.buttonLabel}
+            />
+          </div>
         </div>
       </CollapsibleSection>
 

apps/playground-web/src/app/payments/embed/RightSection.tsx

@@ -66,6 +66,7 @@ export function RightSection(props: {
         tokenAddress={props.options.payOptions.buyTokenAddress}
         currency={props.options.payOptions.currency}
         showThirdwebBranding={props.options.payOptions.showThirdwebBranding}
+        {...(props.options.payOptions.buttonLabel && { buttonLabel: props.options.payOptions.buttonLabel })}
       />
     );
   }
@@ -91,6 +92,7 @@ export function RightSection(props: {
         tokenAddress={props.options.payOptions.buyTokenAddress}
         currency={props.options.payOptions.currency}
         showThirdwebBranding={props.options.payOptions.showThirdwebBranding}
+        {...(props.options.payOptions.buttonLabel && { buttonLabel: props.options.payOptions.buttonLabel })}
       />
     );
   }
@@ -112,6 +114,7 @@ export function RightSection(props: {
         })}
         currency={props.options.payOptions.currency}
         showThirdwebBranding={props.options.payOptions.showThirdwebBranding}
+        {...(props.options.payOptions.buttonLabel && { buttonLabel: props.options.payOptions.buttonLabel })}
       />
     );
   }

apps/playground-web/src/app/payments/embed/page.tsx

@@ -13,6 +13,7 @@ const defaultConnectOptions: BridgeComponentsPlaygroundOptions = {
     buyTokenChain: arbitrum,
     description: "",
     image: "",
+    buttonLabel: "",
     paymentMethods: ["crypto", "card"],
     sellerAddress: "0x0000000000000000000000000000000000000000",
     title: "",