feat: CheckoutWidget component

Author: gregfromstl

apps/playground-web/src/app/connect/pay/commerce/page.tsx

@@ -46,29 +46,22 @@ function BuyMerch() {
         ),
       }}
       preview={<BuyMerchPreview />}
-      code={`import { PayEmbed, getDefaultToken } from "thirdweb/react";
+      code={`import { CheckoutWidget, getDefaultToken } from "thirdweb/react";
           import { base } from "thirdweb/chains";
 
         function App() {
           return (
-            <PayEmbed
-              client={client}
-              theme={"light"}
-              payOptions={{
-                mode: "direct_payment",
-                paymentInfo: {
-                  amount: "35",
-                  chain: base,
-                  token: getDefaultToken(base, "USDC"),
-                  sellerAddress: "0xEb0effdFB4dC5b3d5d3aC6ce29F3ED213E95d675",
-                },
-                metadata: {
-                  name: "Black Hoodie",
-                  description: "Size L. Ships worldwide.",
-                  image: "/drip-hoodie.png",
-                },
-              }}
-            />
+      <CheckoutWidget
+        client={THIRDWEB_CLIENT}
+        theme="light"
+        chain={base}
+        amount={toUnits("2", 6)}
+        tokenAddress="0x833589fCD6eDb6E08f4c7C32D4f71b54bdA02913"
+        seller="0xEb0effdFB4dC5b3d5d3aC6ce29F3ED213E95d675"
+        feePayer="seller"
+        name="Black Hoodie"
+        description="Size L. Ships worldwide."
+      />
           );
         };`}
       lang="tsx"

apps/playground-web/src/components/pay/direct-payment.tsx

@@ -1,29 +1,22 @@
 "use client";
-import { base } from "thirdweb/chains";
-import { PayEmbed, getDefaultToken } from "thirdweb/react";
+import { CheckoutWidget } from "thirdweb/react";
 import { THIRDWEB_CLIENT } from "../../lib/client";
+import { toUnits } from "thirdweb";
+import { base } from "thirdweb/chains";
 
 export function BuyMerchPreview() {
   return (
     <>
-      <PayEmbed
+      <CheckoutWidget
         client={THIRDWEB_CLIENT}
         theme="light"
-        payOptions={{
-          mode: "direct_payment",
-          paymentInfo: {
-            amount: "2",
-            chain: base,
-            token: getDefaultToken(base, "USDC"),
-            sellerAddress: "0xEb0effdFB4dC5b3d5d3aC6ce29F3ED213E95d675",
-            feePayer: "receiver",
-          },
-          metadata: {
-            name: "Black Hoodie (Size L)",
-            description: "Size L. Ships worldwide.",
-            image: "/drip-hoodie.png",
-          },
-        }}
+        chain={base}
+        amount={toUnits("2", 6)}
+        tokenAddress="0x833589fCD6eDb6E08f4c7C32D4f71b54bdA02913"
+        seller="0xEb0effdFB4dC5b3d5d3aC6ce29F3ED213E95d675"
+        feePayer="seller"
+        name="Black Hoodie"
+        description="Size L. Ships worldwide."
       />
     </>
   );

packages/thirdweb/src/exports/react.ts

@@ -134,6 +134,10 @@ export {
   BuyWidget,
   type BuyWidgetProps,
 } from "../react/web/ui/Bridge/BuyWidget.js";
+export {
+  CheckoutWidget,
+  type CheckoutWidgetProps,
+} from "../react/web/ui/Bridge/CheckoutWidget.js";
 export {
   PayEmbed,
   type PayEmbedProps,