2.3.0:

#14
#34

Block/Multishipping.php

@@ -50,9 +50,9 @@ final protected function _toHtml() {$m = $this->m(); return df_cc_n(
 			// 2017-08-26
 			// The generic «.df-payment» selector is used here:
 			// https://github.com/mage2pro/core/blob/2.10.43/Payment/view/frontend/web/main.less#L51
-			['class' => df_cc_s('df-payment df-card', df_module_name_lc($m, '-'))]
-			+ df_widget($m, 'multishipping', CP::p())
-			,df_block_output($m, 'multishipping')
+			['class' => df_cc_s('df-payment df-card', df_module_name_lc($m, '-'), 'df-singleLineMode')]
+			+ df_widget($m, 'multishipping', CP::p() + ['ba' => df_quote()->getBillingAddress()->getData()])
+			,df_block_output($m, 'multishipping', ['requireCardholder' => $m->s()->requireCardholder()])
 		)
 		,df_link_inline(df_asset_name('main', $m, 'css'))
 	);}

composer.json

@@ -1,6 +1,6 @@
 {
 	"name": "mage2pro/stripe"
-	,"version": "2.2.0"
+	,"version": "2.3.0"
 	,"description": "The «Stripe» payment extension for Magento 2."
 	,"type": "magento2-module"
 	,"homepage": "https://mage2.pro/c/extensions/stripe"
@@ -11,7 +11,7 @@
 		"homepage": "https://mage2.pro/users/dmitry_fedyuk",
 		"role": "Developer"
 	}]
