patches after testing

Author: eabdelmoneim

README.md

@@ -196,8 +196,13 @@ After verifying the CheckoutWidget works standalone, test the full plugin integr
 
 3. **Link the plugin** to your WordPress installation:
 
+   **Important**: Run these commands from the plugin root directory (where `thirdweb-woocommerce-checkout.php` is located).
+
    **Option A: Symlink (recommended for development)**
    ```bash
+   # Make sure you're in the plugin directory first
+   cd /path/to/woocommerce-thirdweb-checkout
+
    # LocalWP example:
    ln -s $(pwd) ~/Local\ Sites/YOUR_SITE/app/public/wp-content/plugins/thirdweb-woocommerce-checkout
 
@@ -207,7 +212,8 @@ After verifying the CheckoutWidget works standalone, test the full plugin integr
 
    **Option B: Copy files**
    ```bash
-   cp -r $(pwd) ~/Local\ Sites/YOUR_SITE/app/public/wp-content/plugins/thirdweb-woocommerce-checkout
+   # From the plugin directory:
+   cp -r . ~/Local\ Sites/YOUR_SITE/app/public/wp-content/plugins/thirdweb-woocommerce-checkout
    ```
 
 4. **Activate the plugin**:

assets/icon.svg

@@ -1,26 +1,19 @@
 <?php
 /**
  * WooCommerce Blocks Support for thirdweb Payment Gateway
- * 
- * This enables the payment method to work with the new 
+ *
+ * This enables the payment method to work with the new
  * React-based WooCommerce Checkout Blocks
  */
 
 defined('ABSPATH') || exit;
 
 use Automattic\WooCommerce\Blocks\Payments\Integrations\AbstractPaymentMethodType;
 
-/**
- * Register the block payment method type
- */
-add_action('woocommerce_blocks_payment_method_type_registration', function($payment_method_registry) {
-    $payment_method_registry->register(new WC_Thirdweb_Blocks_Support());
-});
-
 /**
  * Block support class
  */
-class WC_Thirdweb_Blocks_Support extends AbstractPaymentMethodType {
+final class WC_Thirdweb_Blocks_Support extends AbstractPaymentMethodType {
 
     /**
      * Payment method name/id
@@ -54,25 +47,30 @@ public function is_active() {
      * Register scripts for checkout block
      */
     public function get_payment_method_script_handles() {
-        $asset_path = THIRDWEB_WC_PLUGIN_DIR . 'build/checkout-block.asset.php';
-        $asset      = file_exists($asset_path) 
-            ? require($asset_path) 
+        $asset_path = THIRDWEB_WC_PLUGIN_DIR . 'build/index.tsx.asset.php';
+        $asset      = file_exists($asset_path)
+            ? require($asset_path)
             : ['dependencies' => [], 'version' => THIRDWEB_WC_VERSION];
 
+        // Add WooCommerce block dependencies (they're externals in webpack)
+        $dependencies = array_merge(
+            $asset['dependencies'],
+            [
+                'wc-blocks-registry',
+                'wc-settings',
+            ]
+        );
+
         wp_register_script(
             'thirdweb-wc-checkout-block',
-            THIRDWEB_WC_PLUGIN_URL . 'build/checkout-block.js',
-            $asset['dependencies'],
+            THIRDWEB_WC_PLUGIN_URL . 'build/index.tsx.js',
+            $dependencies,
             $asset['version'],
             true
         );
 
-        // Pass PHP config to JavaScript
-        wp_localize_script(
-            'thirdweb-wc-checkout-block',
-            'thirdwebWCConfig',
-            $this->get_payment_method_data()
-        );
+        // Note: get_payment_method_data() is automatically passed to JS by WooCommerce Blocks
+        // via the getSetting() function, no need to localize manually
 
         return ['thirdweb-wc-checkout-block'];
     }

includes/class-thirdweb-blocks-support.php

@@ -58,7 +58,7 @@ export const ThirdwebCheckout: React.FC<ThirdwebCheckoutProps> = ({
     // Calculate amount in token units (assuming 6 decimals for USDC/USDT)
     // WooCommerce sends total in smallest currency unit (cents for USD)
     const cartTotalInDollars = billing.cartTotal.value / 100;
-    
+
     // For stablecoins, amount is typically 1:1 with USD
     // The CheckoutWidget expects amount as a string
     const amount = cartTotalInDollars.toFixed(2);
@@ -162,33 +162,23 @@ export const ThirdwebCheckout: React.FC<ThirdwebCheckoutProps> = ({
                         chain={chain}
                         amount={amount}
                         seller={settings.seller as `0x${string}`}
-                        
+
                         // Optional: specific token (USDC address)
-                        tokenAddress={settings.tokenAddress as `0x${string}` | undefined}
-                        
-                        // Product info (optional - enhances the checkout UI)
-                        name="Order Payment"
-                        description={`Pay ${billing.currency.code} ${amount}`}
-                        
+                        // Only pass if it's a valid address, not empty string
+                        {...(settings.tokenAddress && settings.tokenAddress.startsWith('0x')
+                            ? { tokenAddress: settings.tokenAddress as `0x${string}` }
+                            : {})}
+
                         // Payment methods
                         paymentMethods={['crypto', 'card']}
-                        
+
                         // Callbacks
                         onSuccess={handleSuccess}
                         onError={handleError}
                         onCancel={handleCancel}
 
                         // Theming
                         theme="light"
-                        
-                        // Supported tokens users can pay WITH (cross-chain)
-                        supportedTokens={{
-                            [settings.chainId]: settings.supportedTokens?.map(t => ({
-                                address: t.address as `0x${string}`,
-                                name: t.symbol,
-                                symbol: t.symbol,
-                            })) || [],
-                        }}
                     />
                 </div>
 

src/checkout-block/ThirdwebCheckout.tsx

@@ -91,6 +91,11 @@ function thirdweb_wc_init() {
     // Load block support for checkout blocks
     add_action('woocommerce_blocks_loaded', function() {
         require_once THIRDWEB_WC_PLUGIN_DIR . 'includes/class-thirdweb-blocks-support.php';
+
+        // Register with blocks payment method registry
+        add_action('woocommerce_blocks_payment_method_type_registration', function($payment_method_registry) {
+            $payment_method_registry->register(new WC_Thirdweb_Blocks_Support());
+        });
     });
 }
 add_action('plugins_loaded', 'thirdweb_wc_init');

thirdweb-woocommerce-checkout.php

@@ -1,6 +1,6 @@
 /**
  * Webpack configuration for WooCommerce Blocks extension
- * 
+ *
  * Extends @wordpress/scripts default config to handle WooCommerce packages
  * that are provided by WooCommerce core at runtime.
  */
@@ -9,13 +9,10 @@ const defaultConfig = require('@wordpress/scripts/config/webpack.config');
 
 module.exports = {
     ...defaultConfig,
-    resolve: {
-        ...defaultConfig.resolve,
-        alias: {
-            ...defaultConfig.resolve?.alias,
-            '@woocommerce/blocks-registry': require.resolve('./src/mocks/@woocommerce/blocks-registry.js'),
-            '@woocommerce/settings': require.resolve('./src/mocks/@woocommerce/settings.js'),
-        },
+    externals: {
+        ...defaultConfig.externals,
+        '@woocommerce/blocks-registry': ['wc', 'wcBlocksRegistry'],
+        '@woocommerce/settings': ['wc', 'wcSettings'],
     },
 };