diff --git a/client/additional-methods-setup/upe-preview-methods-selector/setup-complete-task.scss b/client/additional-methods-setup/upe-preview-methods-selector/setup-complete-task.scss
index d47134504f5..027431e01d5 100644
--- a/client/additional-methods-setup/upe-preview-methods-selector/setup-complete-task.scss
+++ b/client/additional-methods-setup/upe-preview-methods-selector/setup-complete-task.scss
@@ -10,6 +10,7 @@
&__enabled-methods-list {
display: flex;
align-items: center;
+ flex-wrap: wrap;
> *:not( :last-child ) {
margin-right: $grid-unit-10;
diff --git a/client/additional-methods-setup/upe-preview-methods-selector/test/add-payment-methods-task.test.js b/client/additional-methods-setup/upe-preview-methods-selector/test/add-payment-methods-task.test.js
index ae4818e718b..98443119428 100644
--- a/client/additional-methods-setup/upe-preview-methods-selector/test/add-payment-methods-task.test.js
+++ b/client/additional-methods-setup/upe-preview-methods-selector/test/add-payment-methods-task.test.js
@@ -19,6 +19,7 @@ import {
useCurrencies,
useEnabledCurrencies,
useManualCapture,
+ useAccountDomesticCurrency,
} from '../../../data';
import WCPaySettingsContext from '../../../settings/wcpay-settings-context';
import { upeCapabilityStatuses } from 'wcpay/additional-methods-setup/constants';
@@ -31,6 +32,7 @@ jest.mock( '../../../data', () => ( {
useEnabledCurrencies: jest.fn(),
useGetPaymentMethodStatuses: jest.fn(),
useManualCapture: jest.fn(),
+ useAccountDomesticCurrency: jest.fn(),
} ) );
jest.mock( '@wordpress/a11y', () => ( {
@@ -116,6 +118,7 @@ describe( 'AddPaymentMethodsTask', () => {
},
} );
useManualCapture.mockReturnValue( [ false, jest.fn() ] );
+ useAccountDomesticCurrency.mockReturnValue( 'usd' );
global.wcpaySettings = {
accountEmail: 'admin@example.com',
};
diff --git a/client/additional-methods-setup/upe-preview-methods-selector/test/enable-upe-preview-task.test.js b/client/additional-methods-setup/upe-preview-methods-selector/test/enable-upe-preview-task.test.js
deleted file mode 100644
index 21d13142cfc..00000000000
--- a/client/additional-methods-setup/upe-preview-methods-selector/test/enable-upe-preview-task.test.js
+++ /dev/null
@@ -1,49 +0,0 @@
-/**
- * External dependencies
- */
-import React from 'react';
-import { render, screen, waitFor } from '@testing-library/react';
-import userEvent from '@testing-library/user-event';
-
-/**
- * Internal dependencies
- */
-import WizardTaskContext from '../../wizard/task/context';
-import WcPayUpeContext from '../../../settings/wcpay-upe-toggle/context';
-
-import EnableUpePreviewTask from '../enable-upe-preview-task';
-
-describe( 'EnableUpePreviewTask', () => {
- it( 'should enable the UPE flag when clicking the "Enable" button', async () => {
- const setCompletedMock = jest.fn();
- const setIsUpeEnabledMock = jest.fn().mockResolvedValue( true );
-
- render(
-
-
-
-
- );
-
- expect( setCompletedMock ).not.toHaveBeenCalled();
- expect( setIsUpeEnabledMock ).not.toHaveBeenCalled();
-
- userEvent.click( screen.getByText( 'Enable' ) );
-
- expect( setIsUpeEnabledMock ).toHaveBeenCalledWith( true );
- await waitFor( () => expect( setIsUpeEnabledMock ).toHaveReturned() );
- expect( setCompletedMock ).toHaveBeenCalledWith(
- true,
- 'add-payment-methods'
- );
- } );
-} );
diff --git a/client/additional-methods-setup/wizard/task-item.scss b/client/additional-methods-setup/wizard/task-item.scss
index c4a2008f90a..c2b7dbb5ec6 100644
--- a/client/additional-methods-setup/wizard/task-item.scss
+++ b/client/additional-methods-setup/wizard/task-item.scss
@@ -121,7 +121,7 @@
&__payment-selector {
&-wrapper {
// Reduce the wrapper's bottom margin and move the difference on the description.
- margin-bottom: $gap-smallest;
+ margin-bottom: $gap-large;
}
&-title {
diff --git a/client/additional-methods-setup/wizard/task-list.js b/client/additional-methods-setup/wizard/task-list.js
index f01ea9bb108..08aa296bc33 100644
--- a/client/additional-methods-setup/wizard/task-list.js
+++ b/client/additional-methods-setup/wizard/task-list.js
@@ -16,7 +16,7 @@ const WizardTaskList = ( { children } ) => {
useLayoutEffect( () => {
// set the focus on the next active heading.
// but need to set the focus only after the first mount, only when the active task changes.
- if ( true === isFirstMount.current ) {
+ if ( isFirstMount.current === true ) {
isFirstMount.current = false;
return;
}
diff --git a/client/banner/banner.scss b/client/banner/banner.scss
index 4c38d67c92b..6ca7b6beb78 100644
--- a/client/banner/banner.scss
+++ b/client/banner/banner.scss
@@ -21,6 +21,10 @@
}
}
+ .woocommerce-payments-banner-logo {
+ margin-left: -$gap-large;
+ }
+
.woocommerce-payments-banner-pill {
/* adapted from https://github.com/woocommerce/woocommerce-admin/blob/main/packages/components/src/pill/style.scss */
font-size: 12px;
diff --git a/client/banner/index.js b/client/banner/index.js
index 8607d744867..7018ffae9df 100644
--- a/client/banner/index.js
+++ b/client/banner/index.js
@@ -17,7 +17,7 @@ const Banner = ( { style } ) => {
logoHeight,
showPill,
className = 'woocommerce-payments-banner';
- if ( 'account-page' === style ) {
+ if ( style === 'account-page' ) {
logoWidth = 196;
logoHeight = 65;
showPill = true;
@@ -30,7 +30,11 @@ const Banner = ( { style } ) => {
return (
-
diff --git a/client/banner/wcpay-logo.js b/client/banner/wcpay-logo.js
index 702866645fa..08afaddb4c7 100644
--- a/client/banner/wcpay-logo.js
+++ b/client/banner/wcpay-logo.js
@@ -8,7 +8,7 @@ export default ( props ) => (
src={ logoImg }
width="241"
height="64"
- alt={ 'WooCommerce Payments logo' }
+ alt={ 'WooPayments logo' }
{ ...props }
/>
);
diff --git a/client/card-readers/list/index.tsx b/client/card-readers/list/index.tsx
index 7275252ac79..2cd75d1a639 100644
--- a/client/card-readers/list/index.tsx
+++ b/client/card-readers/list/index.tsx
@@ -3,7 +3,7 @@
* External dependencies
*/
import React from 'react';
-import { __ } from '@wordpress/i18n';
+import { __, sprintf } from '@wordpress/i18n';
import { Card, CardBody, CardDivider } from '@wordpress/components';
/**
@@ -19,10 +19,14 @@ const ReadersListDescription = () => (
<>
{ __( 'Connected card readers', 'woocommerce-payments' ) }
- { __(
- 'Card readers are marked as active if they’ve processed one or more transactions durring the current billing cycle. ' +
- 'To connect or disconnect card readers, use the WooCommerce Payments mobile application.',
- 'woocommerce-payments'
+ { sprintf(
+ /* translators: %s: WooPayments */
+ __(
+ 'Card readers are marked as active if they’ve processed one or more transactions during the current billing cycle. ' +
+ 'To connect or disconnect card readers, use the %s mobile application.',
+ 'woocommerce-payments'
+ ),
+ 'WooPayments'
) }
diff --git a/client/card-readers/settings/sections/address-details.js b/client/card-readers/settings/sections/address-details.js
index 1b950bc5f5c..3646d6bbbd6 100644
--- a/client/card-readers/settings/sections/address-details.js
+++ b/client/card-readers/settings/sections/address-details.js
@@ -100,7 +100,7 @@ const AddressDetailsSection = () => {
handleAddressPropertyChange( 'city', value )
}
/>
- { 0 < countryStatesOptions.length && (
+ { countryStatesOptions.length > 0 && (
{
},
],
},
+ accountStatus: {
+ country: 'US',
+ },
};
} );
diff --git a/client/checkout/api/index.js b/client/checkout/api/index.js
index d79ebfcd7de..e7fcee97a18 100644
--- a/client/checkout/api/index.js
+++ b/client/checkout/api/index.js
@@ -3,7 +3,7 @@
/**
* Internal dependencies
*/
-import { getConfig } from 'utils/checkout';
+import { getConfig, getUPEConfig } from 'utils/checkout';
import {
getPaymentRequestData,
getPaymentRequestAjaxURL,
@@ -41,6 +41,21 @@ export default class WCPayAPI {
return new Stripe( publishableKey, options );
}
+ /**
+ * Overloaded method to get the Stripe object for UPE. Leverages the original getStripe method but before doing
+ * so, sets the forceNetworkSavedCards option to the proper value for the payment method type.
+ * forceNetworkSavedCards is currently the flag that among others determines whether or not to use the Stripe Platform on the checkout.
+ *
+ * @param {string} paymentMethodType The payment method type.
+ * @return {Object} The Stripe Object.
+ */
+ getStripeForUPE( paymentMethodType ) {
+ this.options.forceNetworkSavedCards = getUPEConfig(
+ 'paymentMethodsConfig'
+ )[ paymentMethodType ].forceNetworkSavedCards;
+ return this.getStripe();
+ }
+
/**
* Generates a new instance of Stripe.
*
@@ -54,13 +69,14 @@ export default class WCPayAPI {
forceNetworkSavedCards,
locale,
isUPEEnabled,
+ isUPEDeferredEnabled,
isStripeLinkEnabled,
} = this.options;
if (
forceNetworkSavedCards &&
! forceAccountRequest &&
- ! isUPEEnabled
+ ! ( isUPEEnabled && ! isUPEDeferredEnabled )
) {
if ( ! this.stripePlatform ) {
this.stripePlatform = this.createStripe(
@@ -143,11 +159,11 @@ export default class WCPayAPI {
*/
prepareValue( name, value ) {
// Fall back to the value in `preparedCustomerData`.
- if ( 'undefined' === typeof value || 0 === value.length ) {
+ if ( typeof value === 'undefined' || value.length === 0 ) {
value = preparedCustomerData[ name ]; // `undefined` if not set.
}
- if ( 'undefined' !== typeof value && 0 < value.length ) {
+ if ( typeof value !== 'undefined' && value.length > 0 ) {
return value;
}
}
@@ -160,7 +176,7 @@ export default class WCPayAPI {
*/
setBillingDetail( name, value ) {
const preparedValue = this.prepareValue( name, value );
- if ( 'undefined' !== typeof preparedValue ) {
+ if ( typeof preparedValue !== 'undefined' ) {
this.args.billing_details[ name ] = preparedValue;
}
}
@@ -173,7 +189,7 @@ export default class WCPayAPI {
*/
setAddressDetail( name, value ) {
const preparedValue = this.prepareValue( name, value );
- if ( 'undefined' !== typeof preparedValue ) {
+ if ( typeof preparedValue !== 'undefined' ) {
this.args.billing_details.address[ name ] = preparedValue;
}
}
@@ -214,13 +230,13 @@ export default class WCPayAPI {
return true;
}
- const isSetupIntent = 'si' === partials[ 1 ];
+ const isSetupIntent = partials[ 1 ] === 'si';
let orderId = partials[ 2 ];
const clientSecret = partials[ 3 ];
const nonce = partials[ 4 ];
const orderPayIndex = redirectUrl.indexOf( 'order-pay' );
- const isOrderPage = -1 < orderPayIndex;
+ const isOrderPage = orderPayIndex > -1;
// If we're on the Pay for Order page, get the order ID
// directly from the URL instead of relying on the hash.
@@ -314,7 +330,7 @@ export default class WCPayAPI {
return verificationCall.then( ( response ) => {
const result =
- 'string' === typeof response
+ typeof response === 'string'
? JSON.parse( response )
: response;
@@ -369,7 +385,7 @@ export default class WCPayAPI {
throw response.data.error;
}
- if ( 'succeeded' === response.data.status ) {
+ if ( response.data.status === 'succeeded' ) {
// No need for further authentication.
return response.data;
}
@@ -465,7 +481,7 @@ export default class WCPayAPI {
'wcpay-fingerprint': fingerprint,
} )
.then( ( response ) => {
- if ( 'failure' === response.result ) {
+ if ( response.result === 'failure' ) {
throw new Error( response.messages );
}
return response;
@@ -502,14 +518,14 @@ export default class WCPayAPI {
if (
paymentIntentSecret &&
confirmPaymentResult.error &&
- 'lock_timeout' === confirmPaymentResult.error.code
+ confirmPaymentResult.error.code === 'lock_timeout'
) {
const paymentIntentResult = await stripe.retrievePaymentIntent(
decryptClientSecret( paymentIntentSecret )
);
if (
! paymentIntentResult.error &&
- 'succeeded' === paymentIntentResult.paymentIntent.status
+ paymentIntentResult.paymentIntent.status === 'succeeded'
) {
window.location.href = confirmParams.redirect_url;
return paymentIntentResult; //To prevent returning an error during the redirection.
@@ -567,7 +583,7 @@ export default class WCPayAPI {
}
)
.then( ( response ) => {
- if ( 'failure' === response.result ) {
+ if ( response.result === 'failure' ) {
throw new Error( response.messages );
}
return response;
diff --git a/client/checkout/blocks/confirm-card-payment.js b/client/checkout/blocks/confirm-card-payment.js
index 4558ef9351f..f5235427fc6 100644
--- a/client/checkout/blocks/confirm-card-payment.js
+++ b/client/checkout/blocks/confirm-card-payment.js
@@ -22,7 +22,7 @@ export default async function confirmCardPayment(
);
// `true` means there is no intent to confirm.
- if ( true === confirmation ) {
+ if ( confirmation === true ) {
return {
type: 'success',
redirectUrl: redirect,
diff --git a/client/checkout/blocks/confirm-upe-payment.js b/client/checkout/blocks/confirm-upe-payment.js
index c39d80d1b21..4746b37d3f9 100644
--- a/client/checkout/blocks/confirm-upe-payment.js
+++ b/client/checkout/blocks/confirm-upe-payment.js
@@ -1,3 +1,8 @@
+/**
+ * Internal dependencies
+ */
+import PAYMENT_METHOD_IDS from 'wcpay/payment-methods/constants';
+
/**
* Handles the confirmation of card payments (3DSv2 modals/SCA challenge).
*
@@ -7,8 +12,10 @@
* @param {string|null} paymentIntentSecret Payment Intent Secret used to validate payment on rate limit error.
* @param {Object} elements Reference to the UPE elements mounted on the page.
* @param {Object} billingData An object containing the customer's billing data.
+ * @param {Object} shippingData An object containing the customer's shipping data, needed for Afterpay.
* @param {Object} emitResponse Various helpers for usage with observer response objects.
- * @return {Object} An object, which contains the result from the action.
+ * @param {string} selectedUPEPaymentType The selected UPE payment type.
+ * @return {Object} An object, which contains the result from the action.
*/
export default async function confirmUPEPayment(
api,
@@ -17,7 +24,9 @@ export default async function confirmUPEPayment(
paymentIntentSecret,
elements,
billingData,
- emitResponse
+ shippingData,
+ emitResponse,
+ selectedUPEPaymentType
) {
const name =
`${ billingData.first_name } ${ billingData.last_name }`.trim() || '-';
@@ -29,7 +38,7 @@ export default async function confirmUPEPayment(
billing_details: {
name,
email:
- 'string' === typeof billingData.email
+ typeof billingData.email === 'string'
? billingData.email.trim()
: '-',
phone: billingData.phone || '-',
@@ -45,6 +54,23 @@ export default async function confirmUPEPayment(
},
};
+ // Afterpay requires shipping details to be passed. Not needed by other payment methods.
+ if ( PAYMENT_METHOD_IDS.AFTERPAY_CLEARPAY === selectedUPEPaymentType ) {
+ confirmParams.shipping = {
+ name:
+ `${ shippingData.shippingAddress.first_name } ${ shippingData.shippingAddress.last_name }`.trim() ||
+ '-',
+ address: {
+ country: shippingData.shippingAddress.country || '_',
+ postal_code: shippingData.shippingAddress.postcode || '-',
+ state: shippingData.shippingAddress.state || '-',
+ city: shippingData.shippingAddress.city || '-',
+ line1: shippingData.shippingAddress.address_1 || '-',
+ line2: shippingData.shippingAddress.address_2 || '-',
+ },
+ };
+ }
+
if ( paymentNeeded ) {
const { error } = await api.handlePaymentConfirmation(
elements,
diff --git a/client/checkout/blocks/fields.js b/client/checkout/blocks/fields.js
index d3de01e5e46..5f47df5d286 100644
--- a/client/checkout/blocks/fields.js
+++ b/client/checkout/blocks/fields.js
@@ -23,10 +23,7 @@ const WCPayFields = ( {
stripe,
elements,
billing: { billingData },
- eventRegistration: {
- onPaymentProcessing,
- onCheckoutAfterProcessingWithSuccess,
- },
+ eventRegistration: { onPaymentProcessing, onCheckoutSuccess },
emitResponse,
shouldSavePayment,
} ) => {
@@ -36,7 +33,7 @@ const WCPayFields = ( {
Test mode: use the test VISA card 4242424242424242
with any expiry date and CVC, or any test card numbers listed{ ' ' }
-
+
here
.
@@ -87,7 +84,7 @@ const WCPayFields = ( {
api,
stripe,
elements,
- onCheckoutAfterProcessingWithSuccess,
+ onCheckoutSuccess,
emitResponse,
shouldSavePayment
);
diff --git a/client/checkout/blocks/hooks.js b/client/checkout/blocks/hooks.js
index fd52b16c93b..34a7a6f504d 100644
--- a/client/checkout/blocks/hooks.js
+++ b/client/checkout/blocks/hooks.js
@@ -16,21 +16,20 @@ export const usePaymentCompleteHandler = (
api,
stripe,
elements,
- onCheckoutAfterProcessingWithSuccess,
+ onCheckoutSuccess,
emitResponse,
shouldSavePayment
) => {
// Once the server has completed payment processing, confirm the intent of necessary.
useEffect(
() =>
- onCheckoutAfterProcessingWithSuccess(
- ( { processingResponse: { paymentDetails } } ) =>
- confirmCardPayment(
- api,
- paymentDetails,
- emitResponse,
- shouldSavePayment
- )
+ onCheckoutSuccess( ( { processingResponse: { paymentDetails } } ) =>
+ confirmCardPayment(
+ api,
+ paymentDetails,
+ emitResponse,
+ shouldSavePayment
+ )
),
// not sure if we need to disable this, but kept it as-is to ensure nothing breaks. Please consider passing all the deps.
// eslint-disable-next-line react-hooks/exhaustive-deps
diff --git a/client/checkout/blocks/saved-token-handler.js b/client/checkout/blocks/saved-token-handler.js
index a2e2b0ea339..2ec311c8d5e 100644
--- a/client/checkout/blocks/saved-token-handler.js
+++ b/client/checkout/blocks/saved-token-handler.js
@@ -7,7 +7,7 @@ export const SavedTokenHandler = ( {
api,
stripe,
elements,
- eventRegistration: { onCheckoutAfterProcessingWithSuccess },
+ eventRegistration: { onCheckoutSuccess },
emitResponse,
} ) => {
// Once the server has completed payment processing, confirm the intent of necessary.
@@ -15,7 +15,7 @@ export const SavedTokenHandler = ( {
api,
stripe,
elements,
- onCheckoutAfterProcessingWithSuccess,
+ onCheckoutSuccess,
emitResponse,
false // No need to save a payment that has already been saved.
);
diff --git a/client/checkout/blocks/upe-deferred-intent-creation/payment-elements.js b/client/checkout/blocks/upe-deferred-intent-creation/payment-elements.js
new file mode 100644
index 00000000000..36abca3728f
--- /dev/null
+++ b/client/checkout/blocks/upe-deferred-intent-creation/payment-elements.js
@@ -0,0 +1,85 @@
+/**
+ * Internal dependencies
+ */
+import { getAppearance } from 'wcpay/checkout/upe-styles';
+import { getUPEConfig } from 'wcpay/utils/checkout';
+import { useFingerprint } from '../hooks';
+import { LoadableBlock } from 'wcpay/components/loadable';
+import { Elements } from '@stripe/react-stripe-js';
+import { useEffect, useState } from 'react';
+import PaymentProcessor from './payment-processor';
+import { getPaymentMethodTypes } from 'wcpay/checkout/utils/upe';
+
+const PaymentElements = ( { api, ...props } ) => {
+ const stripe = api.getStripeForUPE( props.paymentMethodId );
+ const [ errorMessage, setErrorMessage ] = useState( null );
+ const [ appearance, setAppearance ] = useState(
+ getUPEConfig( 'wcBlocksUPEAppearance' )
+ );
+ const [ fingerprint, fingerprintErrorMessage ] = useFingerprint();
+ const amount = Number( getUPEConfig( 'cartTotal' ) );
+ const currency = getUPEConfig( 'currency' ).toLowerCase();
+ const paymentMethodTypes = getPaymentMethodTypes( props.paymentMethodId );
+
+ useEffect( () => {
+ async function generateUPEAppearance() {
+ // Generate UPE input styles.
+ const upeAppearance = getAppearance( true );
+ await api.saveUPEAppearance( upeAppearance, 'true' );
+ setAppearance( upeAppearance );
+ }
+
+ if ( ! appearance ) {
+ generateUPEAppearance();
+ }
+
+ if ( fingerprintErrorMessage ) {
+ setErrorMessage( fingerprintErrorMessage );
+ }
+ }, [
+ api,
+ appearance,
+ fingerprint,
+ fingerprintErrorMessage,
+ props.paymentMethodId,
+ ] );
+
+ return (
+
+
+
+
+ );
+};
+
+export const getDeferredIntentCreationUPEFields = (
+ upeName,
+ upeMethods,
+ api,
+ testingInstructions
+) => {
+ return (
+
+
} A promise that resolves with the created Stripe payment method.
*/
-function createStripePaymentMethod( api, elements ) {
- return api.getStripe().createPaymentMethod( {
- elements,
- params: {
+function createStripePaymentMethod(
+ api,
+ elements,
+ jQueryForm,
+ paymentMethodType
+) {
+ let params = {};
+ if ( jQueryForm.attr( 'name' ) === 'checkout' ) {
+ params = {
billing_details: {
name: document.querySelector( '#billing_first_name' )
? (
document.querySelector( '#billing_first_name' )
- .value +
+ ?.value +
' ' +
- document.querySelector( '#billing_last_name' ).value
+ document.querySelector( '#billing_last_name' )
+ ?.value
).trim()
: undefined,
- email: document.querySelector( '#billing_email' ).value,
- phone: document.querySelector( '#billing_phone' ).value,
+ email: document.querySelector( '#billing_email' )?.value,
+ phone: document.querySelector( '#billing_phone' )?.value,
address: {
- city: document.querySelector( '#billing_city' ).value,
- country: document.querySelector( '#billing_country' ).value,
- line1: document.querySelector( '#billing_address_1' ).value,
- line2: document.querySelector( '#billing_address_2' ).value,
+ city: document.querySelector( '#billing_city' )?.value,
+ country: document.querySelector( '#billing_country' )
+ ?.value,
+ line1: document.querySelector( '#billing_address_1' )
+ ?.value,
+ line2: document.querySelector( '#billing_address_2' )
+ ?.value,
postal_code: document.querySelector( '#billing_postcode' )
- .value,
- state: document.querySelector( '#billing_state' ).value,
+ ?.value,
+ state: document.querySelector( '#billing_state' )?.value,
},
},
- },
- } );
+ };
+ }
+
+ return api
+ .getStripeForUPE( paymentMethodType )
+ .createPaymentMethod( { elements, params: params } );
}
/**
@@ -130,16 +152,19 @@ function createStripePaymentMethod( api, elements ) {
*/
async function createStripePaymentElement( api, paymentMethodType ) {
const amount = Number( getUPEConfig( 'cartTotal' ) );
+ const paymentMethodTypes = getPaymentMethodTypes( paymentMethodType );
const options = {
- mode: 1 > amount ? 'setup' : 'payment',
+ mode: amount < 1 ? 'setup' : 'payment',
currency: getUPEConfig( 'currency' ).toLowerCase(),
amount: amount,
paymentMethodCreation: 'manual',
- paymentMethodTypes: [ paymentMethodType ],
+ paymentMethodTypes: paymentMethodTypes,
appearance: initializeAppearance( api ),
};
- const elements = api.getStripe().elements( options );
+ const elements = api
+ .getStripeForUPE( paymentMethodType )
+ .elements( options );
const createdStripePaymentElement = elements.create( 'payment', {
...getUpeSettings(),
wallets: {
@@ -155,6 +180,52 @@ async function createStripePaymentElement( api, paymentMethodType ) {
return createdStripePaymentElement;
}
+/**
+ * Appends a hidden input field with the confirmed setup intent ID to the provided form.
+ *
+ * @param {HTMLElement} form The HTML form element to which the input field will be appended.
+ * @param {Object} confirmedIntent The confirmed setup intent object containing the ID to be stored in the input field.
+ */
+function appendSetupIntentToForm( form, confirmedIntent ) {
+ const input = document.createElement( 'input' );
+ input.type = 'hidden';
+ input.id = 'wcpay-setup-intent';
+ input.name = 'wcpay-setup-intent';
+ input.value = confirmedIntent.id;
+
+ form.append( input );
+}
+
+/**
+ * If Link is enabled, add event listeners and handlers.
+ *
+ * @param {Object} api WCPayAPI instance.
+ */
+export function maybeEnableStripeLink( api ) {
+ if ( isLinkEnabled( getUPEConfig( 'paymentMethodsConfig' ) ) ) {
+ enableStripeLinkPaymentMethod( {
+ api: api,
+ elements: gatewayUPEComponents.card.elements,
+ emailId: 'billing_email',
+ complete_billing: () => {
+ return true;
+ },
+ complete_shipping: () => {
+ return (
+ document.getElementById(
+ 'ship-to-different-address-checkbox'
+ ) &&
+ document.getElementById(
+ 'ship-to-different-address-checkbox'
+ ).checked
+ );
+ },
+ shipping_fields: SHORTCODE_SHIPPING_ADDRESS_FIELDS,
+ billing_fields: SHORTCODE_BILLING_ADDRESS_FIELDS,
+ } );
+ }
+}
+
/**
* Mounts the existing Stripe Payment Element to the DOM element.
* Creates the Stipe Payment Element instance if it doesn't exist and mounts it to the DOM element.
@@ -172,13 +243,65 @@ export async function mountStripePaymentElement( api, domElement ) {
showErrorCheckout( error.message );
return;
}
+
+ /*
+ * Trigger this event to ensure the tokenization-form.js init
+ * is executed.
+ *
+ * This script handles the radio input interaction when toggling
+ * between the user's saved card / entering new card details.
+ *
+ * Ref: https://github.com/woocommerce/woocommerce/blob/2429498/assets/js/frontend/tokenization-form.js#L109
+ */
+ const event = new Event( 'wc-credit-card-form-init' );
+ document.body.dispatchEvent( event );
+
const paymentMethodType = domElement.dataset.paymentMethodType;
+ if ( ! gatewayUPEComponents[ paymentMethodType ] ) {
+ return;
+ }
+
const upeElement =
gatewayUPEComponents[ paymentMethodType ].upeElement ||
( await createStripePaymentElement( api, paymentMethodType ) );
upeElement.mount( domElement );
}
+/**
+ * Creates and confirms a setup intent using the provided ID, then appends the confirmed setup intent to the given jQuery form.
+ *
+ * @param {Object} id Payment method object ID.
+ * @param {Object} $form The jQuery object for the form to which the confirmed setup intent will be appended.
+ * @param {Object} api The API object with the setupIntent method to create and confirm the setup intent.
+ *
+ * @return {Promise} A promise that resolves when the setup intent is confirmed and appended to the form.
+ */
+export const createAndConfirmSetupIntent = ( { id }, $form, api ) => {
+ return api.setupIntent( id ).then( function ( confirmedSetupIntent ) {
+ appendSetupIntentToForm( $form, confirmedSetupIntent );
+ } );
+};
+
+/**
+ * Updates the terms parameter in the Payment Element based on the "save payment information" checkbox.
+ *
+ * @param {Event} event The change event that triggers the function.
+ */
+export function renderTerms( event ) {
+ const isChecked = event.target.checked;
+ const value = isChecked ? 'always' : 'never';
+ const paymentMethodType = getSelectedUPEGatewayPaymentMethod();
+ if ( ! paymentMethodType ) {
+ return;
+ }
+ const upeElement = gatewayUPEComponents[ paymentMethodType ].upeElement;
+ if ( getUPEConfig( 'isUPEEnabled' ) && upeElement ) {
+ upeElement.update( {
+ terms: getTerms( getUPEConfig( 'paymentMethodsConfig' ), value ),
+ } );
+ }
+}
+
/**
* Handles the checkout process for the provided jQuery form and Stripe payment method type. The function blocks the
* form UI to prevent duplicate submission and validates the Stripe elements. It then creates a Stripe payment method
@@ -191,7 +314,12 @@ export async function mountStripePaymentElement( api, domElement ) {
* @return {boolean} return false to prevent the default form submission from WC Core.
*/
let hasCheckoutCompleted;
-export const checkout = ( api, jQueryForm, paymentMethodType ) => {
+export const processPayment = (
+ api,
+ jQueryForm,
+ paymentMethodType,
+ additionalActionsHandler = () => {}
+) => {
if ( hasCheckoutCompleted ) {
hasCheckoutCompleted = false;
return;
@@ -206,16 +334,24 @@ export const checkout = ( api, jQueryForm, paymentMethodType ) => {
await validateElements( elements );
const paymentMethodObject = await createStripePaymentMethod(
api,
- elements
+ elements,
+ jQueryForm,
+ paymentMethodType
);
appendFingerprintInputToForm( jQueryForm, fingerprint );
appendPaymentMethodIdToForm(
jQueryForm,
paymentMethodObject.paymentMethod.id
);
+ await additionalActionsHandler(
+ paymentMethodObject.paymentMethod,
+ jQueryForm,
+ api
+ );
hasCheckoutCompleted = true;
submitForm( jQueryForm );
} catch ( err ) {
+ hasCheckoutCompleted = false;
jQueryForm.removeClass( 'processing' ).unblock();
showErrorCheckout( err.message );
}
@@ -224,23 +360,3 @@ export const checkout = ( api, jQueryForm, paymentMethodType ) => {
// Prevent WC Core default form submission (see woocommerce/assets/js/frontend/checkout.js) from happening.
return false;
};
-
-/**
- * Updates the terms parameter in the Payment Element based on the "save payment information" checkbox.
- *
- * @param {Event} event The change event that triggers the function.
- */
-export function renderTerms( event ) {
- const isChecked = event.target.checked;
- const value = isChecked ? 'always' : 'never';
- const paymentMethodType = getSelectedUPEGatewayPaymentMethod();
- if ( ! paymentMethodType ) {
- return;
- }
- const upeElement = gatewayUPEComponents[ paymentMethodType ].upeElement;
- if ( getUPEConfig( 'isUPEEnabled' ) && upeElement ) {
- upeElement.update( {
- terms: getTerms( getUPEConfig( 'paymentMethodsConfig' ), value ),
- } );
- }
-}
diff --git a/client/checkout/classic/upe-deferred-intent-creation/test/stripe-checkout.test.js b/client/checkout/classic/upe-deferred-intent-creation/test/payment-processing.test.js
similarity index 59%
rename from client/checkout/classic/upe-deferred-intent-creation/test/stripe-checkout.test.js
rename to client/checkout/classic/upe-deferred-intent-creation/test/payment-processing.test.js
index da3084c4a87..87b258e8a2f 100644
--- a/client/checkout/classic/upe-deferred-intent-creation/test/stripe-checkout.test.js
+++ b/client/checkout/classic/upe-deferred-intent-creation/test/payment-processing.test.js
@@ -2,10 +2,11 @@
* Internal dependencies
*/
import {
- checkout,
+ createAndConfirmSetupIntent,
mountStripePaymentElement,
+ processPayment,
renderTerms,
-} from '../stripe-checkout';
+} from '../payment-processing';
import { getAppearance } from '../../../upe-styles';
import { getUPEConfig } from 'wcpay/utils/checkout';
import { getFingerprint } from 'wcpay/checkout/utils/fingerprint';
@@ -20,24 +21,28 @@ jest.mock( 'wcpay/checkout/utils/upe' );
jest.mock( 'wcpay/utils/checkout', () => {
return {
getUPEConfig: jest.fn( ( argument ) => {
- if ( 'paymentMethodsConfig' === argument ) {
+ if ( argument === 'paymentMethodsConfig' ) {
return {
card: {
label: 'Card',
+ forceNetworkSavedCards: true,
},
giropay: {
label: 'Giropay',
+ forceNetworkSavedCards: false,
},
ideal: {
label: 'iDEAL',
+ forceNetworkSavedCards: false,
},
sepa: {
label: 'SEPA',
+ forceNetworkSavedCards: false,
},
};
}
- if ( 'currency' === argument ) {
+ if ( argument === 'currency' ) {
return 'eur';
}
} ),
@@ -91,7 +96,7 @@ const mockCreatePaymentMethod = jest.fn( () => {
};
} );
-const mockGetStripe = jest.fn( () => {
+const mockGetStripeForUPE = jest.fn( () => {
return {
elements: mockElements,
createPaymentMethod: mockCreatePaymentMethod,
@@ -100,24 +105,41 @@ const mockGetStripe = jest.fn( () => {
const saveUPEAppearanceMock = jest.fn();
+const mockSetupIntentThen = jest.fn();
+const setupIntentMock = jest.fn( () => {
+ return {
+ then: mockSetupIntentThen,
+ };
+} );
+
const apiMock = {
saveUPEAppearance: saveUPEAppearanceMock,
- getStripe: mockGetStripe,
+ getStripeForUPE: mockGetStripeForUPE,
+ setupIntent: setupIntentMock,
};
-describe( 'Mount Stripe Payment Element', () => {
+describe( 'Stripe Payment Element mounting', () => {
+ let mockDomElement;
+
+ beforeEach( () => {
+ mockDomElement = document.createElement( 'div' );
+ } );
+
afterEach( () => {
jest.clearAllMocks();
} );
test( 'initializes the appearance when it is not set and saves it', async () => {
+ // Create a mock function to track the event dispatch for tokenization-form.js execution
+ const dispatchMock = jest.fn();
+ document.body.dispatchEvent = dispatchMock;
+
const appearanceMock = { backgroundColor: '#fff' };
getAppearance.mockReturnValue( appearanceMock );
getFingerprint.mockImplementation( () => {
return 'fingerprint';
} );
- const mockDomElement = document.createElement( 'div' );
mockDomElement.dataset.paymentMethodType = 'giropay';
mountStripePaymentElement( apiMock, mockDomElement );
@@ -127,6 +149,7 @@ describe( 'Mount Stripe Payment Element', () => {
expect( apiMock.saveUPEAppearance ).toHaveBeenCalledWith(
appearanceMock
);
+ expect( dispatchMock ).toHaveBeenCalled();
} );
} );
@@ -137,19 +160,39 @@ describe( 'Mount Stripe Payment Element', () => {
return 'fingerprint';
} );
getUPEConfig.mockImplementation( ( argument ) => {
- if ( 'currency' === argument ) {
+ if ( argument === 'currency' ) {
return 'eur';
}
- if ( 'upeAppearance' === argument ) {
+ if ( argument === 'upeAppearance' ) {
return {
backgroundColor: '#fff',
};
}
+
+ if ( argument === 'paymentMethodsConfig' ) {
+ return {
+ ideal: {
+ label: 'iDEAL',
+ forceNetworkSavedCards: false,
+ },
+ card: {
+ label: 'Card',
+ forceNetworkSavedCards: true,
+ },
+ giropay: {
+ label: 'Giropay',
+ forceNetworkSavedCards: false,
+ },
+ sepa: {
+ label: 'SEPA',
+ forceNetworkSavedCards: false,
+ },
+ };
+ }
} );
- const mockDomElement = document.createElement( 'div' );
- mockDomElement.dataset.paymentMethodType = 'ideal';
+ mockDomElement.dataset.paymentMethodType = 'giropay';
mountStripePaymentElement( apiMock, mockDomElement );
@@ -170,7 +213,7 @@ describe( 'Mount Stripe Payment Element', () => {
expect( showErrorCheckout ).toHaveBeenCalledWith(
'No fingerprint'
);
- expect( apiMock.getStripe ).not.toHaveBeenCalled();
+ expect( apiMock.getStripeForUPE ).not.toHaveBeenCalled();
expect( mockElements ).not.toHaveBeenCalled();
expect( mockCreateFunction ).not.toHaveBeenCalled();
} );
@@ -181,13 +224,12 @@ describe( 'Mount Stripe Payment Element', () => {
return 'fingerprint';
} );
- const mockDomElement = document.createElement( 'div' );
mockDomElement.dataset.paymentMethodType = 'card';
mountStripePaymentElement( apiMock, mockDomElement );
await waitFor( () => {
- expect( apiMock.getStripe ).toHaveBeenCalled();
+ expect( apiMock.getStripeForUPE ).toHaveBeenCalled();
expect( mockElements ).toHaveBeenCalled();
expect( mockCreateFunction ).toHaveBeenCalled();
expect( mockMountFunction ).toHaveBeenCalled();
@@ -201,11 +243,11 @@ describe( 'Mount Stripe Payment Element', () => {
},
};
getUPEConfig.mockImplementation( ( argument ) => {
- if ( 'currency' === argument ) {
+ if ( argument === 'currency' ) {
return 'eur';
}
- if ( 'isUPEEnabled' === argument ) {
+ if ( argument === 'isUPEEnabled' ) {
return true;
}
} );
@@ -233,25 +275,55 @@ describe( 'Mount Stripe Payment Element', () => {
return 'fingerprint';
} );
- const mockDomElement = document.createElement( 'div' );
+ getUPEConfig.mockImplementation( ( argument ) => {
+ if ( argument === 'currency' ) {
+ return 'eur';
+ }
+
+ if ( argument === 'paymentMethodsConfig' ) {
+ return {
+ sepa: {
+ label: 'SEPA',
+ forceNetworkSavedCards: false,
+ },
+ };
+ }
+ } );
+
mockDomElement.dataset.paymentMethodType = 'sepa';
mountStripePaymentElement( apiMock, mockDomElement );
mountStripePaymentElement( apiMock, mockDomElement );
await waitFor( () => {
- expect( apiMock.getStripe ).toHaveBeenCalled();
+ expect( apiMock.getStripeForUPE ).toHaveBeenCalled();
expect( mockElements ).toHaveBeenCalledTimes( 1 );
} );
} );
} );
-describe( 'Checkout', () => {
+describe( 'Payment processing', () => {
+ beforeEach( () => {
+ getUPEConfig.mockImplementation( ( argument ) => {
+ if ( argument === 'currency' ) {
+ return 'eur';
+ }
+
+ if ( argument === 'paymentMethodsConfig' ) {
+ return {
+ card: {
+ label: 'card',
+ forceNetworkSavedCards: false,
+ },
+ };
+ }
+ } );
+ } );
afterEach( () => {
jest.clearAllMocks();
} );
- test( 'Successful checkout', async () => {
+ test( 'Successful payment processing', async () => {
setupBillingDetailsFields();
getFingerprint.mockImplementation( () => {
return 'fingerprint';
@@ -264,16 +336,20 @@ describe( 'Checkout', () => {
const mockJqueryForm = {
submit: jest.fn(),
- addClass: jest.fn( () => {
- return {
- block: jest.fn(),
- };
- } ),
- removeClass: jest.fn(),
- unblock: jest.fn(),
+ addClass: jest.fn( () => ( {
+ block: jest.fn(),
+ } ) ),
+ removeClass: jest.fn( () => ( {
+ unblock: jest.fn(),
+ } ) ),
+ attr: jest.fn().mockReturnValue( 'checkout' ),
};
- const checkoutResult = checkout( apiMock, mockJqueryForm, 'card' );
+ const checkoutResult = processPayment(
+ apiMock,
+ mockJqueryForm,
+ 'card'
+ );
expect( mockJqueryForm.addClass ).toHaveBeenCalledWith( 'processing' );
expect( mockJqueryForm.removeClass ).not.toHaveBeenCalledWith(
@@ -287,6 +363,102 @@ describe( 'Checkout', () => {
expect( checkoutResult ).toBe( false );
} );
+ test( 'Payment processing adds billing details for checkout', async () => {
+ setupBillingDetailsFields();
+ getFingerprint.mockImplementation( () => {
+ return 'fingerprint';
+ } );
+
+ const mockDomElement = document.createElement( 'div' );
+ mockDomElement.dataset.paymentMethodType = 'card';
+
+ await mountStripePaymentElement( apiMock, mockDomElement );
+
+ const checkoutForm = {
+ submit: jest.fn(),
+ addClass: jest.fn( () => ( {
+ block: jest.fn(),
+ } ) ),
+ removeClass: jest.fn( () => ( {
+ unblock: jest.fn(),
+ } ) ),
+ attr: jest.fn().mockReturnValue( 'checkout' ),
+ };
+
+ await processPayment( apiMock, checkoutForm, 'card' );
+
+ expect( mockCreatePaymentMethod ).toHaveBeenCalledWith( {
+ elements: expect.any( Object ),
+ params: {
+ billing_details: expect.any( Object ),
+ },
+ } );
+ } );
+
+ test( 'Payment processing does not create error when some fields are hidden via customizer', async () => {
+ setupBillingDetailsFields();
+ // pretending that the customizer removed the billing phone field
+ document.body.removeChild( document.getElementById( 'billing_phone' ) );
+ getFingerprint.mockImplementation( () => {
+ return 'fingerprint';
+ } );
+
+ const mockDomElement = document.createElement( 'div' );
+ mockDomElement.dataset.paymentMethodType = 'card';
+
+ await mountStripePaymentElement( apiMock, mockDomElement );
+
+ const checkoutForm = {
+ submit: jest.fn(),
+ addClass: jest.fn( () => ( {
+ block: jest.fn(),
+ } ) ),
+ removeClass: jest.fn( () => ( {
+ unblock: jest.fn(),
+ } ) ),
+ attr: jest.fn().mockReturnValue( 'checkout' ),
+ };
+
+ await processPayment( apiMock, checkoutForm, 'card' );
+
+ expect( mockCreatePaymentMethod ).toHaveBeenCalledWith( {
+ elements: expect.any( Object ),
+ params: {
+ billing_details: expect.any( Object ),
+ },
+ } );
+ } );
+
+ test( 'Payment processing does not add billing details for non-checkout forms', async () => {
+ setupBillingDetailsFields();
+ getFingerprint.mockImplementation( () => {
+ return 'fingerprint';
+ } );
+
+ const mockDomElement = document.createElement( 'div' );
+ mockDomElement.dataset.paymentMethodType = 'card';
+
+ await mountStripePaymentElement( apiMock, mockDomElement );
+
+ const addPaymentMethodForm = {
+ submit: jest.fn(),
+ addClass: jest.fn( () => ( {
+ block: jest.fn(),
+ } ) ),
+ removeClass: jest.fn( () => ( {
+ unblock: jest.fn(),
+ } ) ),
+ attr: jest.fn().mockReturnValue( 'add_payment_method' ),
+ };
+
+ await processPayment( apiMock, addPaymentMethodForm, 'card' );
+
+ expect( mockCreatePaymentMethod ).toHaveBeenCalledWith( {
+ elements: expect.any( Object ),
+ params: {},
+ } );
+ } );
+
function setupBillingDetailsFields() {
// Create DOM elements for the test
const firstNameInput = document.createElement( 'input' );
@@ -342,3 +514,30 @@ describe( 'Checkout', () => {
document.body.appendChild( stateInput );
}
} );
+
+describe( 'Setup intent creation and confirmation', () => {
+ test( 'Setup intent is created and confirmed', async () => {
+ const mockDomElement = document.createElement( 'div' );
+ mockDomElement.dataset.paymentMethodType = 'card';
+
+ const mockJqueryForm = {
+ submit: jest.fn(),
+ addClass: jest.fn( () => {
+ return {
+ block: jest.fn(),
+ };
+ } ),
+ removeClass: jest.fn(),
+ unblock: jest.fn(),
+ attr: jest.fn().mockReturnValue( 'add_payment_method' ),
+ };
+
+ await createAndConfirmSetupIntent(
+ mockJqueryForm,
+ { id: 'si123xyz' },
+ apiMock
+ );
+
+ expect( setupIntentMock ).toHaveBeenCalled();
+ } );
+} );
diff --git a/client/checkout/classic/upe-split.js b/client/checkout/classic/upe-split.js
index 38026f3ce14..87edf7333ff 100644
--- a/client/checkout/classic/upe-split.js
+++ b/client/checkout/classic/upe-split.js
@@ -19,7 +19,11 @@ import {
PAYMENT_METHOD_NAME_P24,
PAYMENT_METHOD_NAME_SEPA,
PAYMENT_METHOD_NAME_SOFORT,
-} from '../constants.js';
+ PAYMENT_METHOD_NAME_AFFIRM,
+ PAYMENT_METHOD_NAME_AFTERPAY,
+ SHORTCODE_SHIPPING_ADDRESS_FIELDS,
+ SHORTCODE_BILLING_ADDRESS_FIELDS,
+} from '../constants';
import { getUPEConfig } from 'utils/checkout';
import WCPayAPI from '../api';
import enqueueFraudScripts from 'fraud-scripts';
@@ -28,8 +32,11 @@ import {
getTerms,
getPaymentIntentFromSession,
getSelectedUPEGatewayPaymentMethod,
+ getBillingDetails,
+ getShippingDetails,
getUpeSettings,
isUsingSavedPaymentMethod,
+ isLinkEnabled,
} from '../utils/upe';
import { decryptClientSecret } from '../utils/encryption';
import enableStripeLinkPaymentMethod from '../stripe-link';
@@ -39,6 +46,7 @@ import {
getFingerprint,
appendFingerprintInputToForm,
} from '../utils/fingerprint';
+import PAYMENT_METHOD_IDS from 'wcpay/payment-methods/constants';
jQuery( function ( $ ) {
enqueueFraudScripts( getUPEConfig( 'fraudServices' ) );
@@ -48,9 +56,7 @@ jQuery( function ( $ ) {
const isUPEEnabled = getUPEConfig( 'isUPEEnabled' );
const isUPESplitEnabled = getUPEConfig( 'isUPESplitEnabled' );
const paymentMethodsConfig = getUPEConfig( 'paymentMethodsConfig' );
- const isStripeLinkEnabled =
- paymentMethodsConfig.link !== undefined &&
- paymentMethodsConfig.card !== undefined;
+ const isStripeLinkEnabled = isLinkEnabled( paymentMethodsConfig );
const gatewayUPEComponents = {};
for ( const paymentMethodType in paymentMethodsConfig ) {
@@ -108,33 +114,6 @@ jQuery( function ( $ ) {
$form.removeClass( 'processing' ).unblock();
};
- /**
- * Converts form fields object into Stripe `billing_details` object.
- *
- * @param {Object} fields Object mapping checkout billing fields to values.
- * @return {Object} Stripe formatted `billing_details` object.
- */
- const getBillingDetails = ( fields ) => {
- return {
- name:
- `${ fields.billing_first_name } ${ fields.billing_last_name }`.trim() ||
- '-',
- email:
- 'string' === typeof fields.billing_email
- ? fields.billing_email.trim()
- : '-',
- phone: fields.billing_phone || '-',
- address: {
- country: fields.billing_country || '-',
- line1: fields.billing_address_1 || '-',
- line2: fields.billing_address_2 || '-',
- city: fields.billing_city || '-',
- state: fields.billing_state || '-',
- postal_code: fields.billing_postcode || '-',
- },
- };
- };
-
/**
* Mounts Stripe UPE element if feature is enabled.
*
@@ -209,10 +188,12 @@ jQuery( function ( $ ) {
} catch ( error ) {
unblockUI( $upeContainer );
showErrorCheckout( error.message );
- const gatewayErrorMessage =
- 'An error was encountered when preparing the payment form. Please try again later.
';
+ const gatewayErrorMessage = __(
+ 'An error was encountered when preparing the payment form. Please try again later.',
+ 'woocommerce-payments'
+ );
$( '.payment_box.payment_method_woocommerce_payments' ).html(
- gatewayErrorMessage
+ `${ gatewayErrorMessage }
`
);
}
}
@@ -258,26 +239,8 @@ jQuery( function ( $ ) {
).checked
);
},
- shipping_fields: {
- line1: 'shipping_address_1',
- line2: 'shipping_address_2',
- city: 'shipping_city',
- state: 'shipping_state',
- postal_code: 'shipping_postcode',
- country: 'shipping_country',
- first_name: 'shipping_first_name',
- last_name: 'shipping_last_name',
- },
- billing_fields: {
- line1: 'billing_address_1',
- line2: 'billing_address_2',
- city: 'billing_city',
- state: 'billing_state',
- postal_code: 'billing_postcode',
- country: 'billing_country',
- first_name: 'billing_first_name',
- last_name: 'billing_last_name',
- },
+ shipping_fields: SHORTCODE_SHIPPING_ADDRESS_FIELDS,
+ billing_fields: SHORTCODE_BILLING_ADDRESS_FIELDS,
} );
}
@@ -292,7 +255,7 @@ jQuery( function ( $ ) {
unblockUI( $upeContainer );
upeElement.on( 'change', ( event ) => {
const selectedUPEPaymentType =
- 'link' !== event.value.type ? event.value.type : 'card';
+ event.value.type !== 'link' ? event.value.type : 'card';
gatewayUPEComponents[ selectedUPEPaymentType ].country =
event.value.country;
gatewayUPEComponents[ selectedUPEPaymentType ].isUPEComplete =
@@ -301,6 +264,41 @@ jQuery( function ( $ ) {
gatewayUPEComponents[ paymentMethodType ].upeElement = upeElement;
};
+ function togglePaymentMethodForCountry(
+ paymentMethodType,
+ supportedCountries
+ ) {
+ const billingCountry = document.querySelector( '#billing_country' )
+ .value;
+ const upeContainer = document.querySelector(
+ '#payment_method_woocommerce_payments_' + paymentMethodType
+ ).parentElement;
+ if ( supportedCountries.includes( billingCountry ) ) {
+ upeContainer.style.display = 'block';
+ } else {
+ upeContainer.style.display = 'none';
+ }
+ }
+
+ function restrictPaymentMethodToLocation( paymentMethodType ) {
+ const isRestrictedInAnyCountry = !! paymentMethodsConfig[
+ paymentMethodType
+ ].countries.length;
+
+ if ( isRestrictedInAnyCountry ) {
+ togglePaymentMethodForCountry(
+ paymentMethodType,
+ paymentMethodsConfig[ paymentMethodType ].countries
+ );
+ $( '#billing_country' ).on( 'change', function () {
+ togglePaymentMethodForCountry(
+ paymentMethodType,
+ paymentMethodsConfig[ paymentMethodType ].countries
+ );
+ } );
+ }
+ }
+
// Only attempt to mount the card element once that section of the page has loaded. We can use the updated_checkout
// event for this. This part of the page can also reload based on changes to checkout details, so we call unmount
// first to ensure the card element is re-mounted correctly.
@@ -326,6 +324,8 @@ jQuery( function ( $ ) {
} else {
mountUPEElement( paymentMethodType, upeDOMElement );
}
+
+ restrictPaymentMethodToLocation( paymentMethodType );
}
}
} );
@@ -445,6 +445,10 @@ jQuery( function ( $ ) {
);
if ( updateResponse.data ) {
+ if ( updateResponse.data.error ) {
+ throw updateResponse.data.error;
+ }
+
if ( api.handleDuplicatePayments( updateResponse.data ) ) {
return;
}
@@ -539,6 +543,12 @@ jQuery( function ( $ ) {
},
},
};
+ // Afterpay requires shipping details to be passed. Not needed by other payment methods.
+ if ( PAYMENT_METHOD_IDS.AFTERPAY_CLEARPAY === paymentMethodType ) {
+ upeConfig.confirmParams.shipping = getShippingDetails(
+ formFields
+ );
+ }
let error;
if ( response.payment_needed ) {
( { error } = await api.handlePaymentConfirmation(
@@ -577,7 +587,7 @@ jQuery( function ( $ ) {
);
// Boolean `true` means that there is nothing to confirm.
- if ( true === confirmation ) {
+ if ( confirmation === true ) {
return;
}
@@ -635,7 +645,7 @@ jQuery( function ( $ ) {
return clientSecret ? clientSecret : null;
}
- // Handle the checkout form when WooCommerce Payments is chosen.
+ // Handle the checkout form when WooPayments is chosen.
const wcpayPaymentMethods = [
PAYMENT_METHOD_NAME_BANCONTACT,
PAYMENT_METHOD_NAME_BECS,
@@ -645,6 +655,8 @@ jQuery( function ( $ ) {
PAYMENT_METHOD_NAME_P24,
PAYMENT_METHOD_NAME_SEPA,
PAYMENT_METHOD_NAME_SOFORT,
+ PAYMENT_METHOD_NAME_AFFIRM,
+ PAYMENT_METHOD_NAME_AFTERPAY,
paymentMethodsConfig.card !== undefined && PAYMENT_METHOD_NAME_CARD,
].filter( Boolean );
const checkoutEvents = wcpayPaymentMethods
@@ -664,15 +676,14 @@ jQuery( function ( $ ) {
appendFingerprintInputToForm( $( this ), fingerprint );
} );
- // Handle the add payment method form for WooCommerce Payments.
+ // Handle the add payment method form for WooPayments.
$( 'form#add_payment_method' ).on( 'submit', function () {
// Skip adding legacy cards as UPE payment methods.
if (
- 'woocommerce_payments' ===
- $(
- "#add_payment_method input:checked[name='payment_method']"
- ).val() &&
- '0' === isUPESplitEnabled
+ $(
+ "#add_payment_method input:checked[name='payment_method']"
+ ).val() === 'woocommerce_payments' &&
+ isUPESplitEnabled === '0'
) {
return;
}
@@ -687,12 +698,12 @@ jQuery( function ( $ ) {
}
} );
- // Handle the Pay for Order form if WooCommerce Payments is chosen.
+ // Handle the Pay for Order form if WooPayments is chosen.
$( '#order_review' ).on( 'submit', () => {
const paymentMethodType = getSelectedUPEGatewayPaymentMethod();
if (
! isUsingSavedPaymentMethod( paymentMethodType ) &&
- null !== paymentMethodType
+ paymentMethodType !== null
) {
if ( isChangingPayment ) {
handleUPEAddPayment( $( '#order_review' ) );
diff --git a/client/checkout/classic/upe.js b/client/checkout/classic/upe.js
index 749d443a93f..519a6f39b80 100644
--- a/client/checkout/classic/upe.js
+++ b/client/checkout/classic/upe.js
@@ -12,12 +12,21 @@ import './style.scss';
import {
PAYMENT_METHOD_NAME_CARD,
PAYMENT_METHOD_NAME_UPE,
-} from '../constants.js';
+ SHORTCODE_SHIPPING_ADDRESS_FIELDS,
+ SHORTCODE_BILLING_ADDRESS_FIELDS,
+} from '../constants';
import { getConfig, getCustomGatewayTitle } from 'utils/checkout';
import WCPayAPI from '../api';
import enqueueFraudScripts from 'fraud-scripts';
import { getFontRulesFromPage, getAppearance } from '../upe-styles';
-import { getTerms, getCookieValue, isWCPayChosen } from '../utils/upe';
+import {
+ getTerms,
+ getCookieValue,
+ isWCPayChosen,
+ isLinkEnabled,
+ getBillingDetails,
+ getShippingDetails,
+} from '../utils/upe';
import { decryptClientSecret } from '../utils/encryption';
import enableStripeLinkPaymentMethod from '../stripe-link';
import apiRequest from '../utils/request';
@@ -26,6 +35,7 @@ import {
getFingerprint,
appendFingerprintInputToForm,
} from '../utils/fingerprint';
+import PAYMENT_METHOD_IDS from 'wcpay/payment-methods/constants';
jQuery( function ( $ ) {
enqueueFraudScripts( getConfig( 'fraudServices' ) );
@@ -37,9 +47,7 @@ jQuery( function ( $ ) {
const enabledBillingFields = getConfig( 'enabledBillingFields' );
const upePaymentIntentData = getConfig( 'upePaymentIntentData' );
const upeSetupIntentData = getConfig( 'upeSetupIntentData' );
- const isStripeLinkEnabled =
- paymentMethodsConfig.link !== undefined &&
- paymentMethodsConfig.card !== undefined;
+ const isStripeLinkEnabled = isLinkEnabled( paymentMethodsConfig );
if ( ! publishableKey ) {
// If no configuration is present, probably this is not the checkout page.
@@ -145,38 +153,16 @@ jQuery( function ( $ ) {
$( '#wcpay_selected_upe_payment_type' ).val( paymentType );
};
+ // Get the selected UPE payment type field
+ const getSelectedUPEPaymentType = () => {
+ return $( '#wcpay_selected_upe_payment_type' ).val();
+ };
+
// Set the payment country field
const setPaymentCountry = ( country ) => {
$( '#wcpay_payment_country' ).val( country );
};
- /**
- * Converts form fields object into Stripe `billing_details` object.
- *
- * @param {Object} fields Object mapping checkout billing fields to values.
- * @return {Object} Stripe formatted `billing_details` object.
- */
- const getBillingDetails = ( fields ) => {
- return {
- name:
- `${ fields.billing_first_name } ${ fields.billing_last_name }`.trim() ||
- '-',
- email:
- 'string' === typeof fields.billing_email
- ? fields.billing_email.trim()
- : '-',
- phone: fields.billing_phone || '-',
- address: {
- country: fields.billing_country || '-',
- line1: fields.billing_address_1 || '-',
- line2: fields.billing_address_2 || '-',
- city: fields.billing_city || '-',
- state: fields.billing_state || '-',
- postal_code: fields.billing_postcode || '-',
- },
- };
- };
-
/**
* Mounts Stripe UPE element if feature is enabled.
*
@@ -236,10 +222,12 @@ jQuery( function ( $ ) {
} catch ( error ) {
unblockUI( $upeContainer );
showErrorCheckout( error.message );
- const gatewayErrorMessage =
- 'An error was encountered when preparing the payment form. Please try again later.
';
+ const gatewayErrorMessage = __(
+ 'An error was encountered when preparing the payment form. Please try again later.',
+ 'woocommerce-payments'
+ );
$( '.payment_box.payment_method_woocommerce_payments' ).html(
- gatewayErrorMessage
+ `${ gatewayErrorMessage }
`
);
}
}
@@ -285,26 +273,8 @@ jQuery( function ( $ ) {
).checked
);
},
- shipping_fields: {
- line1: 'shipping_address_1',
- line2: 'shipping_address_2',
- city: 'shipping_city',
- state: 'shipping_state',
- postal_code: 'shipping_postcode',
- country: 'shipping_country',
- first_name: 'shipping_first_name',
- last_name: 'shipping_last_name',
- },
- billing_fields: {
- line1: 'billing_address_1',
- line2: 'billing_address_2',
- city: 'billing_city',
- state: 'billing_state',
- postal_code: 'billing_postcode',
- country: 'billing_country',
- first_name: 'billing_first_name',
- last_name: 'billing_last_name',
- },
+ shipping_fields: SHORTCODE_SHIPPING_ADDRESS_FIELDS,
+ billing_fields: SHORTCODE_BILLING_ADDRESS_FIELDS,
} );
}
@@ -457,11 +427,15 @@ jQuery( function ( $ ) {
paymentIntentId,
orderId,
savePaymentMethod,
- $( '#wcpay_selected_upe_payment_type' ).val(),
+ getSelectedUPEPaymentType(),
$( '#wcpay_payment_country' ).val()
);
if ( updateResponse.data ) {
+ if ( updateResponse.data.error ) {
+ throw updateResponse.data.error;
+ }
+
if ( api.handleDuplicatePayments( updateResponse.data ) ) {
return;
}
@@ -556,6 +530,13 @@ jQuery( function ( $ ) {
},
},
};
+ const paymentMethodType = getSelectedUPEPaymentType();
+ // Afterpay requires shipping details to be passed. Not needed by other payment methods.
+ if ( PAYMENT_METHOD_IDS.AFTERPAY_CLEARPAY === paymentMethodType ) {
+ upeConfig.confirmParams.shipping = getShippingDetails(
+ formFields
+ );
+ }
let error;
if ( response.payment_needed ) {
( { error } = await api.handlePaymentConfirmation(
@@ -594,7 +575,7 @@ jQuery( function ( $ ) {
);
// Boolean `true` means that there is nothing to confirm.
- if ( true === confirmation ) {
+ if ( confirmation === true ) {
return;
}
@@ -683,7 +664,7 @@ jQuery( function ( $ ) {
return clientSecret ? clientSecret : null;
}
- // Handle the checkout form when WooCommerce Payments is chosen.
+ // Handle the checkout form when WooPayments is chosen.
const wcpayPaymentMethods = [
PAYMENT_METHOD_NAME_CARD,
PAYMENT_METHOD_NAME_UPE,
@@ -702,13 +683,12 @@ jQuery( function ( $ ) {
appendFingerprintInputToForm( $( this ), fingerprint );
} );
- // Handle the add payment method form for WooCommerce Payments.
+ // Handle the add payment method form for WooPayments.
$( 'form#add_payment_method' ).on( 'submit', function () {
if (
- 'woocommerce_payments' !==
$(
"#add_payment_method input:checked[name='payment_method']"
- ).val()
+ ).val() !== 'woocommerce_payments'
) {
return;
}
@@ -721,7 +701,7 @@ jQuery( function ( $ ) {
}
} );
- // Handle the Pay for Order form if WooCommerce Payments is chosen.
+ // Handle the Pay for Order form if WooPayments is chosen.
$( '#order_review' ).on( 'submit', () => {
if ( ! isUsingSavedPaymentMethod() && isWCPayChosen() ) {
if ( isChangingPayment ) {
@@ -770,10 +750,9 @@ jQuery( function ( $ ) {
*/
export function isUsingSavedPaymentMethod() {
return (
- null !==
- document.querySelector(
- '#wc-woocommerce_payments-payment-token-new'
- ) &&
+ document.querySelector(
+ '#wc-woocommerce_payments-payment-token-new'
+ ) !== null &&
! document.querySelector( '#wc-woocommerce_payments-payment-token-new' )
.checked
);
diff --git a/client/checkout/constants.js b/client/checkout/constants.js
index cd4bd2f942a..5b6c5468905 100644
--- a/client/checkout/constants.js
+++ b/client/checkout/constants.js
@@ -7,6 +7,9 @@ export const PAYMENT_METHOD_NAME_IDEAL = 'woocommerce_payments_ideal';
export const PAYMENT_METHOD_NAME_P24 = 'woocommerce_payments_p24';
export const PAYMENT_METHOD_NAME_SEPA = 'woocommerce_payments_sepa_debit';
export const PAYMENT_METHOD_NAME_SOFORT = 'woocommerce_payments_sofort';
+export const PAYMENT_METHOD_NAME_AFFIRM = 'woocommerce_payments_affirm';
+export const PAYMENT_METHOD_NAME_AFTERPAY =
+ 'woocommerce_payments_afterpay_clearpay';
export const PAYMENT_METHOD_NAME_UPE = 'woocommerce_payments_upe';
export const PAYMENT_METHOD_NAME_PAYMENT_REQUEST =
'woocommerce_payments_payment_request';
@@ -24,6 +27,49 @@ export function getPaymentMethodsConstants() {
PAYMENT_METHOD_NAME_P24,
PAYMENT_METHOD_NAME_SEPA,
PAYMENT_METHOD_NAME_SOFORT,
+ PAYMENT_METHOD_NAME_AFFIRM,
+ PAYMENT_METHOD_NAME_AFTERPAY,
PAYMENT_METHOD_NAME_CARD,
];
}
+
+export const BLOCKS_SHIPPING_ADDRESS_FIELDS = {
+ 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',
+ first_name: 'shipping-first_name',
+ last_name: 'shipping-last_name',
+};
+export const BLOCKS_BILLING_ADDRESS_FIELDS = {
+ 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',
+ first_name: 'billing-first_name',
+ last_name: 'billing-last_name',
+};
+export const SHORTCODE_SHIPPING_ADDRESS_FIELDS = {
+ line1: 'shipping_address_1',
+ line2: 'shipping_address_2',
+ city: 'shipping_city',
+ state: 'shipping_state',
+ postal_code: 'shipping_postcode',
+ country: 'shipping_country',
+ first_name: 'shipping_first_name',
+ last_name: 'shipping_last_name',
+};
+export const SHORTCODE_BILLING_ADDRESS_FIELDS = {
+ line1: 'billing_address_1',
+ line2: 'billing_address_2',
+ city: 'billing_city',
+ state: 'billing_state',
+ postal_code: 'billing_postcode',
+ country: 'billing_country',
+ first_name: 'billing_first_name',
+ last_name: 'billing_last_name',
+};
diff --git a/client/checkout/express-checkout-buttons.scss b/client/checkout/express-checkout-buttons.scss
new file mode 100644
index 00000000000..ef813873378
--- /dev/null
+++ b/client/checkout/express-checkout-buttons.scss
@@ -0,0 +1,16 @@
+.wcpay-payment-request-wrapper {
+ margin-top: 1em;
+ width: 100%;
+
+ &:first-child {
+ margin-top: 0;
+ }
+}
+
+.woocommerce-checkout .wcpay-payment-request-wrapper {
+ margin-bottom: 1.5em;
+}
+
+.wcpay-payment-request-wrapper > div:not( :last-child ) {
+ margin-bottom: 1em;
+}
diff --git a/client/checkout/preview.js b/client/checkout/preview.js
index e08721afa91..022bbe7ab84 100644
--- a/client/checkout/preview.js
+++ b/client/checkout/preview.js
@@ -15,7 +15,7 @@ export const isPreviewing = () => {
// Check for the URL parameter used in the iframe of the customize.php page
// and for the is_preview() value for posts.
return (
- null !== searchParams.get( 'customize_messenger_channel' ) ||
+ searchParams.get( 'customize_messenger_channel' ) !== null ||
getConfig( 'isPreview' )
);
};
diff --git a/client/checkout/stripe-link/index.js b/client/checkout/stripe-link/index.js
index 7ae0adde474..08ba006f814 100644
--- a/client/checkout/stripe-link/index.js
+++ b/client/checkout/stripe-link/index.js
@@ -1,7 +1,7 @@
const showLinkButton = ( linkAutofill ) => {
// Display StripeLink button if email field is prefilled.
const billingEmailInput = document.getElementById( 'billing_email' );
- if ( '' !== billingEmailInput.value ) {
+ if ( billingEmailInput.value !== '' ) {
const linkButtonTop =
billingEmailInput.offsetTop +
( billingEmailInput.offsetHeight - 40 ) / 2;
@@ -28,7 +28,7 @@ export const autofill = ( event, options ) => {
const fillWith = options.fill_field_method
? options.fill_field_method
: ( address, nodeId, key ) => {
- if ( null !== document.getElementById( nodeId ) ) {
+ if ( document.getElementById( nodeId ) !== null ) {
document.getElementById( nodeId ).value =
address.address[ key ];
}
diff --git a/client/checkout/upe-styles/index.js b/client/checkout/upe-styles/index.js
index 9787a00660b..3ab91f23211 100644
--- a/client/checkout/upe-styles/index.js
+++ b/client/checkout/upe-styles/index.js
@@ -259,13 +259,13 @@ export const getFieldStyles = ( selector, upeElement, focus = false ) => {
}
}
- if ( '.Input' === upeElement || '.Tab--selected' === upeElement ) {
+ if ( upeElement === '.Input' || upeElement === '.Tab--selected' ) {
const outline = generateOutlineStyle(
filteredStyles.outlineWidth,
filteredStyles.outlineStyle,
filteredStyles.outlineColor
);
- if ( '' !== outline ) {
+ if ( outline !== '' ) {
filteredStyles.outline = outline;
}
delete filteredStyles.outlineWidth;
@@ -277,9 +277,9 @@ export const getFieldStyles = ( selector, upeElement, focus = false ) => {
//since Stripe doesn't support text-indents.
const textIndent = styles.getPropertyValue( 'text-indent' );
if (
- '0px' !== textIndent &&
- '0px' === filteredStyles.paddingLeft &&
- '0px' === filteredStyles.paddingRight
+ textIndent !== '0px' &&
+ filteredStyles.paddingLeft === '0px' &&
+ filteredStyles.paddingRight === '0px'
) {
filteredStyles.paddingLeft = textIndent;
filteredStyles.paddingRight = textIndent;
@@ -302,7 +302,7 @@ export const getFontRulesFromPage = () => {
continue;
}
const url = new URL( sheets[ i ].href );
- if ( -1 !== fontDomains.indexOf( url.hostname ) ) {
+ if ( fontDomains.indexOf( url.hostname ) !== -1 ) {
fontRules.push( {
cssSrc: sheets[ i ].href,
} );
diff --git a/client/checkout/upe-styles/utils.js b/client/checkout/upe-styles/utils.js
index 36742d84b01..dc7878b4898 100644
--- a/client/checkout/upe-styles/utils.js
+++ b/client/checkout/upe-styles/utils.js
@@ -29,7 +29,7 @@ export const generateHoverColors = ( backgroundColor, color ) => {
// Darken if brightness > 50 (Storefront Button 51 ), else lighten
const newBackgroundColor =
- 50 < tinyBackgroundColor.getBrightness()
+ tinyBackgroundColor.getBrightness() > 50
? tinycolor( tinyBackgroundColor ).darken( 7 )
: tinycolor( tinyBackgroundColor ).lighten( 7 );
diff --git a/client/checkout/utils/encryption.js b/client/checkout/utils/encryption.js
index d980225f9d7..1bb59e94ed5 100644
--- a/client/checkout/utils/encryption.js
+++ b/client/checkout/utils/encryption.js
@@ -12,9 +12,9 @@ export const decryptClientSecret = function (
) {
if (
getConfig( 'isClientEncryptionEnabled' ) &&
- 3 < encryptedValue.length &&
- 'pi_' !== encryptedValue.slice( 0, 3 ) &&
- 'seti_' !== encryptedValue.slice( 0, 5 )
+ encryptedValue.length > 3 &&
+ encryptedValue.slice( 0, 3 ) !== 'pi_' &&
+ encryptedValue.slice( 0, 5 ) !== 'seti_'
) {
stripeAccountId = stripeAccountId || getConfig( 'accountId' );
return Utf8.stringify(
diff --git a/client/checkout/utils/fingerprint.js b/client/checkout/utils/fingerprint.js
index 101a177df10..d4b5f1f4087 100644
--- a/client/checkout/utils/fingerprint.js
+++ b/client/checkout/utils/fingerprint.js
@@ -1,11 +1,18 @@
/** @format */
+/**
+ * External dependencies
+ */
+import { __ } from '@wordpress/i18n';
+
/**
* Internal dependencies
*/
import FingerprintJS from '@fingerprintjs/fingerprintjs';
-export const FINGERPRINT_GENERIC_ERROR =
- 'An error was encountered when preparing the payment form. Please try again later.';
+export const FINGERPRINT_GENERIC_ERROR = __(
+ 'An error was encountered when preparing the payment form. Please try again later.',
+ 'woocommerce-payments'
+);
export const getFingerprint = async () => {
const agent = await FingerprintJS.load( { monitoring: false } );
diff --git a/client/checkout/utils/request.js b/client/checkout/utils/request.js
index 61c8478e4d8..0f50e1184bc 100644
--- a/client/checkout/utils/request.js
+++ b/client/checkout/utils/request.js
@@ -3,9 +3,9 @@ function createFormData( obj, subKeyStr = '', formData ) {
const value = obj[ key ];
const subKeyStrTrans = subKeyStr ? subKeyStr + '[' + key + ']' : key;
- if ( 'string' === typeof value || 'number' === typeof value ) {
+ if ( typeof value === 'string' || typeof value === 'number' ) {
formData.append( subKeyStrTrans, value );
- } else if ( 'object' === typeof value ) {
+ } else if ( typeof value === 'object' ) {
createFormData( value, subKeyStrTrans, formData );
}
}
diff --git a/client/checkout/utils/test/upe.test.js b/client/checkout/utils/test/upe.test.js
index 9e5ff54f56e..6251b97bb82 100644
--- a/client/checkout/utils/test/upe.test.js
+++ b/client/checkout/utils/test/upe.test.js
@@ -7,8 +7,14 @@ import {
isWCPayChosen,
getPaymentIntentFromSession,
generateCheckoutEventNames,
+ getUpeSettings,
+ getStripeElementOptions,
+ blocksShowLinkButtonHandler,
} from '../upe';
import { getPaymentMethodsConstants } from '../../constants';
+import { getUPEConfig } from 'wcpay/utils/checkout';
+
+jest.mock( 'wcpay/utils/checkout' );
jest.mock( '../../constants', () => {
return {
@@ -165,6 +171,96 @@ describe( 'UPE checkout utils', () => {
} );
} );
+ describe( 'getUPESettings', () => {
+ afterEach( () => {
+ const checkboxElement = document.getElementById(
+ 'wc-woocommerce_payments-new-payment-method'
+ );
+ if ( checkboxElement ) {
+ checkboxElement.remove();
+ }
+ } );
+
+ it( 'should not provide terms when cart does not contain subscriptions and the saving checkbox is unchecked', () => {
+ getUPEConfig.mockImplementation( ( argument ) => {
+ if ( argument === 'paymentMethodsConfig' ) {
+ return {
+ card: {
+ label: 'Card',
+ isReusable: true,
+ },
+ };
+ }
+
+ if ( argument === 'cartContainsSubscription' ) {
+ return false;
+ }
+ } );
+
+ createCheckboxElementWhich( false );
+
+ const upeSettings = getUpeSettings();
+
+ expect( upeSettings.terms.card ).toEqual( 'never' );
+ } );
+
+ it( 'should provide terms when cart does not contain subscriptions but the saving checkbox is checked', () => {
+ getUPEConfig.mockImplementation( ( argument ) => {
+ if ( argument === 'paymentMethodsConfig' ) {
+ return {
+ card: {
+ label: 'Card',
+ isReusable: true,
+ },
+ };
+ }
+
+ if ( argument === 'cartContainsSubscription' ) {
+ return false;
+ }
+ } );
+
+ createCheckboxElementWhich( true );
+
+ const upeSettings = getUpeSettings();
+
+ // console.log(result);
+ expect( upeSettings.terms.card ).toEqual( 'always' );
+ } );
+
+ it( 'should provide terms when cart contains subscriptions but the saving checkbox is unchecked', () => {
+ getUPEConfig.mockImplementation( ( argument ) => {
+ if ( argument === 'paymentMethodsConfig' ) {
+ return {
+ card: {
+ label: 'Card',
+ isReusable: true,
+ },
+ };
+ }
+
+ if ( argument === 'cartContainsSubscription' ) {
+ return true;
+ }
+ } );
+
+ createCheckboxElementWhich( false );
+ const upeSettings = getUpeSettings();
+
+ expect( upeSettings.terms.card ).toEqual( 'always' );
+ } );
+
+ function createCheckboxElementWhich( isChecked ) {
+ // Create the checkbox element
+ const checkboxElement = document.createElement( 'input' );
+ checkboxElement.type = 'checkbox';
+ checkboxElement.checked = isChecked;
+ checkboxElement.id = 'wc-woocommerce_payments-new-payment-method';
+
+ document.body.appendChild( checkboxElement );
+ }
+ } );
+
describe( 'generateCheckoutEventNames', () => {
it( 'should return empty string when there are no payment methods', () => {
getPaymentMethodsConstants.mockImplementation( () => [] );
@@ -188,3 +284,186 @@ describe( 'UPE checkout utils', () => {
} );
} );
} );
+
+describe( 'getStripeElementOptions', () => {
+ test( 'should return options with "always" terms for cart containing subscription', () => {
+ const shouldSavePayment = false;
+ getUPEConfig.mockImplementation( ( argument ) => {
+ if ( argument === 'cartContainsSubscription' ) {
+ return true;
+ }
+ } );
+ const paymentMethodsConfig = {
+ card: {
+ isReusable: true,
+ },
+ bancontact: {
+ isReusable: true,
+ },
+ eps: {
+ isReusable: true,
+ },
+ giropay: {
+ isReusable: false,
+ },
+ };
+
+ const options = getStripeElementOptions(
+ shouldSavePayment,
+ paymentMethodsConfig
+ );
+
+ expect( options ).toEqual( {
+ fields: {
+ billingDetails: {
+ address: {
+ city: 'never',
+ country: 'never',
+ line1: 'never',
+ line2: 'never',
+ postalCode: 'never',
+ state: 'never',
+ },
+ email: 'never',
+ name: 'never',
+ phone: 'never',
+ },
+ },
+ terms: { bancontact: 'always', card: 'always', eps: 'always' },
+ wallets: { applePay: 'never', googlePay: 'never' },
+ } );
+ } );
+
+ test( 'should return options with "always" terms when checkbox to save payment method is checked', () => {
+ const shouldSavePayment = true;
+ getUPEConfig.mockImplementation( ( argument ) => {
+ if ( argument === 'cartContainsSubscription' ) {
+ return false;
+ }
+ } );
+ const paymentMethodsConfig = {
+ card: {
+ isReusable: true,
+ },
+ bancontact: {
+ isReusable: true,
+ },
+ eps: {
+ isReusable: true,
+ },
+ giropay: {
+ isReusable: false,
+ },
+ };
+
+ const options = getStripeElementOptions(
+ shouldSavePayment,
+ paymentMethodsConfig
+ );
+
+ expect( options ).toEqual( {
+ fields: {
+ billingDetails: {
+ address: {
+ city: 'never',
+ country: 'never',
+ line1: 'never',
+ line2: 'never',
+ postalCode: 'never',
+ state: 'never',
+ },
+ email: 'never',
+ name: 'never',
+ phone: 'never',
+ },
+ },
+ terms: { bancontact: 'always', card: 'always', eps: 'always' },
+ wallets: { applePay: 'never', googlePay: 'never' },
+ } );
+ } );
+
+ test( 'should return options with "never" for terms when shouldSavePayment is false and no subscription in cart', () => {
+ const shouldSavePayment = false;
+ const paymentMethodsConfig = {
+ card: {
+ isReusable: true,
+ },
+ };
+
+ getUPEConfig.mockImplementation( ( argument ) => {
+ if ( argument === 'cartContainsSubscription' ) {
+ return false;
+ }
+ } );
+
+ const options = getStripeElementOptions(
+ shouldSavePayment,
+ paymentMethodsConfig
+ );
+
+ expect( options ).toEqual( {
+ fields: {
+ billingDetails: {
+ address: {
+ city: 'never',
+ country: 'never',
+ line1: 'never',
+ line2: 'never',
+ postalCode: 'never',
+ state: 'never',
+ },
+ email: 'never',
+ name: 'never',
+ phone: 'never',
+ },
+ },
+ terms: { card: 'never' },
+ wallets: { applePay: 'never', googlePay: 'never' },
+ } );
+ } );
+} );
+
+describe( 'blocksShowLinkButtonHandler', () => {
+ let container;
+ const autofill = {
+ launch: ( props ) => {
+ return props.email;
+ },
+ };
+
+ beforeEach( () => {
+ container = document.createElement( 'div' );
+ container.innerHTML = `
+ Email address
+ `;
+ document.body.appendChild( container );
+ } );
+
+ afterEach( () => {
+ document.body.removeChild( container );
+ container = null;
+ } );
+
+ test( 'should hide link button if email input is empty', () => {
+ blocksShowLinkButtonHandler( autofill );
+
+ const stripeLinkButton = document.querySelector(
+ '.wcpay-stripelink-modal-trigger'
+ );
+ expect( stripeLinkButton ).toBeDefined();
+ expect( stripeLinkButton.style.display ).toEqual( 'none' );
+ } );
+
+ test( 'should show link button if email input is present', () => {
+ document.getElementById( 'email' ).value = 'admin@example.com';
+
+ blocksShowLinkButtonHandler( autofill );
+
+ const stripeLinkButton = document.querySelector(
+ '.wcpay-stripelink-modal-trigger'
+ );
+ expect( stripeLinkButton ).toBeDefined();
+ expect( stripeLinkButton.style.display ).toEqual( 'inline-block' );
+ } );
+} );
diff --git a/client/checkout/utils/upe.js b/client/checkout/utils/upe.js
index 0a16b7def0c..da11bc2bfd7 100644
--- a/client/checkout/utils/upe.js
+++ b/client/checkout/utils/upe.js
@@ -2,7 +2,8 @@
* Internal dependencies
*/
import { getUPEConfig } from 'wcpay/utils/checkout';
-import { getPaymentMethodsConstants } from '../constants';
+import { WC_STORE_CART, getPaymentMethodsConstants } from '../constants';
+import { useDispatch, useSelect } from '@wordpress/data';
/**
* Generates terms parameter for UPE, with value set for reusable payment methods
@@ -85,11 +86,11 @@ export const getSelectedUPEGatewayPaymentMethod = () => {
const radio = document.querySelector(
'li.wc_payment_method input.input-radio:checked, li.woocommerce-PaymentMethod input.input-radio:checked'
);
- if ( null !== radio ) {
+ if ( radio !== null ) {
selectedGatewayId = radio.id;
}
- if ( 'payment_method_woocommerce_payments' === selectedGatewayId ) {
+ if ( selectedGatewayId === 'payment_method_woocommerce_payments' ) {
selectedGatewayId = 'payment_method_woocommerce_payments_card';
}
@@ -146,12 +147,13 @@ export const getHiddenBillingFields = ( enabledBillingFields ) => {
export const getUpeSettings = () => {
const upeSettings = {};
- if ( getUPEConfig( 'cartContainsSubscription' ) ) {
- upeSettings.terms = getTerms(
- getUPEConfig( 'paymentMethodsConfig' ),
- 'always'
- );
- }
+ const showTerms = shouldIncludeTerms() ? 'always' : 'never';
+
+ upeSettings.terms = getTerms(
+ getUPEConfig( 'paymentMethodsConfig' ),
+ showTerms
+ );
+
if (
getUPEConfig( 'isCheckout' ) &&
! (
@@ -168,6 +170,24 @@ export const getUpeSettings = () => {
return upeSettings;
};
+function shouldIncludeTerms() {
+ if ( getUPEConfig( 'cartContainsSubscription' ) ) {
+ return true;
+ }
+
+ const savePaymentMethodCheckbox = document.getElementById(
+ 'wc-woocommerce_payments-new-payment-method'
+ );
+ if (
+ savePaymentMethodCheckbox !== null &&
+ savePaymentMethodCheckbox.checked
+ ) {
+ return true;
+ }
+
+ return false;
+}
+
export const generateCheckoutEventNames = () => {
return getPaymentMethodsConstants()
.map( ( method ) => `checkout_place_order_${ method }` )
@@ -190,12 +210,214 @@ export function isUsingSavedPaymentMethod( paymentMethodType ) {
const prefix = '#wc-woocommerce_payments';
const suffix = '-payment-token-new';
const savedPaymentSelector =
- 'card' === paymentMethodType
+ paymentMethodType === 'card' || paymentMethodType === 'link'
? prefix + suffix
: prefix + '_' + paymentMethodType + suffix;
return (
- null !== document.querySelector( savedPaymentSelector ) &&
+ document.querySelector( savedPaymentSelector ) !== null &&
! document.querySelector( savedPaymentSelector ).checked
);
}
+
+/**
+ *
+ * Custom React hook that provides customer data and related functions for managing customer information.
+ * The hook retrieves customer data from the WC_STORE_CART selector and dispatches actions to modify billing and shipping addresses.
+ *
+ * @return {Object} An object containing customer data and functions for managing customer information.
+ */
+export const useCustomerData = () => {
+ const { customerData, isInitialized } = useSelect( ( select ) => {
+ const store = select( WC_STORE_CART );
+ return {
+ customerData: store.getCustomerData(),
+ isInitialized: store.hasFinishedResolution( 'getCartData' ),
+ };
+ } );
+ const {
+ setShippingAddress,
+ setBillingData,
+ setBillingAddress,
+ } = useDispatch( WC_STORE_CART );
+
+ return {
+ isInitialized,
+ billingData: customerData.billingData,
+ // Backward compatibility billingData/billingAddress
+ billingAddress: customerData.billingAddress,
+ shippingAddress: customerData.shippingAddress,
+ setBillingData,
+ // Backward compatibility setBillingData/setBillingAddress
+ setBillingAddress,
+ setShippingAddress,
+ };
+};
+
+/**
+ * Returns the prepared set of options needed to initialize the Stripe elements for UPE in Block Checkout.
+ * The initial options have all the fields set to 'never' to hide them from the UPE, because all the
+ * information is already collected in the checkout form. Additionally, the options are updated with
+ * the terms text if needed.
+ *
+ * @param {boolean} shouldSavePayment Whether the payment method should be saved.
+ * @param {Object} paymentMethodsConfig The payment methods config object.
+ *
+ * @return {Object} The options object for the Stripe elements.
+ */
+export const getStripeElementOptions = (
+ shouldSavePayment,
+ paymentMethodsConfig
+) => {
+ const options = {
+ fields: {
+ billingDetails: {
+ name: 'never',
+ email: 'never',
+ phone: 'never',
+ address: {
+ country: 'never',
+ line1: 'never',
+ line2: 'never',
+ city: 'never',
+ state: 'never',
+ postalCode: 'never',
+ },
+ },
+ },
+ wallets: {
+ applePay: 'never',
+ googlePay: 'never',
+ },
+ };
+
+ const showTerms =
+ shouldSavePayment || getUPEConfig( 'cartContainsSubscription' )
+ ? 'always'
+ : 'never';
+
+ options.terms = getTerms( paymentMethodsConfig, showTerms );
+
+ return options;
+};
+
+/**
+ * Check whether Stripe Link is enabled.
+ *
+ * @param {Object} paymentMethodsConfig Checkout payment methods configuration settings object.
+ * @return {boolean} True, if enabled; false otherwise.
+ */
+export const isLinkEnabled = ( paymentMethodsConfig ) => {
+ return (
+ paymentMethodsConfig.link !== undefined &&
+ paymentMethodsConfig.card !== undefined
+ );
+};
+
+/**
+ * Get array of payment method types to use with intent.
+ *
+ * @param {string} paymentMethodType Payment method type Stripe ID.
+ * @return {Array} Array of payment method types to use with intent.
+ */
+export const getPaymentMethodTypes = ( paymentMethodType ) => {
+ const paymentMethodTypes = [ paymentMethodType ];
+ if (
+ paymentMethodType === 'card' &&
+ isLinkEnabled( getUPEConfig( 'paymentMethodsConfig' ) )
+ ) {
+ paymentMethodTypes.push( 'link' );
+ }
+ return paymentMethodTypes;
+};
+
+/**
+ * Returns the value of the email input on the blocks checkout page.
+ *
+ * @return {string} The value of email input.
+ */
+export const getBlocksEmailValue = () => {
+ return document.getElementById( 'email' ).value;
+};
+
+/**
+ * Function to initialise Stripe Link button on email input field.
+ *
+ * @param {Object} linkAutofill Stripe Link Autofill instance.
+ */
+export const blocksShowLinkButtonHandler = ( linkAutofill ) => {
+ const emailInput = document.getElementById( 'email' );
+
+ const stripeLinkButton = document.createElement( 'button' );
+ stripeLinkButton.setAttribute( 'class', 'wcpay-stripelink-modal-trigger' );
+ stripeLinkButton.style.display = emailInput.value ? 'inline-block' : 'none';
+ stripeLinkButton.addEventListener( 'click', ( event ) => {
+ event.preventDefault();
+ linkAutofill.launch( {
+ email: document.getElementById( 'email' ).value,
+ } );
+ } );
+
+ emailInput.parentNode.appendChild( stripeLinkButton );
+};
+
+/**
+ * Converts form fields object into Stripe `billing_details` object.
+ *
+ * @param {Object} fields Object mapping checkout billing fields to values.
+ * @return {Object} Stripe formatted `billing_details` object.
+ */
+export const getBillingDetails = ( fields ) => {
+ return {
+ name:
+ `${ fields.billing_first_name } ${ fields.billing_last_name }`.trim() ||
+ '-',
+ email:
+ typeof fields.billing_email === 'string'
+ ? fields.billing_email.trim()
+ : '-',
+ phone: fields.billing_phone || '-',
+ address: {
+ country: fields.billing_country || '-',
+ line1: fields.billing_address_1 || '-',
+ line2: fields.billing_address_2 || '-',
+ city: fields.billing_city || '-',
+ state: fields.billing_state || '-',
+ postal_code: fields.billing_postcode || '-',
+ },
+ };
+};
+
+/**
+ * Converts form fields object into Stripe `shipping` object.
+ *
+ * @param {Object} fields Object mapping checkout shipping fields to values.
+ * @return {Object} Stripe formatted `shipping` object.
+ */
+export const getShippingDetails = ( fields ) => {
+ // Shipping address is needed by Afterpay. If available, use shipping address, else fallback to billing address.
+ if (
+ fields.ship_to_different_address &&
+ fields.ship_to_different_address === '1'
+ ) {
+ return {
+ name:
+ `${ fields.shipping_first_name } ${ fields.shipping_last_name }`.trim() ||
+ '-',
+ address: {
+ country: fields.shipping_country || '-',
+ line1: fields.shipping_address_1 || '-',
+ line2: fields.shipping_address_2 || '-',
+ city: fields.shipping_city || '-',
+ state: fields.shipping_state || '-',
+ postal_code: fields.shipping_postcode || '-',
+ },
+ };
+ }
+
+ const billingAsShippingAddress = getBillingDetails( fields );
+ delete billingAsShippingAddress.email;
+ delete billingAsShippingAddress.phone;
+
+ return billingAsShippingAddress;
+};
diff --git a/client/checkout/woopay/email-input-iframe.js b/client/checkout/woopay/email-input-iframe.js
index b425e857813..47ae94dff85 100644
--- a/client/checkout/woopay/email-input-iframe.js
+++ b/client/checkout/woopay/email-input-iframe.js
@@ -6,7 +6,11 @@ import { getConfig } from 'wcpay/utils/checkout';
import wcpayTracks from 'tracks';
import request from '../utils/request';
import { buildAjaxURL } from '../../payment-request/utils';
-import { getTargetElement, validateEmail } from './utils';
+import {
+ getTargetElement,
+ validateEmail,
+ appendRedirectionParams,
+} from './utils';
export const handleWooPayEmailInput = async (
field,
@@ -70,10 +74,10 @@ export const handleWooPayEmailInput = async (
//Checks if customer has clicked the back button to prevent auto redirect
const searchParams = new URLSearchParams( window.location.search );
const customerClickedBackButton =
- ( 'undefined' !== typeof performance &&
- 'back_forward' ===
- performance.getEntriesByType( 'navigation' )[ 0 ].type ) ||
- 'true' === searchParams.get( 'skip_woopay' );
+ ( typeof performance !== 'undefined' &&
+ performance.getEntriesByType( 'navigation' )[ 0 ].type ===
+ 'back_forward' ) ||
+ searchParams.get( 'skip_woopay' ) === 'true';
// Track the current state of the header. This default
// value should match the default state on the platform.
@@ -124,11 +128,11 @@ export const handleWooPayEmailInput = async (
* scroll the window so the iframe is in view.
*/
if (
- 0 >= iframe.getBoundingClientRect().top ||
- 0 >=
- window.innerHeight -
- ( iframe.getBoundingClientRect().height +
- iframe.getBoundingClientRect().top )
+ iframe.getBoundingClientRect().top <= 0 ||
+ window.innerHeight -
+ ( iframe.getBoundingClientRect().height +
+ iframe.getBoundingClientRect().top ) <=
+ 0
) {
const topOffset = 50;
const scrollTop =
@@ -163,8 +167,8 @@ export const handleWooPayEmailInput = async (
// Check if the iframe is off the right edge of the screen. If so, stick it to the right edge of the window.
if (
- 50 >=
- window.innerWidth - ( anchorRect.right + iframeRect.width )
+ window.innerWidth - ( anchorRect.right + iframeRect.width ) <=
+ 50
) {
iframe.style.left = 'auto';
iframeArrow.style.left = 'auto';
@@ -182,6 +186,23 @@ export const handleWooPayEmailInput = async (
// Set the initial value.
iframeHeaderValue = true;
+ request(
+ buildAjaxURL( getConfig( 'wcAjaxUrl' ), 'get_woopay_session' ),
+ {
+ _ajax_nonce: getConfig( 'woopaySessionNonce' ),
+ }
+ ).then( ( response ) => {
+ if ( response?.data?.session ) {
+ iframe.contentWindow.postMessage(
+ {
+ action: 'setSessionData',
+ value: response,
+ },
+ getConfig( 'woopayHost' )
+ );
+ }
+ } );
+
getWindowSize();
window.addEventListener( 'resize', getWindowSize );
@@ -189,7 +210,11 @@ export const handleWooPayEmailInput = async (
window.addEventListener( 'resize', setPopoverPosition );
iframe.classList.add( 'open' );
- wcpayTracks.recordUserEvent( wcpayTracks.events.WOOPAY_OTP_START );
+ wcpayTracks.recordUserEvent(
+ wcpayTracks.events.WOOPAY_OTP_START,
+ [],
+ true
+ );
} );
// Add the iframe and iframe arrow to the wrapper.
@@ -243,6 +268,10 @@ export const handleWooPayEmailInput = async (
'viewport',
`${ viewportWidth }x${ viewportHeight }`
);
+ urlParams.append(
+ 'tracksUserIdentity',
+ JSON.stringify( getConfig( 'tracksUserIdentity' ) )
+ );
iframe.src = `${ getConfig(
'woopayHost'
@@ -262,7 +291,7 @@ export const handleWooPayEmailInput = async (
};
document.addEventListener( 'keyup', ( event ) => {
- if ( 'Escape' === event.key && closeIframe() ) {
+ if ( event.key === 'Escape' && closeIframe() ) {
event.stopPropagation();
}
} );
@@ -355,7 +384,7 @@ export const handleWooPayEmailInput = async (
);
} )
.then( ( response ) => {
- if ( 200 !== response.status ) {
+ if ( response.status !== 200 ) {
showErrorMessage();
}
@@ -367,9 +396,11 @@ export const handleWooPayEmailInput = async (
if ( data[ 'user-exists' ] ) {
openIframe( email );
- } else if ( 'rest_invalid_param' !== data.code ) {
+ } else if ( data.code !== 'rest_invalid_param' ) {
wcpayTracks.recordUserEvent(
- wcpayTracks.events.WOOPAY_OFFERED
+ wcpayTracks.events.WOOPAY_OFFERED,
+ [],
+ true
);
}
} )
@@ -377,7 +408,7 @@ export const handleWooPayEmailInput = async (
// Only show the error if it's not an AbortError,
// it occur when the fetch request is aborted because user
// clicked the Place Order button while loading.
- if ( 'AbortError' !== err.name ) {
+ if ( err.name !== 'AbortError' ) {
showErrorMessage();
}
} )
@@ -457,9 +488,12 @@ export const handleWooPayEmailInput = async (
case 'auto_redirect_to_platform_checkout':
case 'auto_redirect_to_woopay':
hasCheckedLoginSession = true;
- api.initWooPay( '', e.data.platformCheckoutUserSession )
+ api.initWooPay(
+ e.data.userEmail,
+ e.data.platformCheckoutUserSession
+ )
.then( ( response ) => {
- if ( 'success' === response.result ) {
+ if ( response.result === 'success' ) {
loginSessionIframeWrapper.classList.add(
'woopay-login-session-iframe-wrapper'
);
@@ -485,7 +519,7 @@ export const handleWooPayEmailInput = async (
// Only show the error if it's not an AbortError,
// it occurs when the fetch request is aborted because user
// clicked the Place Order button while loading.
- if ( 'AbortError' !== err.name ) {
+ if ( err.name !== 'AbortError' ) {
showErrorMessage();
}
} )
@@ -497,10 +531,24 @@ export const handleWooPayEmailInput = async (
hasCheckedLoginSession = true;
closeLoginSessionIframe();
break;
+ case 'redirect_to_woopay_skip_session_init':
+ wcpayTracks.recordUserEvent(
+ wcpayTracks.events.WOOPAY_OTP_COMPLETE,
+ [],
+ true
+ );
+ if ( e.data.redirectUrl ) {
+ window.location = appendRedirectionParams(
+ e.data.redirectUrl
+ );
+ }
+ break;
case 'redirect_to_platform_checkout':
case 'redirect_to_woopay':
wcpayTracks.recordUserEvent(
- wcpayTracks.events.WOOPAY_OTP_COMPLETE
+ wcpayTracks.events.WOOPAY_OTP_COMPLETE,
+ [],
+ true
);
api.initWooPay(
woopayEmailInput.value,
@@ -513,7 +561,7 @@ export const handleWooPayEmailInput = async (
) {
return;
}
- if ( 'success' === response.result ) {
+ if ( response.result === 'success' ) {
window.location = response.url;
} else {
showErrorMessage();
@@ -527,14 +575,16 @@ export const handleWooPayEmailInput = async (
break;
case 'otp_validation_failed':
wcpayTracks.recordUserEvent(
- wcpayTracks.events.WOOPAY_OTP_FAILED
+ wcpayTracks.events.WOOPAY_OTP_FAILED,
+ [],
+ true
);
break;
case 'close_modal':
closeIframe();
break;
case 'iframe_height':
- if ( 300 < e.data.height ) {
+ if ( e.data.height > 300 ) {
if ( fullScreenModalBreakpoint <= window.innerWidth ) {
// attach iframe to right side of woopayEmailInput.
@@ -586,13 +636,17 @@ export const handleWooPayEmailInput = async (
dispatchUserExistEvent( true );
}, 2000 );
- wcpayTracks.recordUserEvent( wcpayTracks.events.WOOPAY_SKIPPED );
+ wcpayTracks.recordUserEvent(
+ wcpayTracks.events.WOOPAY_SKIPPED,
+ [],
+ true
+ );
searchParams.delete( 'skip_woopay' );
let { pathname } = window.location;
- if ( '' !== searchParams.toString() ) {
+ if ( searchParams.toString() !== '' ) {
pathname += '?' + searchParams.toString();
}
diff --git a/client/checkout/woopay/express-button/express-checkout-iframe.js b/client/checkout/woopay/express-button/express-checkout-iframe.js
index 3fadd23ab0c..95b49e62091 100644
--- a/client/checkout/woopay/express-button/express-checkout-iframe.js
+++ b/client/checkout/woopay/express-button/express-checkout-iframe.js
@@ -3,7 +3,13 @@
*/
import { __ } from '@wordpress/i18n';
import { getConfig } from 'utils/checkout';
-import { getTargetElement, validateEmail } from '../utils';
+import request from 'wcpay/checkout/utils/request';
+import { buildAjaxURL } from 'wcpay/payment-request/utils';
+import {
+ getTargetElement,
+ validateEmail,
+ appendRedirectionParams,
+} from '../utils';
import wcpayTracks from 'tracks';
export const expressCheckoutIframe = async ( api, context, emailSelector ) => {
@@ -86,6 +92,23 @@ export const expressCheckoutIframe = async ( api, context, emailSelector ) => {
// Set the initial value.
iframeHeaderValue = true;
+ request(
+ buildAjaxURL( getConfig( 'wcAjaxUrl' ), 'get_woopay_session' ),
+ {
+ _ajax_nonce: getConfig( 'woopaySessionNonce' ),
+ }
+ ).then( ( response ) => {
+ if ( response?.data?.session ) {
+ iframe.contentWindow.postMessage(
+ {
+ action: 'setSessionData',
+ value: response,
+ },
+ getConfig( 'woopayHost' )
+ );
+ }
+ } );
+
getWindowSize();
window.addEventListener( 'resize', getWindowSize );
@@ -93,7 +116,11 @@ export const expressCheckoutIframe = async ( api, context, emailSelector ) => {
window.addEventListener( 'resize', setPopoverPosition );
iframe.classList.add( 'open' );
- wcpayTracks.recordUserEvent( wcpayTracks.events.WOOPAY_OTP_START );
+ wcpayTracks.recordUserEvent(
+ wcpayTracks.events.WOOPAY_OTP_START,
+ [],
+ true
+ );
} );
// Add the iframe to the wrapper.
@@ -107,7 +134,7 @@ export const expressCheckoutIframe = async ( api, context, emailSelector ) => {
);
// Handle Blocks Cart and Checkout notices.
- if ( wcSettings.wcBlocksConfig && 'product' !== context ) {
+ if ( wcSettings.wcBlocksConfig && context !== 'product' ) {
// This handles adding the error notice to the cart page.
wp.data
.dispatch( 'core/notices' )
@@ -148,6 +175,9 @@ export const expressCheckoutIframe = async ( api, context, emailSelector ) => {
const closeIframe = () => {
window.removeEventListener( 'resize', getWindowSize );
window.removeEventListener( 'resize', setPopoverPosition );
+ window.removeEventListener( 'pageshow', onPageShow );
+ window.removeEventListener( 'message', onMessage );
+ document.removeEventListener( 'keyup', onKeyUp );
iframeWrapper.remove();
iframe.classList.remove( 'open' );
@@ -163,6 +193,10 @@ export const expressCheckoutIframe = async ( api, context, emailSelector ) => {
return;
}
+ window.addEventListener( 'pageshow', onPageShow );
+ window.addEventListener( 'message', onMessage );
+ document.addEventListener( 'keyup', onKeyUp );
+
const viewportWidth = window.document.documentElement.clientWidth;
const viewportHeight = window.document.documentElement.clientHeight;
@@ -186,6 +220,10 @@ export const expressCheckoutIframe = async ( api, context, emailSelector ) => {
'viewport',
`${ viewportWidth }x${ viewportHeight }`
);
+ urlParams.append(
+ 'tracksUserIdentity',
+ JSON.stringify( getConfig( 'tracksUserIdentity' ) )
+ );
iframe.src = `${ getConfig(
'woopayHost'
@@ -200,13 +238,7 @@ export const expressCheckoutIframe = async ( api, context, emailSelector ) => {
iframe.focus();
};
- document.addEventListener( 'keyup', ( event ) => {
- if ( 'Escape' === event.key && closeIframe() ) {
- event.stopPropagation();
- }
- } );
-
- window.addEventListener( 'message', ( e ) => {
+ function onMessage( e ) {
if ( ! getConfig( 'woopayHost' ).startsWith( e.origin ) ) {
return;
}
@@ -215,21 +247,37 @@ export const expressCheckoutIframe = async ( api, context, emailSelector ) => {
case 'otp_email_submitted':
userEmail = e.data.userEmail;
break;
+ case 'redirect_to_woopay_skip_session_init':
+ wcpayTracks.recordUserEvent(
+ wcpayTracks.events.WOOPAY_OTP_COMPLETE,
+ [],
+ true
+ );
+ if ( e.data.redirectUrl ) {
+ window.location = appendRedirectionParams(
+ e.data.redirectUrl
+ );
+ }
+ break;
case 'redirect_to_platform_checkout':
case 'redirect_to_woopay':
wcpayTracks.recordUserEvent(
- wcpayTracks.events.WOOPAY_OTP_COMPLETE
+ wcpayTracks.events.WOOPAY_OTP_COMPLETE,
+ [],
+ true
);
api.initWooPay(
- userEmail,
+ userEmail || e.data.userEmail,
e.data.platformCheckoutUserSession
).then( ( response ) => {
// Do nothing if the iframe has been closed.
if ( ! document.querySelector( '.woopay-otp-iframe' ) ) {
return;
}
- if ( 'success' === response.result ) {
- window.location = response.url;
+ if ( response.result === 'success' ) {
+ window.location = appendRedirectionParams(
+ response.url
+ );
} else {
showErrorMessage();
closeIframe( false );
@@ -238,14 +286,16 @@ export const expressCheckoutIframe = async ( api, context, emailSelector ) => {
break;
case 'otp_validation_failed':
wcpayTracks.recordUserEvent(
- wcpayTracks.events.WOOPAY_OTP_FAILED
+ wcpayTracks.events.WOOPAY_OTP_FAILED,
+ [],
+ true
);
break;
case 'close_modal':
closeIframe();
break;
case 'iframe_height':
- if ( 300 < e.data.height ) {
+ if ( e.data.height > 300 ) {
if ( fullScreenModalBreakpoint <= window.innerWidth ) {
// set height to given value
iframe.style.height = e.data.height + 'px';
@@ -264,14 +314,20 @@ export const expressCheckoutIframe = async ( api, context, emailSelector ) => {
default:
// do nothing, only respond to expected actions.
}
- } );
+ }
- window.addEventListener( 'pageshow', function ( event ) {
+ function onPageShow( event ) {
if ( event.persisted ) {
// Safari needs to close iframe with this.
closeIframe( false );
}
- } );
+ }
+
+ function onKeyUp( event ) {
+ if ( event.key === 'Escape' && closeIframe() ) {
+ event.stopPropagation();
+ }
+ }
openIframe( woopayEmailInput?.value );
};
diff --git a/client/checkout/woopay/express-button/index.js b/client/checkout/woopay/express-button/index.js
index 130e8b2b75e..8db44bea906 100644
--- a/client/checkout/woopay/express-button/index.js
+++ b/client/checkout/woopay/express-button/index.js
@@ -11,6 +11,7 @@ import { getConfig } from 'utils/checkout';
import { WoopayExpressCheckoutButton } from './woopay-express-checkout-button';
import WCPayAPI from '../../api';
import request from '../../utils/request';
+import '../../express-checkout-buttons.scss';
const renderWooPayExpressCheckoutButton = () => {
// Create an API object, which will be used throughout the checkout.
diff --git a/client/checkout/woopay/express-button/test/woopay-express-checkout-button.test.js b/client/checkout/woopay/express-button/test/woopay-express-checkout-button.test.js
index 3c4a0a651fc..7b67433e342 100644
--- a/client/checkout/woopay/express-button/test/woopay-express-checkout-button.test.js
+++ b/client/checkout/woopay/express-button/test/woopay-express-checkout-button.test.js
@@ -158,6 +158,7 @@ describe( 'WoopayExpressCheckoutButton', () => {
test( 'call `addToCart` and `expressCheckoutIframe` on express button click on product page', async () => {
useExpressCheckoutProductHandler.mockImplementation( () => ( {
addToCart: mockAddToCart,
+ getProductData: jest.fn().mockReturnValue( {} ),
isAddToCartDisabled: false,
} ) );
render(
@@ -186,5 +187,34 @@ describe( 'WoopayExpressCheckoutButton', () => {
);
} );
} );
+
+ test( 'do not call `addToCart` on express button click on product page when validation fails', async () => {
+ useExpressCheckoutProductHandler.mockImplementation( () => ( {
+ addToCart: mockAddToCart,
+ getProductData: jest.fn().mockReturnValue( false ),
+ isAddToCartDisabled: false,
+ } ) );
+ render(
+
{ text }
diff --git a/client/checkout/woopay/express-button/woopay-express-checkout-payment-method.js b/client/checkout/woopay/express-button/woopay-express-checkout-payment-method.js
index 68944f14333..94637e94988 100644
--- a/client/checkout/woopay/express-button/woopay-express-checkout-payment-method.js
+++ b/client/checkout/woopay/express-button/woopay-express-checkout-payment-method.js
@@ -34,7 +34,7 @@ const wooPayExpressCheckoutPaymentMethod = () => ( {
emailSelector="#email"
/>
),
- canMakePayment: () => 'undefined' !== typeof wcpayConfig,
+ canMakePayment: () => typeof wcpayConfig !== 'undefined',
paymentMethodId: PAYMENT_METHOD_NAME_WOOPAY_EXPRESS_CHECKOUT,
supports: {
features: getConfig( 'features' ),
diff --git a/client/checkout/woopay/index.js b/client/checkout/woopay/index.js
index 85f6f0b466a..1bb5eed4a58 100644
--- a/client/checkout/woopay/index.js
+++ b/client/checkout/woopay/index.js
@@ -26,14 +26,19 @@ const renderSaveUserSection = () => {
const checkoutPageSaveUserContainer = document.createElement(
'fieldset'
);
- checkoutPageSaveUserContainer.className =
- 'wc-block-checkout__payment-method wp-block-woocommerce-checkout-remember-block ' +
- 'wc-block-components-checkout-step wc-block-components-checkout-step--with-step-number';
- checkoutPageSaveUserContainer.id = 'remember-me';
-
const paymentOptions = document.getElementsByClassName(
'wp-block-woocommerce-checkout-payment-block'
)?.[ 0 ];
+ const isPaymentOptionsNumbered = paymentOptions?.classList?.contains(
+ 'wc-block-components-checkout-step--with-step-number'
+ );
+
+ checkoutPageSaveUserContainer.className =
+ 'wc-block-checkout__payment-method wp-block-woocommerce-checkout-remember-block ' +
+ `wc-block-components-checkout-step wc-block-components-checkout-step${
+ isPaymentOptionsNumbered ? '--with-step-number' : ''
+ }`;
+ checkoutPageSaveUserContainer.id = 'remember-me';
if ( paymentOptions ) {
// Render right after the payment options block, as a sibling element.
diff --git a/client/checkout/woopay/style.scss b/client/checkout/woopay/style.scss
index e1e14813932..79cff325e79 100644
--- a/client/checkout/woopay/style.scss
+++ b/client/checkout/woopay/style.scss
@@ -66,7 +66,7 @@
.woopay-otp-iframe {
transition: top 500ms;
width: 100%;
- height: 100vh;
+ height: 100dvh; /* stylelint-disable-line unit-no-unknown */
position: fixed;
top: 100%;
left: 0;
@@ -123,26 +123,27 @@
}
.woopay-express-button {
- font-size: 13px;
+ font-size: 11px;
font-weight: 500;
font-family: 'SF Pro Text', 'Helvetica Neue', 'Helvetica', 'Roboto', 'Arial',
sans-serif;
letter-spacing: 0.8px;
height: 40px;
- background: #f2deff;
- border: 1px solid $white;
- color: $studio-woocommerce-purple-60;
+ background: #f2deff !important;
+ border: 1px solid $white !important;
+ color: $studio-woocommerce-purple-60 !important;
width: 100%;
border-radius: 4px;
padding-top: 1px;
padding-bottom: 1px;
- display: flex;
+ display: flex !important;
align-items: center;
justify-content: center;
white-space: nowrap;
+ text-transform: none;
&:hover {
- background: #d9baff;
+ background: #d9baff !important;
cursor: pointer;
}
@@ -152,28 +153,46 @@
top: 1px;
}
+ &[data-type='buy'],
+ &[data-type='book'],
+ &[data-type='donate'] {
+ svg {
+ flex-shrink: 0.4;
+ margin-left: 3px;
+ }
+ }
+
+ &[data-width-type='wide'] {
+ font-size: 13px;
+
+ svg {
+ flex-shrink: 1;
+ margin-left: 6px;
+ }
+ }
+
&[data-theme='dark'] {
- background: $studio-woocommerce-purple-60;
- color: $white;
- border-color: $studio-woocommerce-purple-60;
+ background: $studio-woocommerce-purple-60 !important;
+ color: $white !important;
+ border-color: $studio-woocommerce-purple-60 !important;
svg {
fill: $white;
}
&:hover {
- background: #533582;
+ background: #533582 !important;
}
}
&[data-theme='light-outline'] {
- border-color: #674399;
+ border-color: #674399 !important;
&:hover {
- background: #d9baff;
+ background: #d9baff !important;
}
}
&[data-size='medium'] {
- font-size: 14px;
+ font-size: 12px;
height: 48px;
svg {
@@ -181,10 +200,32 @@
width: auto;
height: 27px;
}
+
+ &[data-type='buy'],
+ &[data-type='book'],
+ &[data-type='donate'] {
+ svg {
+ flex-shrink: 0.6;
+ margin-left: 3px;
+ }
+ }
+
+ &[data-width-type='wide'] {
+ font-size: 14px;
+
+ &[data-type='buy'],
+ &[data-type='book'],
+ &[data-type='donate'] {
+ svg {
+ flex-shrink: 1;
+ margin-left: 6px;
+ }
+ }
+ }
}
&[data-size='large'] {
- font-size: 16px;
+ font-size: 13px;
height: 56px;
svg {
@@ -192,17 +233,28 @@
width: auto;
height: 32px;
}
- }
- &[data-type='buy'],
- &[data-type='book'],
- &[data-type='donate'] {
- svg {
- margin-left: 6px;
- }
- &[data-size='large'] {
+ &[data-type='buy'],
+ &[data-type='book'],
+ &[data-type='donate'] {
svg {
- margin-left: 8px;
+ flex-shrink: 0.6;
+ margin-left: 3px;
+ margin-bottom: 0.25rem;
+ }
+ }
+
+ &[data-width-type='wide'] {
+ font-size: 16px;
+
+ &[data-type='buy'],
+ &[data-type='book'],
+ &[data-type='donate'] {
+ svg {
+ flex-shrink: 1;
+ margin-left: 8px;
+ margin-bottom: 0;
+ }
}
}
}
diff --git a/client/checkout/woopay/utils.js b/client/checkout/woopay/utils.js
index 48b25423d0b..a7b9a3a6152 100644
--- a/client/checkout/woopay/utils.js
+++ b/client/checkout/woopay/utils.js
@@ -39,3 +39,22 @@ export const validateEmail = ( value ) => {
/* eslint-enable */
return pattern.test( value );
};
+
+export const appendRedirectionParams = ( woopayUrl ) => {
+ const isPayForOrder = window.wcpayConfig.pay_for_order;
+ const orderId = window.wcpayConfig.order_id;
+ const key = window.wcpayConfig.key;
+ const billingEmail = window.wcpayConfig.billing_email;
+
+ if ( ! isPayForOrder || ! orderId || ! key ) {
+ return woopayUrl;
+ }
+
+ const url = new URL( woopayUrl );
+ url.searchParams.append( 'pay_for_order', isPayForOrder );
+ url.searchParams.append( 'order_id', orderId );
+ url.searchParams.append( 'key', key );
+ url.searchParams.append( 'billing_email', billingEmail );
+
+ return url.href;
+};
diff --git a/client/components/account-balances/balance-tooltip.tsx b/client/components/account-balances/balance-tooltip.tsx
index 61d24f0f0e5..5e7d37993a9 100644
--- a/client/components/account-balances/balance-tooltip.tsx
+++ b/client/components/account-balances/balance-tooltip.tsx
@@ -22,19 +22,9 @@ const BalanceTooltip: React.FC< BalanceTooltipProps > = ( {
-
-
-
+ buttonIcon={
-
- { __( 'Learn more', 'woocommerce-payments' ) }
-
-
- );
-};
const AccountFee = ( props ) => {
const { accountFee, paymentMethod } = props;
const baseFee = accountFee.base;
@@ -56,7 +43,7 @@ const AccountFees = ( props ) => {
let haveDiscounts = false;
const activeDiscounts = Object.entries( accountFees ).map(
( [ key, value ] ) => {
- if ( 0 === value.fee.discount.length ) {
+ if ( value.fee.discount.length === 0 ) {
return null;
}
haveDiscounts = true;
@@ -75,7 +62,6 @@ const AccountFees = ( props ) => {
{ __( 'Active discounts', 'woocommerce-payments' ) }
) }
{ activeDiscounts }
- { haveDiscounts &&
-
- Learn more
-
-
`;
@@ -96,15 +87,6 @@ exports[`AccountFees renders discounted fee with USD volume currency and non-USD
>
Discounted base fee expires after the first $1,000,000.00 of total payment volume.
-
-
- Learn more
-
-
`;
@@ -128,15 +110,6 @@ exports[`AccountFees renders discounted fee with end date 1`] = `
>
Discounted base fee expires on March 31, 2025.
-
-
- Learn more
-
-