Add StripeLink to WooCommerce Checkout block (#2386)

Author: mordeth

changelog.txt

@@ -4,6 +4,7 @@
 * Add - Stripe Link: Add beta headers for Stripe server requests
 * Add - Stripe Link payment method option in admin
 * Add - Stripe Link payment method on checkout form
+* Add - Stripe Link payment method on blocks checkout form
 
 = 6.4.3 - 2022-06-30 =
 * Fix - Replace unnecessary throws with empty string when keys are invalid.

client/blocks/credit-card/constants.js

@@ -1 +1,2 @@
 export const PAYMENT_METHOD_NAME = 'stripe';
+export const WC_STORE_CART = 'wc/store/cart';

client/blocks/upe/fields.js

@@ -1,13 +1,52 @@
 import { useState, useEffect } from '@wordpress/element';
+import { useDispatch, useSelect } from '@wordpress/data';
 import { __ } from '@wordpress/i18n';
 import {
 	Elements,
 	ElementsConsumer,
 	PaymentElement,
 } from '@stripe/react-stripe-js';
+import { getAppearance } from '../../styles/upe';
 import { confirmUpePayment } from './confirm-upe-payment';
 import { getBlocksConfiguration } from 'wcstripe/blocks/utils';
-import { PAYMENT_METHOD_NAME } from 'wcstripe/blocks/credit-card/constants';
+import {
+	PAYMENT_METHOD_NAME,
+	WC_STORE_CART,
+} from 'wcstripe/blocks/credit-card/constants';
+import enableStripeLinkPaymentMethod from 'wcstripe/stripe-link';
+import './styles.scss';
+
+const useCustomerData = () => {
+	const { customerData, isInitialized } = useSelect( ( select ) => {
+		const store = select( WC_STORE_CART );
+		return {
+			customerData: store.getCustomerData(),
+			isInitialized: store.hasFinishedResolution( 'getCartData' ),
+		};
+	} );
+	const {
+		setShippingAddress,
+		setBillingAddress,
+		setBillingData,
+	} = useDispatch( WC_STORE_CART );
+
+	let customerBillingAddress = customerData.billingData;
+	let setCustomerBillingAddress = setBillingData;
+
+	//added for backwards compatibility -> billingData was renamed to billingAddress
+	if ( customerData.billingData === undefined ) {
+		customerBillingAddress = customerData.billingAddress;
+		setCustomerBillingAddress = setBillingAddress;
+	}
+
+	return {
+		isInitialized,
+		billingAddress: customerBillingAddress,
+		shippingAddress: customerData.shippingAddress,
+		setBillingAddress: setCustomerBillingAddress,
+		setShippingAddress,
+	};
+};
 
 const UPEField = ( {
 	api,
@@ -63,6 +102,131 @@ const UPEField = ( {
 		createIntent();
 	}, [ paymentIntentId, hasRequestedIntent, api, errorMessage ] );
 
+	const customerData = useCustomerData();
+
+	useEffect( () => {
+		if (
+			paymentMethodsConfig.link !== undefined &&
+			paymentMethodsConfig.card !== undefined
+		) {
+			const shippingAddressFields = {
+				line1: 'shipping-address_1',
+				line2: 'shipping-address_2',
+				city: 'shipping-city',
+				state: 'components-form-token-input-1',
+				postal_code: 'shipping-postcode',
+				country: 'components-form-token-input-0',
+			};
+			const billingAddressFields = {
+				line1: 'billing-address_1',
+				line2: 'billing-address_2',
+				city: 'billing-city',
+				state: 'components-form-token-input-3',
+				postal_code: 'billing-postcode',
+				country: 'components-form-token-input-2',
+			};
+
+			const appearance = getAppearance();
+			elements.update( { appearance } );
+
+			enableStripeLinkPaymentMethod( {
+				api,
+				elements,
+				emailId: 'email',
+				fill_field_method: ( address, nodeId, key ) => {
+					const setAddress =
+						shippingAddressFields[ key ] === nodeId
+							? customerData.setShippingAddress
+							: customerData.setBillingAddress;
+					const customerAddress =
+						shippingAddressFields[ key ] === nodeId
+							? customerData.shippingAddress
+							: customerData.billingAddress;
+
+					if ( undefined === customerAddress ) {
+						return;
+					}
+
+					if ( address.address[ key ] === null ) {
+						address.address[ key ] = '';
+					}
+
+					if ( key === 'line1' ) {
+						customerAddress.address_1 = address.address[ key ];
+					} else if ( key === 'line2' ) {
+						customerAddress.address_2 = address.address[ key ];
+					} else if ( key === 'postal_code' ) {
+						customerAddress.postcode = address.address[ key ];
+					} else {
+						customerAddress[ key ] = address.address[ key ];
+					}
+
+					if ( undefined !== customerData.billingAddress ) {
+						customerAddress.email = getEmail();
+					}
+
+					setAddress( customerAddress );
+
+					function getEmail() {
+						return document.getElementById( 'email' ).value;
+					}
+
+					customerData.billingAddress.email = getEmail();
+					customerData.setBillingAddress(
+						customerData.billingAddress
+					);
+				},
+				show_button: ( linkAutofill ) => {
+					jQuery( '#email' )
+						.parent()
+						.append(
+							'<button class="stripe-gateway-stripelink-modal-trigger"></button>'
+						);
+					if ( jQuery( '#email' ).val() !== '' ) {
+						jQuery(
+							'.stripe-gateway-stripelink-modal-trigger'
+						).show();
+
+						const linkButtonTop =
+							jQuery( '#email' ).position().top +
+							( jQuery( '#email' ).outerHeight() - 40 ) / 2;
+						jQuery(
+							'.stripe-gateway-stripelink-modal-trigger'
+						).show();
+						jQuery(
+							'.stripe-gateway-stripelink-modal-trigger'
+						).css( 'top', linkButtonTop + 'px' );
+					}
+
+					//Handle StripeLink button click.
+					jQuery( '.stripe-gateway-stripelink-modal-trigger' ).on(
+						'click',
+						( event ) => {
+							event.preventDefault();
+							// Trigger modal.
+							linkAutofill.launch( {
+								email: jQuery( '#email' ).val(),
+							} );
+						}
+					);
+				},
+				complete_shipping: () => {
+					return (
+						document.getElementById( 'shipping-address_1' ) !== null
+					);
+				},
+				shipping_fields: shippingAddressFields,
+				billing_fields: billingAddressFields,
+				complete_billing: () => {
+					return (
+						document.getElementById( 'billing-address_1' ) !== null
+					);
+				},
+			} );
+		}
+		// eslint-disable-next-line react-hooks/exhaustive-deps
+	}, [ elements ] );
+
 	useEffect(
 		() =>
 			onPaymentProcessing( () => {

client/blocks/upe/styles.scss

@@ -0,0 +1,17 @@
+button.stripe-gateway-stripelink-modal-trigger {
+	display: none;
+	position: absolute;
+	right: 5px;
+	width: 64px;
+	height: 40px;
+	background: no-repeat
+		url( '../../payment-method-icons/link/icon.svg' );
+	background-color: transparent !important;
+	cursor: pointer;
+	border: none;
+}
+
+button.stripe-gateway-stripelink-modal-trigger:hover {
+	background-color: transparent;
+	border-color: transparent;
+}

client/classic/upe/index.js

@@ -329,11 +329,18 @@ jQuery( function ( $ ) {
 						api,
 						elements,
 						emailId: 'billing_email',
-						complete_billing: true,
+						complete_billing: () => {
+							return true;
+						},
 						complete_shipping: () => {
-							return ! document.getElementById(
-								'ship-to-different-address-checkbox'
-							).checked;
+							return (
+								document.getElementById(
+									'ship-to-different-address-checkbox'
+								) &&
+								document.getElementById(
+									'ship-to-different-address-checkbox'
+								).checked
+							);
 						},
 						shipping_fields: {
 							line1: 'shipping_address_1',

client/stripe-link/index.js

@@ -51,7 +51,7 @@ const enableStripeLinkPaymentMethod = ( options ) => {
 					}
 			  };
 
-		if ( options.complete_shipping ) {
+		if ( options.complete_shipping() ) {
 			fillWith( shippingAddress, options.shipping_fields.line1, 'line1' );
 			fillWith( shippingAddress, options.shipping_fields.line2, 'line2' );
 			fillWith( shippingAddress, options.shipping_fields.city, 'city' );
@@ -67,7 +67,8 @@ const enableStripeLinkPaymentMethod = ( options ) => {
 				'country'
 			);
 		}
-		if ( options.complete_billing ) {
+
+		if ( options.complete_billing() ) {
 			fillWith( billingAddress, options.billing_fields.line1, 'line1' );
 			fillWith( billingAddress, options.billing_fields.line2, 'line2' );
 			fillWith( billingAddress, options.billing_fields.city, 'city' );
@@ -83,6 +84,7 @@ const enableStripeLinkPaymentMethod = ( options ) => {
 				'country'
 			);
 		}
+		jQuery( 'select' ).trigger( 'change' );
 	} );
 };
 

includes/class-wc-stripe-blocks-support.php

@@ -95,6 +95,13 @@ private function register_upe_payment_method_script_handles() {
 				: $dependencies;
 		}
 
+		wp_enqueue_style(
+			'wc-stripe-blocks-checkout-style',
+			WC_STRIPE_PLUGIN_URL . '/build/upe_blocks.css',
+			[],
+			$version
+		);
+
 		wp_register_script(
 			'wc-stripe-blocks-integration',
 			WC_STRIPE_PLUGIN_URL . '/build/upe_blocks.js',

includes/class-wc-stripe-intent-controller.php

@@ -414,6 +414,19 @@ public function update_payment_intent( $payment_intent_id = '', $order_id = null
 			if ( '' !== $selected_upe_payment_type ) {
 				// Only update the payment_method_types if we have a reference to the payment type the customer selected.
 				$request['payment_method_types'] = [ $selected_upe_payment_type ];
+				if (
+					WC_Stripe_UPE_Payment_Method_CC::STRIPE_ID === $selected_upe_payment_type &&
+					in_array(
+						WC_Stripe_UPE_Payment_Method_Link::STRIPE_ID,
+						$gateway->get_upe_enabled_payment_method_ids(),
+						true
+					)
+				) {
+					$request['payment_method_types'] = [
+						WC_Stripe_UPE_Payment_Method_CC::STRIPE_ID,
+						WC_Stripe_UPE_Payment_Method_Link::STRIPE_ID,
+					];
+				}
 				$order->update_meta_data( '_stripe_upe_payment_type', $selected_upe_payment_type );
 			}
 			if ( ! empty( $customer ) && $customer->get_id() ) {

readme.txt

@@ -132,5 +132,6 @@ If you get stuck, you can ask for help in the Plugin Forum.
 * Add - Stripe Link payment method option in admin
 * Add - Stripe Link: Add beta headers for Stripe server requests
 * Add - Stripe Link payment method on checkout form
+* Add - Stripe Link payment method on blocks checkout form
 
 [See changelog for all versions](https://raw.githubusercontent.com/woocommerce/woocommerce-gateway-stripe/trunk/changelog.txt).