Add BLIK payment method (#4043)

* Add BLIK payment method behind feature flag

* Update PHP unit tests to account for BLIK

* Add BLIK-specific logic for processing a payment

* Fix test constant value

* Fix test constant value

* Add changelog entry

* Update BLIK icon and description

* Update BLIK checkout icon

* Handle premature validation on BLIK code input

* Fix PHP test to include Amazon Pay

* Update comment

* Update variable name

* Make BLIK compatible with Blocks checkout

* Fix indentation after fixing conflicts

* Fix indentation

* Fix indentation

* Add BLIK feature flag to dev tools mapping

* Move BLIK code element out of the payment processing logic

* Refactor repeated BLIK code validation helper

* Extract BLIK code validation clearing to helper

Author: cesarcosta99

assets/images/blik.svg

@@ -20,6 +20,7 @@
 * Tweak - Updates the Single Payment Element setting copy. Now it is labeled "Smart Checkout".
 * Update - Enable/disable Amazon Pay by adding/removing it from the enabled payment methods list.
 * Add - Add ACSS payment tokenization.
+* Add - Add BLIK payment method.
 * Fix - Prevent reuse of payment intents when order total doesn't match intent amount.
 * Update - Update payment method type for Amazon Pay orders.
 * Fix - Compatibility with email preview in the Auth Requested email

changelog.txt

@@ -0,0 +1,48 @@
+import { ValidatedTextInput } from '@woocommerce/blocks-checkout';
+import { __ } from '@wordpress/i18n';
+import { useState } from 'react';
+
+const BlikCodeElement = () => {
+	const [ blikCode, setBlikCode ] = useState( '' );
+
+	return (
+		<>
+			<ValidatedTextInput
+				id="wc-stripe-blik-code"
+				label="BLIK Code"
+				maxLength={ 6 }
+				onChange={ setBlikCode }
+				pattern="[0-9]{6}"
+				value={ blikCode }
+				customValidityMessage={ ( validity ) => {
+					if ( validity.valueMissing ) {
+						return __(
+							'Please enter a valid BLIK code',
+							'woocommerce-gateway-stripe'
+						);
+					}
+
+					if ( validity.patternMismatch ) {
+						return __(
+							'BLIK Code is invalid',
+							'woocommerce-gateway-stripe'
+						);
+					}
+				} }
+				required
+			/>
+			<p
+				style={ {
+					marginTop: 'var(--wp--preset--spacing--50)',
+				} }
+			>
+				{ __(
+					'After submitting your order, please authorize the payment in your mobile banking application.',
+					'woocommerce-gateway-stripe'
+				) }
+			</p>
+		</>
+	);
+};
+
+export default BlikCodeElement;

client/blocks/upe/upe-deferred-intent-creation/blik-code-element.js

@@ -14,14 +14,16 @@ import { useEffect, useState, useRef } from 'react';
  * Internal dependencies
  */
 import { usePaymentCompleteHandler, usePaymentFailHandler } from '../hooks';
+import BlikCodeElement from './blik-code-element';
 import { getBlocksConfiguration } from 'wcstripe/blocks/utils';
 import WCStripeAPI from 'wcstripe/api';
 import {
 	maybeShowCashAppLimitNotice,
 	removeCashAppLimitNotice,
 } from 'wcstripe/stripe-utils/cash-app-limit-notice-handler';
-import { isLinkEnabled } from 'wcstripe/stripe-utils';
+import { isLinkEnabled, validateBlikCode } from 'wcstripe/stripe-utils';
 import {
+	PAYMENT_METHOD_BLIK,
 	PAYMENT_METHOD_CARD,
 	PAYMENT_METHOD_CASHAPP,
 } from 'wcstripe/stripe-utils/constants';
@@ -158,6 +160,7 @@ const PaymentProcessor = ( {
 			: '';
 	const paymentMethodsConfig = getBlocksConfiguration()?.paymentMethodsConfig;
 	const gatewayConfig = getPaymentMethods()[ upeMethods[ paymentMethodId ] ];
+	const isBlikSelected = selectedPaymentMethodType === PAYMENT_METHOD_BLIK;
 
 	// Make sure shouldSavePayment is set to true if the cart contains a subscription.
 	// shouldSavePayment might be set to false because the cart contains a subscription and so the save checkbox isn't shown.
@@ -192,7 +195,8 @@ const PaymentProcessor = ( {
 						};
 					}
 
-					if ( ! isPaymentElementComplete ) {
+					// BLIK is a special case which is not handled through the Stripe element.
+					if ( ! ( isPaymentElementComplete || isBlikSelected ) ) {
 						return {
 							type: 'error',
 							message: __(
@@ -222,29 +226,38 @@ const PaymentProcessor = ( {
 						};
 					}
 
-					await validateElements( elements );
+					if ( isBlikSelected ) {
+						validateBlikCode();
+					} else {
+						await validateElements( elements );
+					}
 
 					const billingAddress = billing.billingAddress;
+					const params = {
+						billing_details: {
+							name: `${ billingAddress.first_name } ${ billingAddress.last_name }`.trim(),
+							email: billingAddress.email,
+							phone: billingAddress.phone || null, // Phone is optional, but an empty string is not allowed by Stripe.
+							address: {
+								city: billingAddress.city,
+								country: billingAddress.country,
+								line1: billingAddress.address_1,
+								line2: billingAddress.address_2,
+								postal_code: billingAddress.postcode,
+								state: billingAddress.state,
+							},
+						},
+					};
+					const paymentMethodData = isBlikSelected
+						? {
+								billing_details: params.billing_details,
+								blik: {},
+								type: selectedPaymentMethodType,
+						  }
+						: { elements, params };
 					const paymentMethodObject = await api
 						.getStripe()
-						.createPaymentMethod( {
-							elements,
-							params: {
-								billing_details: {
-									name: `${ billingAddress.first_name } ${ billingAddress.last_name }`.trim(),
-									email: billingAddress.email,
-									phone: billingAddress.phone || null, // Phone is optional, but an empty string is not allowed by Stripe.
-									address: {
-										city: billingAddress.city,
-										country: billingAddress.country,
-										line1: billingAddress.address_1,
-										line2: billingAddress.address_2,
-										postal_code: billingAddress.postcode,
-										state: billingAddress.state,
-									},
-								},
-							},
-						} );
+						.createPaymentMethod( paymentMethodData );
 
 					if ( paymentMethodObject.error ) {
 						return {
@@ -253,10 +266,19 @@ const PaymentProcessor = ( {
 						};
 					}
 
+					const dynamicPaymentData = isBlikSelected
+						? {
+								'wc-stripe-blik-code': document?.querySelector(
+									'#wc-stripe-blik-code'
+								)?.value,
+						  }
+						: {};
+
 					return {
 						type: 'success',
 						meta: {
 							paymentMethodData: {
+								...dynamicPaymentData,
 								payment_method: upeMethods[ paymentMethodId ],
 								wc_payment_intent_id: paymentIntentId ?? '',
 								'wc-stripe-is-deferred-intent': true,
@@ -296,6 +318,8 @@ const PaymentProcessor = ( {
 			isPaymentElementComplete,
 			billing.billingAddress,
 			paymentIntentId,
+			selectedPaymentMethodType,
+			isBlikSelected,
 		]
 	);
 
@@ -355,12 +379,16 @@ const PaymentProcessor = ( {
 					__html: testingInstructionsIfAppropriate,
 				} }
 			/>
-			<PaymentElement
-				options={ getStripeElementOptions() }
-				onChange={ onSelectedPaymentMethodChange }
-				onLoadError={ setHasLoadError }
-				className="wcstripe-payment-element"
-			/>
+			{ isBlikSelected ? (
+				<BlikCodeElement />
+			) : (
+				<PaymentElement
+					options={ getStripeElementOptions() }
+					onChange={ onSelectedPaymentMethodChange }
+					onLoadError={ setHasLoadError }
+					className="wcstripe-payment-element"
+				/>
+			) }
 		</>
 	);
 };

client/blocks/upe/upe-deferred-intent-creation/payment-processor.js

@@ -1,6 +1,10 @@
 import jQuery from 'jquery';
 import WCStripeAPI from '../../api';
-import { getStripeServerData, getUPETerms } from '../../stripe-utils';
+import {
+	getStripeServerData,
+	getUPETerms,
+	maybeClearBlikCodeValidation,
+} from '../../stripe-utils';
 import { legacyHashchangeHandler } from './legacy-support';
 import './style.scss';
 import './deferred-intent.js';
@@ -306,6 +310,8 @@ jQuery( function ( $ ) {
 			} else {
 				removeCashAppLimitNotice();
 			}
+
+			maybeClearBlikCodeValidation();
 		} );
 
 	// Add terms parameter to UPE if save payment information checkbox is checked.

client/classic/upe/index.js

@@ -14,10 +14,12 @@ import {
 	unblockBlockCheckout,
 	resetBlockCheckoutPaymentState,
 	getAdditionalSetupIntentData,
+	validateBlikCode,
 } from '../../stripe-utils';
 import { getFontRulesFromPage } from '../../styles/upe';
 import {
 	PAYMENT_INTENT_STATUS_REQUIRES_ACTION,
+	PAYMENT_METHOD_BLIK,
 	PAYMENT_METHOD_BOLETO,
 	PAYMENT_METHOD_CARD,
 	PAYMENT_METHOD_CASHAPP,
@@ -276,9 +278,19 @@ function createStripePaymentMethod(
 		};
 	}
 
+	// BLIK uses a controlled form instead of Stripe Elements.
+	const paymentMethodData =
+		paymentMethodType === PAYMENT_METHOD_BLIK
+			? {
+					billing_details: params?.billing_details,
+					blik: {},
+					type: paymentMethodType,
+			  }
+			: { elements, params };
+
 	return api
 		.getStripe( paymentMethodType )
-		.createPaymentMethod( { elements, params } )
+		.createPaymentMethod( paymentMethodData )
 		.then( ( paymentMethod ) => {
 			if ( paymentMethod.error ) {
 				throw paymentMethod.error;
@@ -418,7 +430,11 @@ export const processPayment = (
 				);
 			}
 
-			await validateElements( elements );
+			if ( paymentMethodType === PAYMENT_METHOD_BLIK ) {
+				validateBlikCode( jQueryForm );
+			} else {
+				await validateElements( elements );
+			}
 
 			const paymentMethodObject = await createStripePaymentMethod(
 				api,

client/classic/upe/payment-processing.js

@@ -0,0 +1,12 @@
+import React from 'react';
+import styled from '@emotion/styled';
+import IconWithShell from '../styles/icon-with-shell';
+import icon from './icon.svg';
+
+const Wrapper = styled( IconWithShell )`
+	background: #010101;
+`;
+
+const BlikIcon = ( props ) => <Wrapper { ...props } src={ icon } />;
+
+export default BlikIcon;

client/payment-method-icons/blik/icon.svg

@@ -1,4 +1,5 @@
 import AlipayIcon from './alipay';
+import BlikIcon from './blik';
 import CreditCardIcon from './cards';
 import GiropayIcon from './giropay';
 import KlarnaIcon from './klarna';
@@ -22,6 +23,7 @@ import StripeIcon from './stripe';
 
 export default {
 	alipay: AlipayIcon,
+	blik: BlikIcon,
 	card: CreditCardIcon,
 	giropay: GiropayIcon,
 	klarna: KlarnaIcon,

client/payment-method-icons/blik/index.js

@@ -9,6 +9,7 @@ import {
 	PAYMENT_METHOD_BACS,
 	PAYMENT_METHOD_BANCONTACT,
 	PAYMENT_METHOD_BECS,
+	PAYMENT_METHOD_BLIK,
 	PAYMENT_METHOD_BOLETO,
 	PAYMENT_METHOD_CARD,
 	PAYMENT_METHOD_CASHAPP,
@@ -31,6 +32,8 @@ const isAcssEnabled = window.wc_stripe_settings_params?.is_acss_enabled === '1';
 const isBacsEnabled = window.wc_stripe_settings_params?.is_bacs_enabled === '1';
 const isBecsDebitEnabled =
 	window.wc_stripe_settings_params?.is_becs_debit_enabled === '1';
+const isBlikEnabled = window.wc_stripe_settings_params?.is_blik_enabled === '1';
+
 const paymentMethodsMap = {
 	card: {
 		id: PAYMENT_METHOD_CARD,
@@ -324,4 +327,18 @@ if ( isBecsDebitEnabled ) {
 	};
 }
 
+// Enable BLIK according to feature flag value.
+if ( isBlikEnabled ) {
+	paymentMethodsMap.blik = {
+		id: PAYMENT_METHOD_BLIK,
+		label: 'BLIK',
+		description: __(
+			'BLIK enables customers in Poland to pay directly via online payouts from their bank account.',
+			'woocommerce-gateway-stripe'
+		),
+		Icon: icons.blik,
+		currencies: [ 'PLN' ],
+	};
+}
+
 export default paymentMethodsMap;