Merge branch 'release/0.0.16'

discolabs · Oct 2, 2019 · db1ec89 · db1ec89
2 parents dfa7272 + 588d376
commit db1ec89
Show file tree

Hide file tree

Showing 2 changed files with 32 additions and 3 deletions.
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@discolabs/submarine-js",
-  "version": "0.0.15",
+  "version": "0.0.16",
   "description": "Javascript client library for Submarine.",
   "main": "index.js",
   "author": "Gavin Ballard",

diff --git a/...ckout/payment_methods/shop_payment_methods/cybersource_credit_card_shop_payment_method.js b/...ckout/payment_methods/shop_payment_methods/cybersource_credit_card_shop_payment_method.js
@@ -21,13 +21,17 @@ export class CybersourceCreditCardShopPaymentMethod extends ShopPaymentMethod {
   beforeSetup() {
     this.$subfields = this.$(`[data-subfields-for-payment-method="shop_payment_method_${this.data.id}"]`);
     this.$cardNumber = this.$subfields.find('#cybersource-credit-card-number');
+    this.$cardName = this.$subfields.find('#cybersource-credit-card-name');
     this.$cardExpiry = this.$subfields.find('#cybersource-credit-card-expiry');
     this.$cardCvv = this.$subfields.find('#cybersource-credit-card-cvv');
   }
 
   setup(success, failure) {
     const that = this;
 
+    // Register an event listener to clear validation errors.
+    this.$subfields.on('input', this.onInputChange.bind(this));
+
     // Start by generating a Cybersource client token and storing it for later use.
     submarine.api.generatePaymentProcessorClientToken('cybersource', (client_token) => {
       that.client_token = client_token;
@@ -45,6 +49,7 @@ export class CybersourceCreditCardShopPaymentMethod extends ShopPaymentMethod {
 
   getState() {
     const number = this.$cardNumber.val();
+    const name = this.$cardName.val();
     const expiry = payform.parseCardExpiry(this.$cardExpiry.val());
     const cvv = this.$cardCvv.val();
     const cardType = payform.parseCardType(number);
@@ -53,7 +58,11 @@ export class CybersourceCreditCardShopPaymentMethod extends ShopPaymentMethod {
     return {
       number: {
         value: number,
-        valid: payform.validateCardNumber(number)
+        valid: payform.validateCardNumber(number) && this.isValidCardType(cardType)
+      },
+      name: {
+        value: name,
+        valid: !!name.length
       },
       expiry: {
         value: expiry,
@@ -65,7 +74,7 @@ export class CybersourceCreditCardShopPaymentMethod extends ShopPaymentMethod {
       },
       cardType: {
         value: cardType,
-        valid: !!cardType
+        valid: !!cardType,
       },
       cybersourceCardType: {
         value: cybersourceCardType,
@@ -82,9 +91,29 @@ export class CybersourceCreditCardShopPaymentMethod extends ShopPaymentMethod {
         errors.push(key);
       }
     });
+    this.displayValidationErrors(state, errors);
     return errors;
   }
 
+  isValidCardType(cardType) {
+    return !!cardType && (['visa', 'mastercard', 'amex', 'discover'].indexOf(cardType) !== -1);
+  }
+
+  displayValidationErrors(state, errors) {
+    this.$cardNumber.closest('.field').toggleClass('field--error field--submarine-error', !state.number.valid);
+    this.$cardName.closest('.field').toggleClass('field--error field--submarine-error', !state.name.valid);
+    this.$cardExpiry.closest('.field').toggleClass('field--error field--submarine-error', !state.expiry.valid);
+    this.$cardCvv.closest('.field').toggleClass('field--error field--submarine-error', !state.cvv.valid);
+
+    if(errors.length) {
+      this.$subfields.find('.field--error input').first().focus();
+    }
+  }
+
+  onInputChange(e) {
+    this.$(e.target).closest('.field').toggleClass('field--error field--submarine-error', false);
+  }
+
   process(success, error, additionalData) {
     const state = this.getState();