add setting for theme

Author: eabdelmoneim

includes/class-thirdweb-blocks-support.php

@@ -83,16 +83,17 @@ public function get_payment_method_data() {
             'title'        => $this->get_setting('title'),
             'description'  => $this->get_setting('description'),
             'supports'     => $this->get_supported_features(),
-            
+
             // thirdweb configuration
             'clientId'     => $this->get_setting('client_id'),
             'seller'       => $this->get_setting('seller_wallet'),
             'chainId'      => (int) $this->get_setting('chain_id'),
             'tokenAddress' => $this->get_setting('token_address'),
-            
+            'theme'        => $this->get_setting('theme') ?: 'light',
+
             // Icons/branding
             'icon'         => THIRDWEB_WC_PLUGIN_URL . 'assets/icon.svg',
-            
+
             // Supported stablecoins display
             'supportedTokens' => $this->get_supported_tokens(),
         ];

includes/class-thirdweb-payment-gateway.php

@@ -39,6 +39,7 @@ public function __construct() {
         $this->seller_wallet  = $this->get_option('seller_wallet');
         $this->chain_id       = $this->get_option('chain_id');
         $this->token_address  = $this->get_option('token_address');
+        $this->theme          = $this->get_option('theme');
 
         // Save settings hook
         add_action('woocommerce_update_options_payment_gateways_' . $this->id, [$this, 'process_admin_options']);
@@ -111,6 +112,17 @@ public function init_form_fields() {
                 'default'     => '0x833589fCD6eDb6E08f4c7C32D4f71b54bdA02913', // USDC on Base
                 'placeholder' => __('0x833589fCD6eDb6E08f4c7C32D4f71b54bdA02913', 'thirdweb-wc'),
             ],
+            'theme' => [
+                'title'       => __('Widget Theme', 'thirdweb-wc'),
+                'type'        => 'select',
+                'description' => __('Choose the color theme for the checkout widget. Light theme is recommended for most sites.', 'thirdweb-wc'),
+                'default'     => 'light',
+                'desc_tip'    => true,
+                'options'     => [
+                    'light' => __('Light', 'thirdweb-wc'),
+                    'dark'  => __('Dark', 'thirdweb-wc'),
+                ],
+            ],
         ];
     }
 
@@ -227,6 +239,7 @@ public function get_frontend_config() {
             'tokenAddress' => $this->token_address,
             'title'        => $this->title,
             'description'  => $this->description,
+            'theme'        => $this->theme ?: 'light',
         ];
     }
 }

src/checkout-block/ThirdwebCheckout.tsx

@@ -17,6 +17,7 @@ interface ThirdwebCheckoutProps {
         chainId: number;
         tokenAddress?: string;
         description?: string;
+        theme?: 'light' | 'dark';
         supportedTokens?: Array<{ symbol: string; address: string }>;
     };
     billing: {
@@ -178,7 +179,7 @@ export const ThirdwebCheckout: React.FC<ThirdwebCheckoutProps> = ({
                         onCancel={handleCancel}
 
                         // Theming
-                        theme="light"
+                        theme={settings.theme || 'light'}
                     />
                 </div>