2.3.6: #44

mage2pro · Oct 21, 2017 · f1c6ec1 · f1c6ec1
1 parent af627bd
commit f1c6ec1
Show file tree

Hide file tree

Showing 3 changed files with 92 additions and 5 deletions.
diff --git a/composer.json b/composer.json
@@ -1,6 +1,6 @@
 {
 	"name": "mage2pro/stripe"
-	,"version": "2.3.5"
+	,"version": "2.3.6"
 	,"description": "The «Stripe» payment extension for Magento 2."
 	,"type": "magento2-module"
 	,"homepage": "https://mage2.pro/c/stripe"

diff --git a/view/frontend/web/main.js b/view/frontend/web/main.js
@@ -9,7 +9,7 @@
  * https://github.com/mage2pro/stripe/issues/3
  */
 define([
-	'Df_StripeClone/main', 'jquery', 'Magento_Checkout/js/model/quote'
+	'df', 'Df_StripeClone/main', 'jquery', 'Magento_Checkout/js/model/quote'
    /**
 	* 2017-10-16
 	* «Including Stripe.js»: https://stripe.com/docs/stripe.js#including-stripejs
@@ -27,7 +27,7 @@ define([
 	* because I need to encure that the script is loaded before Dfe_Stripe/main.js execution.
 	*/
 	,'https://js.stripe.com/v3/'
-], function(parent, $, quote) {'use strict';
+], function(df, parent, $, quote) {'use strict';
 /** 2017-09-06 @uses Class::extend() https://github.com/magento/magento2/blob/2.2.0-rc2.3/app/code/Magento/Ui/view/base/web/js/lib/core/class.js#L106-L140 */
 return parent.extend({
 	defaults: {df: {card: {new: {
@@ -193,8 +193,66 @@ return parent.extend({
 		// «mount() accepts either a CSS Selector or a DOM element.»
 		// https://stripe.com/docs/stripe.js#element-mount
 		lElement.mount(e);
-		lElement.addEventListener('change', $.proxy(function(event) {
-			event.error ? this.showErrorMessage(event.error.message) : this.messageContainer.clear();
+		/**
+		 * 2017-10-21 «Stripe.js Reference» → «element.on(event, handler)».
+		 * https://stripe.com/docs/stripe.js#element-on
+		 */
+		lElement.on('change', $.proxy(function(event) {
+			/**
+			 * 2017-10-21
+			 * «The current validation error, if any.
+			 * Comprised of `message`, `code`, and `type` set to `validation_error`.»
+			 * https://stripe.com/docs/stripe.js#element-on
+			 */
+			if (event.error) {
+				this.showErrorMessage(event.error.message);
+			}
+			else {
+				this.messageContainer.clear();
+				/**
+				 * 2017-10-21
+				 * Note 1.
+				 * «Applies to the `card` and `cardNumber` Elements only.
+				 * Contains the card brand (e.g., `visa` or `amex`) of the card number being entered.»
+				 * https://stripe.com/docs/stripe.js#element-on
+				 *
+				 * Note 2.
+				 * The `this.selectedCardType` property is used not only for decoration
+				 * (to show the selected card brang logotype),
+				 * but also by @see Df_Payment/card::validate():
+				 *	var r = !this.isNewCardChosen() || !!this.selectedCardType();
+				 *	if (!r) {
+				 *		this.showErrorMessage(
+				 *			'It looks like you have entered an incorrect bank card number.'
+				 *		);
+				 *	}
+				 * https://github.com/mage2pro/core/blob/3.2.14/Payment/view/frontend/web/card.js#L287-L299
+				 * So it is vital to initialize it, otherwise we will get the failure:
+				 * «It looks like you have entered an incorrect bank card number»
+				 * https://github.com/mage2pro/stripe/issues/44
+				 *
+				 * Note 3.
+				 * The `event.brand` property is present
+				 * only on the `card` and `cardNumber` Elements edition.
+				 * It is not present on other elements edition (e.g. `cardCvc`).
+				 *
+				 * Note 4.
+				 * The Stripe documentation does not enumerate
+				 * all the `event.brand` possitble values.
+				 * I have found them experimentally by entering the test card numbers of all the brands:
+				 * https://stripe.com/docs/testing#cards
+				 */
+				if (event.brand) {
+					this.selectedCardType(df.tr(event.brand, {
+						amex: 'AE'
+						,discover: 'DI'
+						,diners: 'DN'
+						,jsb: 'JCB'
+						,mastercard: 'MC'
+						,visa: 'VI'
+					}));
+				}
+			}
 		}, this));
 		if (-1 !== ['card', 'cardNumber'].indexOf(type)) {
 			this.lCard = lElement;

diff --git a/view/frontend/web/template/card/fields.html b/view/frontend/web/template/card/fields.html
@@ -7,6 +7,35 @@
 https://github.com/mage2pro/square/blob/2.0.3/view/frontend/web/template/expiration.html#L6-L17
 https://github.com/mage2pro/square/blob/2.0.3/view/frontend/web/template/atTheEnd.html#L1
 -->
+<!--ko if: !singleLineMode() -->
+	<div class='field type'>
+		<div class='control'>
+			<ul class='credit-card-types'>
+				<!-- ko foreach: {data: getCardTypes(), as: 'item'} -->
+				<li class='item' data-bind="css: {
+					_active: $parent.selectedCardType() == item,
+					_inactive: $parent.selectedCardType() != null && $parent.selectedCardType() != item
+				} ">
+					<!--ko if: $parent.getIcons(item) -->
+					<img data-bind="attr: {
+						height: $parent.getIcons(item).height
+						,src: $parent.getIcons(item).url
+						,width: $parent.getIcons(item).width
+					}">
+					<!--/ko-->
+				</li>
+				<!--/ko-->
+			</ul>
+			<input class='input-text' name='payment[cc_type]' type='hidden' value='' data-bind="
+				attr: {
+					'data-container': getCode() + '-cc-type'
+					,id: domPrefix() + '_cc_type'
+				}
+				,value: creditCardType"
+			/>
+		</div>
+	</div>
+<!--/ko-->
 <!--ko if: requireCardholder() -->
 	<div class='field cardholder required'>
 		<!--ko if: !singleLineMode() -->