diff --git a/modules/ppcp-button/resources/css/hosted-fields.scss b/modules/ppcp-button/resources/css/hosted-fields.scss
index e69de29bb..9073e4bbd 100644
--- a/modules/ppcp-button/resources/css/hosted-fields.scss
+++ b/modules/ppcp-button/resources/css/hosted-fields.scss
@@ -0,0 +1,5 @@
+.ppcp-card-icon {
+  margin: 0 3px;
+  max-height: 25px;
+  display: inline-block;
+}
diff --git a/modules/ppcp-button/src/Assets/class-smartbutton.php b/modules/ppcp-button/src/Assets/class-smartbutton.php
index 524b4e1d8..9e6ca8e99 100644
--- a/modules/ppcp-button/src/Assets/class-smartbutton.php
+++ b/modules/ppcp-button/src/Assets/class-smartbutton.php
@@ -321,6 +321,14 @@ class SmartButton implements SmartButtonInterface {
 			$load_script = true;
 		}
 
+		if ( is_checkout() && $this->can_render_dcc() ) {
+			wp_enqueue_style(
+				'ppcp-hosted-fields',
+				$this->module_url . '/assets/css/hosted-fields.css',
+				array(),
+				1
+			);
+		}
 		if ( $load_script ) {
 			wp_enqueue_script(
 				'ppcp-smart-button',
@@ -459,17 +467,23 @@ class SmartButton implements SmartButtonInterface {
 	}
 
 	/**
-	 * Renders the HTML for the DCC fields.
+	 * Whether DCC fields can be rendered.
 	 *
-	 * @throws \WooCommerce\PayPalCommerce\WcGateway\Exception\NotFoundException When a setting hasnt been found.
+	 * @return bool
+	 * @throws \WooCommerce\PayPalCommerce\WcGateway\Exception\NotFoundException When a setting was not found.
+	 */
+	private function can_render_dcc() : bool {
+
+		return $this->settings->has( 'dcc_enabled' ) && $this->settings->get( 'dcc_enabled' ) && $this->settings->has( 'client_id' ) && $this->settings->get( 'client_id' ) && $this->dcc_applies->for_country_currency();
+	}
+
+	/**
+	 * Renders the HTML for the DCC fields.
 	 */
 	public function dcc_renderer() {
 
-		$id             = 'ppcp-hosted-fields';
-		$can_render_dcc = $this->dcc_applies->for_country_currency()
-				&& $this->settings->has( 'client_id' )
-				&& $this->settings->get( 'client_id' );
-		if ( ! $can_render_dcc ) {
+		$id = 'ppcp-hosted-fields';
+		if ( ! $this->can_render_dcc() ) {
 			return;
 		}
 
@@ -489,7 +503,7 @@ class SmartButton implements SmartButtonInterface {
 		) : '';
 
 		printf(
-			'<div id="%1$s">
+			'<div id="%1$s" style="display:none;">
                         <button class="button alt">%6$s</button>
                     </div><div id="payments-sdk__contingency-lightbox"></div><style id="ppcp-hide-dcc">.payment_method_ppcp-credit-card-gateway {display:none;}</style>',
 			esc_attr( $id ),
diff --git a/modules/ppcp-button/webpack.config.js b/modules/ppcp-button/webpack.config.js
index 7ebdb3bc1..98f493573 100644
--- a/modules/ppcp-button/webpack.config.js
+++ b/modules/ppcp-button/webpack.config.js
@@ -6,7 +6,8 @@ module.exports = {
     mode: isProduction ? 'production' : 'development',
     target: 'web',
     entry: {
-        button: path.resolve('./resources/js/button.js')
+        button: path.resolve('./resources/js/button.js'),
+        "hosted-fields": path.resolve('./resources/css/hosted-fields.scss')
     },
     output: {
         path: path.resolve(__dirname, 'assets/'),