-	,"require": {"mage2pro/core": ">=3.2.7", "stripe/stripe-php": "3.*"}
+	,"require": {"mage2pro/core": ">=3.2.8", "stripe/stripe-php": "3.*"}
 	,"autoload": {"files": ["registration.php"], "psr-4": {"Dfe\\Stripe\\": ""}}
 	,"keywords": [
 		"API"

view/frontend/templates/multishipping.phtml

@@ -1,4 +1,9 @@
-<?php /** @var \Magento\Framework\View\Element\AbstractBlock $block */ ?>
+<?php
+/**
+ * @var \Magento\Framework\View\Element\AbstractBlock $block
+ * @var bool $requireCardholder
+ */
+?>
 <!-- 2017-08-25
 I have implemented the loader by analogy with:
 https://github.com/magento/magento2/blob/2.2.0-rc2.1/app/code/Magento/Checkout/view/frontend/templates/onepage.phtml#L10-L16
@@ -18,7 +23,28 @@ https://github.com/magento/magento2/blob/2.2.0-rc2.1/app/code/Magento/Checkout/v
 	</div>
 </div>
 <!-- 2017-08-26 This container is visible if the «Another card» option is selected, and hidden otherwise. -->
-<div class='new-card'>
+<div class='df-card-new'>
+<!-- 2017-10-18
+`The payment form in the frontend multishipping scenario
+does not ask a customer for the cardholder name
+even if the «Require the cardholder's name?» option is enabled`:
+https://github.com/mage2pro/stripe/issues/14
+-->
+<?php if ($requireCardholder) { ?>
+	<div class='field cardholder required'>
+		<div class='control'>
+			<input
+				autocomplete='off'
+				class='input-text'
+				id='dfe_stripe_cardholder'
+				placeholder="<?= __('Cardholder Name') ?>"
+				type='text'
+				value=''
+				data-validate='{required:true}'
+			/>
+		</div>
+	</div>
+<?php } ?>
 	<!-- 2017-08-25
 	Note 1. «Step 2: Create your payment form»: https://stripe.com/docs/elements#create-form
 	Note 2. Without this framing <div> the «Pay» button is hidden,

view/frontend/web/main.less

@@ -1,15 +1,21 @@
 // 2017-08-25
+// 2017-10-17
+// I made the Stripe's form looks like a standard M2 payment form.
+// It is especially important,
+// because we can have a standard M2 input for cardholder's name just above the Stripe's inputs,
+// so all the inputs should have the same style.
 form.dfe_stripe, form.multicheckout #payment-methods .dfe-stripe {
 	// 2017-08-25
 	// I have used some styles from «Example 1: Input groups on light background»:
 	// https://stripe.com/docs/elements/examples#example-1
 	.df-stripe-input {
 		-webkit-transition: box-shadow 150ms ease;
 		background-color: white;
-		border-radius: 4px;
-		border: 1px solid transparent;
+		border-radius: 1px;
+		border: 1px solid #c2c2c2;
 		box-shadow: 0 1px 3px 0 #e6ebf1;
-		padding: 8px 12px;
+		box-sizing: border-box;
+		padding: 5px 9px;
 		transition: box-shadow 150ms ease;
 		&.StripeElement--focus {box-shadow: 0 1px 3px 0 #cfd7df;}
 		&.StripeElement--invalid {border-color: #fa755a;}
@@ -24,19 +30,6 @@ form.dfe_stripe, form.multicheckout #payment-methods .dfe-stripe {
 		padding: 0.25rem 0.5rem;
 	}
 	.df-stripe-input, .message {max-width: 25em;}
-}
-// 2017-10-17
-// It makes the Stripe's form looks like a standard M2 payment form.
-// It is especially important,
-// because we can have a standard M2 input for cardholder's name just above the Stripe's inputs,
-// so all the inputs should have the same style.
-form.dfe_stripe {
-	.df-stripe-input {
-		border-color: #c2c2c2;
-		border-radius: 1px;
-		box-sizing: border-box;
-		padding: 5px 9px;
-	}
 	// 2017-10-17
 	// The standard margin-bottom is 20px.
 	// It is too much if the Stripe's elements are on a single-line.

view/frontend/web/multishipping.js

@@ -6,6 +6,7 @@ define([
 	/**
 	 * 2017-08-25
 	 * @param {Object} config
+	 * @param {Object} config.ba
 	 * @param {String} config.publicKey
 	 * @param {HTMLAnchorElement} element
 	 * @returns void
@@ -74,7 +75,7 @@ define([
 				});
 				$optionsC.append(buildOption('new', 'Another card'));
 				$element.prepend($optionsC);
-				var $new = $('.new-card');
+				var $new = $('.df-card-new');
 				var $options = $('input[type=radio][name=option]', $optionsC);
 				// 2017-08-26 «How to use radio on change event?»: https://stackoverflow.com/a/13152970
 				$options.change(function() {
@@ -202,11 +203,56 @@ define([
 			ev.preventDefault();
 			var $c = $('.box-billing-method');
 			$c.trigger('processStart');
+			/**
+			 * 2017-10-18
+			 * Note 1.
+			 * An address looks like:
+			 *	{
+			 *		<...>
+			 *		"city": "Paris",
+			 *		<...>
+			 *		"country_id": "FR",
+			 *		<...>
+			 *		"postcode": "75008",
+			 *		<...>
+			 *		"region": "Paris",
+			 *		<...>
+			 *		"street": "78B Avenue Marceau",
+			 *		<...>
+			 *	}
+			 * @param {Object} a
+			 * @param {String=} a.city	«Rio de Janeiro»
+			 * @param {String=} a.country_id	«BR»
+			 * @param {String=} a.postcode	«22630-010»
+			 * @param {String=} a.region	«Rio de Janeiro»
+			 * @param {String=} a.street	«["Av. Lúcio Costa, 3150 - Barra da Tijuca"]»
+			 *
+			 * Note 2.
+			 * `Pass the customer's billing address to the createToken() Stripe.js method
+			 * in the multi-shipping scenario
+			 * (in the same way as it is happen in the single-shipping scenario)`:
+			 * https://github.com/mage2pro/stripe/issues/34
+			 * 
+			 * Note 3.
+			 * `The payment form in the frontend multishipping scenario
+			 * does not ask a customer for the cardholder name
+			 * even if the «Require the cardholder's name?» option is enabled`:
+			 * https://github.com/mage2pro/stripe/issues/14
+			 */
+			var a = config.ba;
 			// 2017-08-25
 			// https://stripe.com/docs/stripe.js#stripe-create-token
 			// «stripe.createToken returns a Promise which resolves with a result object.»
 			// https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Global_Objects/Promise
-			stripe.createToken(lCard)
+			stripe.createToken(lCard, {
+				address_city: a.city // 2017-08-31 «billing address city», optional.
+				,address_country: a.country_id  // 2017-08-31 «billing address country», optional.
+				,address_line1: a.street  // 2017-08-31 «billing address line 1», optional.
+				,address_line2: ''  // 2017-08-31 «billing address line 2», optional.
+				,address_state: a.region // 2017-08-31 «billing address state», optional.
+				,address_zip: a.postcode // 2017-08-31 «billing ZIP code as a string (e.g., "94301")», optional.
+				,name: $('.cardholder input').val() // 2017-08-31 «cardholder name», optional.
+			})
 				.then(function(r) {
 					if (r.error) {
 						$message.html(r.error.message).show();