diff --git a/app/views/spree/admin/payments/source_forms/_paypal_braintree.html.erb b/app/views/spree/admin/payments/source_forms/_paypal_braintree.html.erb
index 2ec56f14..b7d23648 100644
--- a/app/views/spree/admin/payments/source_forms/_paypal_braintree.html.erb
+++ b/app/views/spree/admin/payments/source_forms/_paypal_braintree.html.erb
@@ -10,5 +10,7 @@
     <% end %>
   </div>
 
-  <%= render partial: "spree/shared/braintree_hosted_fields", locals: { id: id } %>
+  <div id="card_form<%= id %>" data-hook style="display: none;">
+    <%= render partial: "spree/shared/braintree_hosted_fields", locals: { id: id } %>
+  </div>
 </fieldset>
diff --git a/app/views/spree/shared/_braintree_hosted_fields.html.erb b/app/views/spree/shared/_braintree_hosted_fields.html.erb
index 4fbee72a..c7d24e56 100644
--- a/app/views/spree/shared/_braintree_hosted_fields.html.erb
+++ b/app/views/spree/shared/_braintree_hosted_fields.html.erb
@@ -1,6 +1,6 @@
 <% prefix = "payment_source[#{id}]" %>
 
-<div id="card_form<%= id %>" data-hook>
+<div class="hosted-fields">
   <div class="field" data-hook="card_number">
     <%= label_tag "card_number#{id}", Spree::CreditCard.human_attribute_name(:number), class: "required" %>
     <div class="input" id="card_number<%= id %>"></div>
diff --git a/spec/features/braintree_credit_card_checkout_spec.rb b/spec/features/braintree_credit_card_checkout_spec.rb
index 41053bae..8eaeb486 100644
--- a/spec/features/braintree_credit_card_checkout_spec.rb
+++ b/spec/features/braintree_credit_card_checkout_spec.rb
@@ -22,7 +22,7 @@
     visit spree.checkout_state_path(:delivery)
     click_button "Save and Continue"
     choose("Braintree")
-    expect(page).to have_selector("#card_form#{braintree.id}", visible: true)
+    expect(page).to have_selector("#payment_method_#{braintree.id}", visible: true)
     expect(page).to have_selector("iframe#braintree-hosted-field-number")
   end
 end