Use flashes for displaying frontend errors

app/assets/javascripts/spree/checkout/braintree.js

@@ -5,7 +5,7 @@ $(function() {
    * submission if tokenization fails, we need to manually re-enable the
    * submit button. */
   function braintreeError (err) {
-    alert(err.name + ": " + err.message);
+    SolidusPaypalBraintree.braintreeErrorHandle(err);
     enableSubmit();
   }
 

app/assets/javascripts/spree/frontend/solidus_paypal_braintree.js

@@ -3,6 +3,15 @@
 window.SolidusPaypalBraintree = {
   APPLE_PAY_API_VERSION: 1,
 
+  // Override to provide your own error messages.
+  braintreeErrorHandle: function(braintreeError) {
+    var $contentContainer = $("#content");
+    var $flash = $("<div class='flash error'>" + braintreeError.name + ": " + braintreeError.message + "</div>");
+    $contentContainer.prepend($flash);
+
+    $flash.show().delay(5000).fadeOut(500);
+  },
+
   fetchToken: function(tokenCallback) {
     Spree.ajax({
       dataType: 'json',

spec/features/braintree_credit_card_checkout_spec.rb

@@ -64,10 +64,8 @@
     # Attempt to submit an empty form once
     before(:each) do
       expect(page).to have_selector("iframe[type='number']")
-      message = accept_prompt do
-        click_button "Save and Continue"
-      end
-      expect(message).to eq "BraintreeError: All fields are empty. Cannot tokenize empty card fields."
+      click_button "Save and Continue"
+      expect(page).to have_text "BraintreeError: All fields are empty. Cannot tokenize empty card fields."
       expect(page).to have_selector("input[type='submit']:enabled")
     end
 
@@ -76,15 +74,8 @@
       it "displays an alert with a meaningful error message" do
         expect(page).to have_selector("input[type='submit']:enabled")
 
-        # Ensure there are no timing issues with the javascript
-        aggregate_failures do
-          5.times do
-            message = accept_prompt do
-              click_button "Save and Continue"
-            end
-            expect(message).to eq "BraintreeError: All fields are empty. Cannot tokenize empty card fields."
-          end
-        end
+        click_button "Save and Continue"
+        expect(page).to have_text "BraintreeError: All fields are empty. Cannot tokenize empty card fields."
       end
     end