Support 18n for Braintree error messages

app/assets/javascripts/solidus_paypal_braintree/constants.js

@@ -9,11 +9,8 @@ SolidusPaypalBraintree = {
 
     // 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);
+      BraintreeError.getErrorFromSlug(braintreeError.code);
+      SolidusPaypalBraintree.showError(error);
     },
 
     classes: {
@@ -35,6 +32,13 @@ SolidusPaypalBraintree = {
     }
   },
 
+  showError: function(error) {
+    var $contentContainer = $("#content");
+    var $flash = $("<div class='flash error'>" + error + "</div>");
+    $contentContainer.prepend($flash);
+    $flash.show().delay(5000).fadeOut(500);
+  },
+
   createHostedForm: function() {
     return SolidusPaypalBraintree._factory(SolidusPaypalBraintree.config.classes.hostedForm(), arguments);
   },

app/views/spree/shared/_braintree_errors.html.erb

@@ -0,0 +1,19 @@
+<script type="text/javascript">
+  BraintreeError = {
+    HOSTED_FIELDS_FIELDS_EMPTY: "<%= I18n.t('solidus_paypal_braintree.errors.empty_fields')%>",
+    HOSTED_FIELDS_FIELDS_INVALID: "<%= I18n.t('solidus_paypal_braintree.errors.invalid_fields')%>",
+    HOSTED_FIELDS_FAILED_TOKENIZATION: "<%= I18n.t('solidus_paypal_braintree.errors.invalid_card')%>",
+    HOSTED_FIELDS_TOKENIZATION_NETWORK_ERROR: "<%= I18n.t('solidus_paypal_braintree.errors.network_error')%>",
+    HOSTED_FIELDS_FIELD_DUPLICATE_IFRAME: "<%= I18n.t('solidus_paypal_braintree.errors.duplicate_iframe')%>",
+    HOSTED_FIELDS_TOKENIZATION_FAIL_ON_DUPLICATE: "<%= I18n.t('solidus_paypal_braintree.errors.fail_on_duplicate')%>",
+    HOSTED_FIELDS_TOKENIZATION_CVV_VERIFICATION_FAILED: "<%= I18n.t('solidus_paypal_braintree.errors.cvv_verification_failed')%>",
+
+    getErrorFromSlug: function(slug) {
+      // Default error message
+      error = "<%= I18n.t('solidus_paypal_braintree.errors.default_error')%>"
+      if (slug in BraintreeError)
+        error = BraintreeError[slug]
+      return error
+    }
+  }
+</script>

app/views/spree/shared/_braintree_hosted_fields.html.erb

@@ -1,5 +1,7 @@
 <% prefix = "payment_source[#{id}]" %>
 
+<%= render partial: "spree/shared/braintree_errors" %>
+
 <div class="hosted-fields">
   <div class="field" data-hook="card_number">
     <%= label_tag "card_number#{id}", Spree::CreditCard.human_attribute_name(:number), class: "required" %>

config/locales/en.yml

@@ -18,6 +18,15 @@ en:
     braintree: Braintree
     nonce: Nonce
     token: Token
+    errors:
+      default_error: "Something bad happened!"
+      empty_fields: "All fields are empty! Please fill out the form."
+      invalid_fields: "Some payment input fields are invalid."
+      invalid_card: "Credit card data is incorrect."
+      network_error: "Network error occurred."
+      duplicate_iframe: "Duplicate Braintree iframe."
+      fail_on_duplicate: "This payment method already exists in your vault."
+      cvv_verification_failed: "CVV did not pass verification."
     payment_type:
       label: Payment Type
       apple_pay_card: Apple Pay

config/locales/it.yml

@@ -0,0 +1,11 @@
+it:
+  solidus_paypal_braintree:
+    errors:
+      default_error: "Qualcosa è andato storto."
+      empty_fields: "I campi non possono essere vuoti."
+      invalid_fields: "Alcuni campi non sono corretti."
+      invalid_card: "I dati della carta di credito non sono corretti."
+      network_error: "Si è verificato un errore di rete."
+      duplicate_iframe: "Ci sono due form Braintree."
+      fail_on_duplicate: "Questo metodo di pagamento già esiste."
+      cvv_verification_failed: "Il codice CVV non è corretto."

spec/features/frontend/braintree_credit_card_checkout_spec.rb

@@ -65,7 +65,7 @@
     before(:each) do
       expect(page).to have_selector("iframe[type='number']")
       click_button "Save and Continue"
-      expect(page).to have_text "BraintreeError: All fields are empty. Cannot tokenize empty card fields."
+      expect(page).to have_text I18n.t("solidus_paypal_braintree.errors.empty_fields")
       expect(page).to have_selector("input[type='submit']:enabled")
     end
 
@@ -75,7 +75,7 @@
         expect(page).to have_selector("input[type='submit']:enabled")
 
         click_button "Save and Continue"
-        expect(page).to have_text "BraintreeError: All fields are empty. Cannot tokenize empty card fields."
+        expect(page).to have_text I18n.t("solidus_paypal_braintree.errors.empty_fields")
       end
     end