diff --git a/changelog.txt b/changelog.txt index 47b937e8d1..421dbcdf42 100644 --- a/changelog.txt +++ b/changelog.txt @@ -1,6 +1,7 @@ *** Changelog *** = 10.0.0 - xxxx-xx-xx = +* Update - Removes frontend code related to Payment Request Buttons in the checkout page * Update - Disable Payment Request Buttons and ensure Express Checkout is used when express checkout buttons are enabled * Dev - Expands the Stripe Order Helper class to handle source ID, refund ID, intent ID, and setup intent ID metas * Update - Removing the `wc_stripe_is_upe_checkout_enabled` filter, as Legacy Checkout is no longer supported diff --git a/client/blocks/index.js b/client/blocks/index.js index 68a9e1ee9d..e2cb496450 100644 --- a/client/blocks/index.js +++ b/client/blocks/index.js @@ -1,12 +1,5 @@ -import { - registerPaymentMethod, - registerExpressPaymentMethod, -} from '@woocommerce/blocks-registry'; +import { registerPaymentMethod } from '@woocommerce/blocks-registry'; import stripeCcPaymentMethod from './credit-card'; -import paymentRequestPaymentMethod from './payment-request'; // Register Stripe Credit Card. registerPaymentMethod( stripeCcPaymentMethod ); - -// Register Stripe Payment Request. -registerExpressPaymentMethod( paymentRequestPaymentMethod ); diff --git a/client/blocks/payment-request/apple-pay-preview.js b/client/blocks/payment-request/apple-pay-preview.js deleted file mode 100644 index cc740802ca..0000000000 --- a/client/blocks/payment-request/apple-pay-preview.js +++ /dev/null @@ -1,2 +0,0 @@ -export const applePayImage = - "data:image/svg+xml,%3Csvg width='264' height='48' viewBox='0 0 264 48' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Crect width='264' height='48' rx='3' fill='black'/%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M125.114 16.6407C125.682 15.93 126.067 14.9756 125.966 14C125.135 14.0415 124.121 14.549 123.533 15.2602C123.006 15.8693 122.539 16.8641 122.661 17.7983C123.594 17.8797 124.526 17.3317 125.114 16.6407Z' fill='white'/%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M125.955 17.982C124.601 17.9011 123.448 18.7518 122.801 18.7518C122.154 18.7518 121.163 18.0224 120.092 18.0421C118.696 18.0629 117.402 18.8524 116.694 20.1079C115.238 22.6196 116.31 26.3453 117.726 28.3909C118.414 29.4028 119.242 30.5174 120.334 30.4769C121.366 30.4365 121.77 29.8087 123.024 29.8087C124.277 29.8087 124.641 30.4769 125.733 30.4567C126.865 30.4365 127.573 29.4443 128.261 28.4313C129.049 27.2779 129.373 26.1639 129.393 26.1027C129.373 26.0825 127.209 25.2515 127.189 22.7606C127.169 20.6751 128.888 19.6834 128.969 19.6217C127.998 18.1847 126.481 18.0224 125.955 17.982Z' fill='white'/%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M136.131 23.1804H138.834C140.886 23.1804 142.053 22.0752 142.053 20.1592C142.053 18.2432 140.886 17.1478 138.845 17.1478H136.131V23.1804ZM139.466 15.1582C142.411 15.1582 144.461 17.1903 144.461 20.1483C144.461 23.1172 142.369 25.1596 139.392 25.1596H136.131V30.3498H133.775V15.1582H139.466Z' fill='white'/%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M152.198 26.224V25.3712L149.579 25.5397C148.106 25.6341 147.339 26.182 147.339 27.14C147.339 28.0664 148.138 28.6667 149.39 28.6667C150.988 28.6667 152.198 27.6449 152.198 26.224ZM145.046 27.2032C145.046 25.2551 146.529 24.1395 149.263 23.971L152.198 23.7922V22.9498C152.198 21.7181 151.388 21.0442 149.947 21.0442C148.758 21.0442 147.896 21.6548 147.717 22.5916H145.592C145.656 20.6232 147.507 19.1914 150.01 19.1914C152.703 19.1914 154.459 20.602 154.459 22.7917V30.351H152.282V28.5298H152.229C151.609 29.719 150.241 30.4666 148.758 30.4666C146.571 30.4666 145.046 29.1612 145.046 27.2032Z' fill='white'/%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M156.461 34.4145V32.5934C156.608 32.6141 156.965 32.6354 157.155 32.6354C158.196 32.6354 158.785 32.1932 159.142 31.0564L159.353 30.3824L155.366 19.3281H157.827L160.604 28.298H160.657L163.434 19.3281H165.832L161.698 30.9402C160.752 33.6038 159.668 34.4778 157.376 34.4778C157.197 34.4778 156.618 34.4565 156.461 34.4145Z' fill='white'/%3E%3C/svg%3E%0A"; diff --git a/client/blocks/payment-request/branded-buttons.js b/client/blocks/payment-request/branded-buttons.js deleted file mode 100644 index eb637f150c..0000000000 --- a/client/blocks/payment-request/branded-buttons.js +++ /dev/null @@ -1,76 +0,0 @@ -import { useState, useEffect } from '@wordpress/element'; -import { getBlocksConfiguration } from 'wcstripe/blocks/utils'; - -export const shouldUseGooglePayBrand = () => { - const ua = window.navigator.userAgent.toLowerCase(); - const isChrome = - /chrome/.test( ua ) && - ! /edge|edg|opr|brave\//.test( ua ) && - window.navigator.vendor === 'Google Inc.'; - // newer versions of Brave do not have the userAgent string - const isBrave = isChrome && window.navigator.brave; - return isChrome && ! isBrave; -}; - -const useLocalizedGoogleSvg = ( type, theme, locale ) => { - // If we're using the short button type (i.e. logo only) make sure we get the logo only SVG. - const googlePlaySvg = - type === 'long' - ? `https://www.gstatic.com/instantbuy/svg/${ theme }/${ locale }.svg` - : `https://www.gstatic.com/instantbuy/svg/${ theme }_gpay.svg`; - - const [ url, setUrl ] = useState( googlePlaySvg ); - - useEffect( () => { - const im = document.createElement( 'img' ); - im.addEventListener( 'error', () => { - setUrl( - `https://www.gstatic.com/instantbuy/svg/${ theme }/en.svg` - ); - } ); - im.src = url; - }, [ url, theme ] ); - - return url; -}; - -export const GooglePayButton = ( { onButtonClicked } ) => { - const { - theme = 'dark', - locale = 'en', - height = '44', - } = getBlocksConfiguration()?.button; - - const allowedTypes = [ 'short', 'long' ]; - const { branded_type } = getBlocksConfiguration()?.button; // eslint-disable-line camelcase - const type = allowedTypes.includes( branded_type ) ? branded_type : 'long'; // eslint-disable-line camelcase - - // Allowed themes for Google Pay button image are 'dark' and 'light'. - // We may include 'light-outline' as a theme, so we ensure only 'dark' or 'light' are possible - // here. - const gpayButtonTheme = theme === 'dark' ? 'dark' : 'light'; - - // Let's make sure the localized Google Pay button exists, otherwise we fall back to the - // english version. This test element is not used on purpose. - const backgroundUrl = useLocalizedGoogleSvg( - type, - gpayButtonTheme, - locale - ); - - return ( - - ); -}; diff --git a/client/blocks/payment-request/event-handlers.js b/client/blocks/payment-request/event-handlers.js deleted file mode 100644 index 7eaf310941..0000000000 --- a/client/blocks/payment-request/event-handlers.js +++ /dev/null @@ -1,215 +0,0 @@ -import $ from 'jquery'; -import { - updateShippingOptions, - updateShippingDetails, - createOrder, -} from 'wcstripe/api/blocks'; -import { getBlocksConfiguration } from 'wcstripe/blocks/utils'; -import { - PAYMENT_INTENT_STATUS_REQUIRES_CAPTURE, - PAYMENT_INTENT_STATUS_SUCCEEDED, -} from 'wcstripe/stripe-utils/constants'; - -const shippingAddressChangeHandler = ( paymentRequestType ) => ( evt ) => { - const { shippingAddress } = evt; - - // Update the payment request shipping information address. - updateShippingOptions( shippingAddress, paymentRequestType ).then( - ( response ) => { - evt.updateWith( { - status: response.result, - shippingOptions: response.shipping_options, - total: response.total, - displayItems: response.displayItems, - } ); - } - ); -}; - -const shippingOptionChangeHandler = ( evt ) => { - const { shippingOption } = evt; - - // Update the shipping rates for the order. - updateShippingDetails( shippingOption ).then( ( response ) => { - if ( response.result === 'success' ) { - evt.updateWith( { - status: 'success', - total: response.total, - displayItems: response.displayItems, - } ); - } - - if ( response.result === 'fail' ) { - evt.updateWith( { status: 'fail' } ); - } - } ); -}; - -/** - * Helper function. Returns payment intent information from the provided URL. - * If no information is embedded in the URL this function returns `undefined`. - * - * @param {string} url - The url to check for partials. - * - * @return {Object|undefined} The object containing `type`, `clientSecret`, and - * `redirectUrl`. Undefined if no partails embedded in the url. - */ -const getRedirectUrlPartials = ( url ) => { - const partials = url.match( /^#?confirm-(pi|si)-([^:]+):(.+)$/ ); - - if ( ! partials || partials.length < 4 ) { - return undefined; - } - - const type = partials[ 1 ]; - const clientSecret = partials[ 2 ]; - const redirectUrl = decodeURIComponent( partials[ 3 ] ); - - return { - type, - clientSecret, - redirectUrl, - }; -}; - -/** - * Helper function. Requests that the provided intent (identified by the secret) is be - * handled by Stripe. Returns a promise from Stripe. - * - * @param {Object} stripe - The stripe object. - * @param {string} intentType - The type of intent. Either `pi` or `si`. - * @param {string} clientSecret - Client secret returned from Stripe. - * - * @return {Promise} A promise from Stripe with the confirmed intent or an error. - */ -const requestIntentConfirmation = ( stripe, intentType, clientSecret ) => { - const isSetupIntent = intentType === 'si'; - - if ( isSetupIntent ) { - return stripe.handleCardSetup( clientSecret ); - } - return stripe.handleCardPayment( clientSecret ); -}; - -/** - * Helper function. Returns the payment or setup intent from a given confirmed intent. - * - * @param {Object} intent - The confirmed intent. - * @param {string} intentType - The payment intent's type. Either `pi` or `si`. - * - * @return {Object} The Stripe payment or setup intent. - */ -const getIntentFromConfirmation = ( intent, intentType ) => { - const isSetupIntent = intentType === 'si'; - - if ( isSetupIntent ) { - return intent.setupIntent; - } - return intent.paymentIntent; -}; - -const doesIntentRequireCapture = ( intent ) => { - return intent.status === PAYMENT_INTENT_STATUS_REQUIRES_CAPTURE; -}; - -const didIntentSucceed = ( intent ) => { - return intent.status === PAYMENT_INTENT_STATUS_SUCCEEDED; -}; - -/** - * Helper function; part of a promise chain. - * Receives a possibly confirmed payment intent from Stripe and proceeds to charge the - * payment method of the intent was confirmed successfully. - * - * @param {string} redirectUrl - The URL to redirect to after a successful payment. - * @param {string} intentType - The type of the payment intent. Either `pi` or `si`. - */ -const handleIntentConfirmation = - ( redirectUrl, intentType ) => ( confirmation ) => { - if ( confirmation.error ) { - throw confirmation.error; - } - - const intent = getIntentFromConfirmation( confirmation, intentType ); - if ( - doesIntentRequireCapture( intent ) || - didIntentSucceed( intent ) - ) { - // If the 3DS verification was successful we can proceed with checkout as usual. - window.location = redirectUrl; - } - }; - -/** - * Helper function; part of a promise chain. - * Receives the response from our server after we attempt to create an order through - * our AJAX API, proceeds with payment if possible, otherwise attempts to confirm the - * payment (i.e. 3DS verification) through Stripe. - * - * @param {Object} stripe - The Stripe JS object. - * @param {Object} evt - The `source` event from the Stripe payment request button. - * @param {Function} setExpressPaymentError - Used to show error messages to the customer. - */ -const performPayment = - ( stripe, evt, setExpressPaymentError ) => ( createOrderResponse ) => { - if ( createOrderResponse.result === 'success' ) { - evt.complete( 'success' ); - - const partials = getRedirectUrlPartials( - createOrderResponse.redirect - ); - - // If no information is embedded in the URL that means the payment doesn't need - // verification and we can proceed as usual. - if ( ! partials || partials.length < 4 ) { - window.location = createOrderResponse.redirect; - return; - } - - const { type, clientSecret, redirectUrl } = partials; - - // The payment requires 3DS verification, so we try to take care of that here. - requestIntentConfirmation( stripe, type, clientSecret ) - .then( handleIntentConfirmation( redirectUrl, type ) ) - .catch( ( error ) => { - setExpressPaymentError( error.message ); - - // Report back to the server. - $.get( redirectUrl + '&is_ajax' ); - } ); - } else { - evt.complete( 'fail' ); - - // WooCommerce returns a message embedded in a notice via HTML here, so we need - // to extract the actual message from the notice. - const div = document.createElement( 'div' ); - div.innerHTML = createOrderResponse.messages; - const errorMessage = div?.firstElementChild?.textContent ?? ''; - - setExpressPaymentError( errorMessage ); - } - }; - -const paymentProcessingHandler = - ( stripe, paymentRequestType, setExpressPaymentError ) => ( evt ) => { - const allowPrepaidCards = - getBlocksConfiguration()?.stripe?.allow_prepaid_card === 'yes'; - - // Check if we allow prepaid cards. - if ( ! allowPrepaidCards && evt?.source?.card?.funding === 'prepaid' ) { - setExpressPaymentError( - getBlocksConfiguration()?.i18n?.no_prepaid_card - ); - } else { - // Create the order and attempt to pay. - createOrder( evt, paymentRequestType ).then( - performPayment( stripe, evt, setExpressPaymentError ) - ); - } - }; - -export { - shippingAddressChangeHandler, - shippingOptionChangeHandler, - paymentProcessingHandler, -}; diff --git a/client/blocks/payment-request/hooks.js b/client/blocks/payment-request/hooks.js deleted file mode 100644 index 3b74f3d787..0000000000 --- a/client/blocks/payment-request/hooks.js +++ /dev/null @@ -1,218 +0,0 @@ -import { - shippingAddressChangeHandler, - shippingOptionChangeHandler, - paymentProcessingHandler, -} from './event-handlers'; -import { displayLoginConfirmation } from './login-confirmation'; -import { useState, useEffect, useCallback } from '@wordpress/element'; -import { - getBlocksConfiguration, - createPaymentRequestUsingCart, - updatePaymentRequestUsingCart, -} from 'wcstripe/blocks/utils'; -import { getCartDetails } from 'wcstripe/api/blocks'; - -/** - * This hook takes care of creating a payment request and making sure - * you can pay through said payment request. - * - * @param {Object} stripe The stripe object used to create the payment request. - * @param {boolean} needsShipping A value from the Block checkout that indicates whether shipping - * is required or not. - * @param {Object} billing - The billing data from the checkout or cart block. - * - * @return {Array} An array; first element is the payment request; second element is the payment - * requests type. - */ -export const usePaymentRequest = ( stripe, needsShipping, billing ) => { - const [ paymentRequest, setPaymentRequest ] = useState( null ); - const [ paymentRequestType, setPaymentRequestType ] = useState( null ); - const [ isUpdatingPaymentRequest, setIsUpdatingPaymentRequest ] = - useState( false ); - - // Create a payment request if: - // a) Stripe object is loaded; and - // b) There is no payment request created already. - useEffect( () => { - if ( ! stripe ) { - return; - } - const createPaymentRequest = async () => { - const cart = await getCartDetails(); - const pr = createPaymentRequestUsingCart( stripe, cart ); - const result = await pr.canMakePayment(); - - if ( result ) { - setPaymentRequest( pr ); - setPaymentRequestType( () => { - if ( result.applePay ) { - return 'apple_pay'; - } - if ( result.googlePay ) { - return 'google_pay'; - } - return 'payment_request_api'; - } ); - } else { - setPaymentRequest( null ); - } - }; - createPaymentRequest(); - }, [ stripe, needsShipping ] ); - - useEffect( () => { - if ( ! paymentRequest ) { - return; - } - - const updatePaymentRequest = async () => { - setIsUpdatingPaymentRequest( true ); - const cart = await getCartDetails(); - updatePaymentRequestUsingCart( paymentRequest, cart ); - setIsUpdatingPaymentRequest( false ); - }; - updatePaymentRequest(); - }, [ - paymentRequest, - billing.cartTotal, - billing.cartTotalItems, - billing.currency.code, - ] ); - - return [ paymentRequest, paymentRequestType, isUpdatingPaymentRequest ]; -}; - -/** - * Returns an onClick handler for payment request buttons. Checks if login is required, resets - * the error state, syncs the payment request with the block, and calls the provided click handler. - * - * @param {string} paymentRequestType - The payment request type. - * @param {Function} setExpressPaymentError - Used to set the error state. - * @param {Function} onClick - The onClick function that should be called on click. - * - * @return {Function} An onClick handler for the payment request buttons. - */ -export const useOnClickHandler = ( - paymentRequestType, - setExpressPaymentError, - onClick -) => { - return useCallback( - ( evt, pr ) => { - // If login is required, display redirect confirmation dialog. - if ( getBlocksConfiguration()?.login_confirmation ) { - evt.preventDefault(); - displayLoginConfirmation( paymentRequestType ); - return; - } - - // Reset any Payment Request errors. - setExpressPaymentError( '' ); - - // Call the Blocks API `onClick` handler. - onClick(); - - // We must manually call payment request `show()` for custom buttons. - if ( pr ) { - pr.show(); - } - }, - [ paymentRequestType, setExpressPaymentError, onClick ] - ); -}; - -/** - * Adds a shipping address change event handler to the provided payment request. Updates the - * order's shipping address when necessary. - * - * @param {Object} paymentRequest - The payment request object. - * @param {string} paymentRequestType - The payment request type. - */ -export const useShippingAddressUpdateHandler = ( - paymentRequest, - paymentRequestType -) => { - useEffect( () => { - const handler = paymentRequest?.on( - 'shippingaddresschange', - shippingAddressChangeHandler( paymentRequestType ) - ); - - return () => { - // Need to use `?.` here in case paymentRequest is null. - handler?.removeEventListener( 'shippingaddresschange' ); - }; - }, [ paymentRequest, paymentRequestType ] ); -}; - -/** - * Adds a shipping option change event handler to the provided payment request. - * - * @param {Object} paymentRequest - The payment request object. - * @param {string} paymentRequestType - The payment request type. - */ -export const useShippingOptionChangeHandler = ( - paymentRequest, - paymentRequestType -) => { - useEffect( () => { - const handler = paymentRequest?.on( - 'shippingoptionchange', - shippingOptionChangeHandler - ); - - return () => { - // Need to use `?.` here in case paymentRequest is null. - handler?.removeEventListener( 'shippingoptionchange' ); - }; - }, [ paymentRequest, paymentRequestType ] ); -}; - -/** - * Adds a payment event handler to the provided payment request. - * - * @param {Object} stripe - The stripe object used to confirm and create a payment intent. - * @param {Object} paymentRequest - The payment request object. - * @param {string} paymentRequestType - The payment request type. - * @param {Function} setExpressPaymentError - A function used to expose an error message to show - * the customer. - */ -export const useProcessPaymentHandler = ( - stripe, - paymentRequest, - paymentRequestType, - setExpressPaymentError -) => { - useEffect( () => { - const handler = paymentRequest?.on( - 'paymentmethod', - paymentProcessingHandler( - stripe, - paymentRequestType, - setExpressPaymentError - ) - ); - - return () => { - // Need to use `?.` here in case paymentRequest is null. - handler?.removeEventListener( 'paymentmethod' ); - }; - }, [ stripe, paymentRequest, paymentRequestType, setExpressPaymentError ] ); -}; - -/** - * Adds a cancellation handler to the provided payment request. - * - * @param {Object} paymentRequest - The payment request object. - * @param {Function} onClose - A function from the Blocks API. - */ -export const useCancelHandler = ( paymentRequest, onClose ) => { - useEffect( () => { - const handler = paymentRequest?.on( 'cancel', onClose ); - - return () => { - // Need to use `?.` here in case paymentRequest is null. - handler?.removeEventListener( 'cancel' ); - }; - }, [ paymentRequest, onClose ] ); -}; diff --git a/client/blocks/payment-request/index.js b/client/blocks/payment-request/index.js deleted file mode 100644 index cc94731afd..0000000000 --- a/client/blocks/payment-request/index.js +++ /dev/null @@ -1,77 +0,0 @@ -import { PAYMENT_METHOD_NAME } from './constants'; -import { PaymentRequestExpress } from './payment-request-express'; -import { applePayImage } from './apple-pay-preview'; -import { __ } from '@wordpress/i18n'; -import { loadStripe } from 'wcstripe/blocks/load-stripe'; -import { - getBlocksConfiguration, - createPaymentRequestUsingCart, -} from 'wcstripe/blocks/utils'; - -const ApplePayPreview = () => ; - -const componentStripePromise = loadStripe(); - -const supports = { - features: getBlocksConfiguration()?.supports ?? [], -}; -if ( getBlocksConfiguration().isAdmin ?? false ) { - supports.style = getBlocksConfiguration()?.style ?? []; -} - -const paymentRequestPaymentMethod = { - name: PAYMENT_METHOD_NAME, - title: 'Stripe', - description: __( - 'This will show users the ApplePay, GooglePay, or Stripe Link button depending on their browser and logged in status.', - 'woocommerce-gateway-stripe' - ), - gatewayId: 'stripe', - content: , - edit: , - canMakePayment: ( cartData ) => { - // If in the editor context, always return true to display the `edit` prop preview. - // https://github.com/woocommerce/woocommerce-gutenberg-products-block/issues/4101. - if ( getBlocksConfiguration()?.isAdmin ?? false ) { - return true; - } - - if ( ! getBlocksConfiguration()?.shouldShowPaymentRequestButton ) { - return false; - } - - return loadStripe().then( ( stripe ) => { - // Create a payment request and check if we can make a payment to determine whether to - // show the Payment Request Button or not. This is necessary because a browser might be - // able to load the Stripe JS object, but not support Payment Requests. - const fakeCart = { - order_data: { - total: { - label: 'Total', - amount: parseInt( - cartData?.cartTotals?.total_price ?? 0, - 10 - ), - pending: true, - }, - currency: - cartData?.cartTotals?.currency_code?.toLowerCase(), - country_code: - getBlocksConfiguration()?.baseLocation?.country, - displayItems: [], - }, - shipping_required: false, - }; - const paymentRequest = createPaymentRequestUsingCart( - stripe, - fakeCart - ); - - return paymentRequest.canMakePayment(); - } ); - }, - paymentMethodId: 'stripe', - supports, -}; - -export default paymentRequestPaymentMethod; diff --git a/client/blocks/payment-request/login-confirmation.js b/client/blocks/payment-request/login-confirmation.js deleted file mode 100644 index bb670cfb81..0000000000 --- a/client/blocks/payment-request/login-confirmation.js +++ /dev/null @@ -1,32 +0,0 @@ -import { getBlocksConfiguration } from 'wcstripe/blocks/utils'; - -/** - * Displays a `confirm` dialog which leads to a redirect. - * - * @param {string} paymentRequestType Can be either apple_pay, google_pay or payment_request_api. - */ -export const displayLoginConfirmation = ( paymentRequestType ) => { - if ( ! getBlocksConfiguration()?.login_confirmation ) { - return; - } - - let message = getBlocksConfiguration()?.login_confirmation?.message; - - // Replace dialog text with specific payment request type "Apple Pay" or "Google Pay". - if ( paymentRequestType !== 'payment_request_api' ) { - message = message.replace( - /\*\*.*?\*\*/, - paymentRequestType === 'apple_pay' ? 'Apple Pay' : 'Google Pay' - ); - } - - // Remove asterisks from string. - message = message.replace( /\*\*/g, '' ); - - // eslint-disable-next-line no-alert, no-undef - if ( confirm( message ) ) { - // Redirect to my account page. - window.location.href = - getBlocksConfiguration()?.login_confirmation?.redirect_url; - } -}; diff --git a/client/blocks/payment-request/payment-request-express.js b/client/blocks/payment-request/payment-request-express.js deleted file mode 100644 index 28f49a5047..0000000000 --- a/client/blocks/payment-request/payment-request-express.js +++ /dev/null @@ -1,188 +0,0 @@ -import { - Elements, - PaymentRequestButtonElement, - useStripe, -} from '@stripe/react-stripe-js'; -import { GooglePayButton, shouldUseGooglePayBrand } from './branded-buttons'; -import { CustomButton } from './custom-button'; -import { - usePaymentRequest, - useProcessPaymentHandler, - useShippingAddressUpdateHandler, - useShippingOptionChangeHandler, - useOnClickHandler, - useCancelHandler, -} from './hooks'; -import { __ } from '@wordpress/i18n'; -import { useEffect } from '@wordpress/element'; -import { getBlocksConfiguration } from 'wcstripe/blocks/utils'; - -/** - * @typedef {import('../stripe-utils/type-defs').Stripe} Stripe - * @typedef {import('../stripe-utils/type-defs').StripePaymentRequest} StripePaymentRequest - * @typedef {import('@woocommerce/type-defs/registered-payment-method-props').RegisteredPaymentMethodProps} RegisteredPaymentMethodProps - */ - -/** - * @typedef {Object} WithStripe - * - * @property {Stripe} [stripe] Stripe api (might not be present) - */ - -/** - * @typedef {RegisteredPaymentMethodProps & WithStripe} StripeRegisteredPaymentMethodProps - */ - -/** - * PaymentRequestExpressComponent - * - * @param {StripeRegisteredPaymentMethodProps} props Incoming props - */ -const PaymentRequestExpressComponent = ( { - billing, - components, - shippingData, - onClick, - onClose, - setExpressPaymentError, - buttonAttributes, -} ) => { - const stripe = useStripe(); - const { needsShipping } = shippingData; - - /* Set up payment request and its event handlers. */ - const [ paymentRequest, paymentRequestType, isUpdatingPaymentRequest ] = - usePaymentRequest( stripe, needsShipping, billing ); - useShippingAddressUpdateHandler( paymentRequest, paymentRequestType ); - useShippingOptionChangeHandler( paymentRequest, paymentRequestType ); - useProcessPaymentHandler( - stripe, - paymentRequest, - paymentRequestType, - setExpressPaymentError - ); - const onPaymentRequestButtonClick = useOnClickHandler( - paymentRequestType, - setExpressPaymentError, - onClick - ); - useCancelHandler( paymentRequest, onClose ); - - useEffect( () => { - if ( paymentRequest ) { - const orderAttribution = window?.wc_order_attribution; - if ( orderAttribution ) { - orderAttribution.setOrderTracking( - orderAttribution.params.allowTracking - ); - } - } - }, [ paymentRequest ] ); - - // locale is not a valid value for the paymentRequestButton style. - // Make sure `theme` defaults to 'dark' if it's not found in the server provided configuration. - let { - type = 'default', - theme = 'dark', - height = '48', - } = getBlocksConfiguration()?.button; - - // If we are on the checkout block, we receive button attributes which overwrite the extension specific settings - if ( typeof buttonAttributes !== 'undefined' ) { - height = buttonAttributes.height || height; - } - - const paymentRequestButtonStyle = { - paymentRequestButton: { - type, - theme, - height: `${ height }px`, - }, - }; - const isBranded = getBlocksConfiguration()?.button?.is_branded; - const brandedType = getBlocksConfiguration()?.button?.branded_type; - const isCustom = getBlocksConfiguration()?.button?.is_custom; - - if ( ! paymentRequest ) { - return null; - } - - const { LoadingMask } = components; - - if ( isCustom ) { - return ( - - { - onPaymentRequestButtonClick( evt, paymentRequest ); - } } - /> - - ); - } - - if ( isBranded && shouldUseGooglePayBrand() ) { - return ( - - { - onPaymentRequestButtonClick( evt, paymentRequest ); - } } - /> - - ); - } - - if ( isBranded ) { - // Not implemented branded buttons default to Stripe's button. - // Apple Pay buttons can also fall back to Stripe's button, as it's already branded. - // Set button type to default or buy, depending on branded type, to avoid issues with Stripe. - paymentRequestButtonStyle.paymentRequestButton.type = - brandedType === 'long' ? 'buy' : 'default'; - } - - return ( - - - - ); -}; - -/** - * PaymentRequestExpress with stripe provider - * - * @param {StripeRegisteredPaymentMethodProps} props - */ -export const PaymentRequestExpress = ( props ) => { - const { stripe } = props; - return ( - - - - - ); -}; diff --git a/client/blocks/upe/index.js b/client/blocks/upe/index.js index 96936280d7..955cb76563 100644 --- a/client/blocks/upe/index.js +++ b/client/blocks/upe/index.js @@ -10,7 +10,6 @@ import { PAYMENT_METHOD_LINK, } from '../../stripe-utils/constants'; import { updateTokenLabelsWhenLoaded } from './token-label-updater.js'; -import paymentRequestPaymentMethod from 'wcstripe/blocks/payment-request'; import { expressCheckoutElementAmazonPay, expressCheckoutElementApplePay, @@ -59,25 +58,19 @@ Object.entries( paymentMethodsConfig ) registerPaymentMethod( upeElement( method, api, config ) ); } ); -if ( getBlocksConfiguration()?.isECEEnabled ) { - // Register Express Checkout Elements. - if ( - getBlocksConfiguration()?.isAmazonPayAvailable && // Hide behind feature flag so the editor does not show the button. - getBlocksConfiguration()?.isAmazonPayEnabled - ) { - registerExpressPaymentMethod( expressCheckoutElementAmazonPay( api ) ); - } - if ( getBlocksConfiguration()?.isPaymentRequestEnabled ) { - registerExpressPaymentMethod( expressCheckoutElementApplePay( api ) ); - registerExpressPaymentMethod( expressCheckoutElementGooglePay( api ) ); - } - if ( getBlocksConfiguration()?.isLinkEnabled ) { - registerExpressPaymentMethod( expressCheckoutElementStripeLink( api ) ); - } -} else { - // Register Stripe Payment Request. - // TODO: We can remove this once we're sure everyone on the new checkout (UPE) has been migrated to ECE. - registerExpressPaymentMethod( paymentRequestPaymentMethod ); +// Register Express Checkout Elements. +if ( + getBlocksConfiguration()?.isAmazonPayAvailable && // Hide behind feature flag so the editor does not show the button. + getBlocksConfiguration()?.isAmazonPayEnabled +) { + registerExpressPaymentMethod( expressCheckoutElementAmazonPay( api ) ); +} +if ( getBlocksConfiguration()?.isPaymentRequestEnabled ) { + registerExpressPaymentMethod( expressCheckoutElementApplePay( api ) ); + registerExpressPaymentMethod( expressCheckoutElementGooglePay( api ) ); +} +if ( getBlocksConfiguration()?.isLinkEnabled ) { + registerExpressPaymentMethod( expressCheckoutElementStripeLink( api ) ); } // Update token labels when the checkout form is loaded. diff --git a/client/entrypoints/amazon-pay-settings/amazon-pay-page.js b/client/entrypoints/amazon-pay-settings/amazon-pay-page.js index b6a99a309d..9df3c14c07 100644 --- a/client/entrypoints/amazon-pay-settings/amazon-pay-page.js +++ b/client/entrypoints/amazon-pay-settings/amazon-pay-page.js @@ -7,7 +7,7 @@ import SettingsSection from 'wcstripe/settings/settings-section'; import SettingsLayout from 'wcstripe/settings/settings-layout'; import LoadableSettingsSection from 'wcstripe/settings/loadable-settings-section'; import SaveSettingsSection from 'wcstripe/settings/save-settings-section'; -import '../payment-request-settings/style.scss'; +import '../express-checkout-settings/style.scss'; const EnableDescription = () => ( <> diff --git a/client/entrypoints/amazon-pay-settings/amazon-pay-settings-section.js b/client/entrypoints/amazon-pay-settings/amazon-pay-settings-section.js index baba2780a0..eedd2c8dbb 100644 --- a/client/entrypoints/amazon-pay-settings/amazon-pay-settings-section.js +++ b/client/entrypoints/amazon-pay-settings/amazon-pay-settings-section.js @@ -3,7 +3,7 @@ import React, { useMemo } from 'react'; import interpolateComponents from 'interpolate-components'; import { loadStripe } from '@stripe/stripe-js'; import styled from '@emotion/styled'; -import ExpressCheckoutPreviewComponent from './express-checkout-button-preview'; +import ExpressCheckoutPreviewComponent from './express-checkout-preview-component'; import { Card, RadioControl, diff --git a/client/entrypoints/amazon-pay-settings/express-checkout-button-preview.js b/client/entrypoints/amazon-pay-settings/express-checkout-preview-component.js similarity index 100% rename from client/entrypoints/amazon-pay-settings/express-checkout-button-preview.js rename to client/entrypoints/amazon-pay-settings/express-checkout-preview-component.js diff --git a/client/entrypoints/payment-request-settings/__tests__/payment-request-button-preview.test.js b/client/entrypoints/express-checkout-settings/__tests__/express-checkout-button-preview.test.js similarity index 89% rename from client/entrypoints/payment-request-settings/__tests__/payment-request-button-preview.test.js rename to client/entrypoints/express-checkout-settings/__tests__/express-checkout-button-preview.test.js index 36268bad7a..8a3558934d 100644 --- a/client/entrypoints/payment-request-settings/__tests__/payment-request-button-preview.test.js +++ b/client/entrypoints/express-checkout-settings/__tests__/express-checkout-button-preview.test.js @@ -1,7 +1,7 @@ import React from 'react'; import { render, screen } from '@testing-library/react'; import { useStripe } from '@stripe/react-stripe-js'; -import PaymentRequestsButtonPreview from '../payment-request-button-preview'; +import ExpressCheckoutButtonPreview from '../express-checkout-button-preview'; import { shouldUseGooglePayBrand } from '../utils/utils'; // We need to mock the actual module being used by `` in the `@wordpress/components` module @@ -30,7 +30,7 @@ jest.mock( 'wcstripe/data', () => ( { usePaymentRequestButtonTheme: jest.fn().mockReturnValue( [ 'dark' ] ), } ) ); -describe( 'PaymentRequestsButtonPreview', () => { +describe( 'ExpressCheckoutButtonPreview', () => { const canMakePaymentMock = jest.fn(); beforeEach( () => { @@ -50,7 +50,7 @@ describe( 'PaymentRequestsButtonPreview', () => { it( 'displays Google Chrome and Google Pay when page is in Safari', async () => { shouldUseGooglePayBrand.mockReturnValue( false ); - render( ); + render( ); expect( await screen.findByText( @@ -63,7 +63,7 @@ describe( 'PaymentRequestsButtonPreview', () => { it( 'displays Safari Apple Pay when page is in Google Chrome', async () => { shouldUseGooglePayBrand.mockReturnValue( true ); - render( ); + render( ); expect( await screen.findByText( @@ -76,7 +76,7 @@ describe( 'PaymentRequestsButtonPreview', () => { it( 'displays an info notice if stripe is falsy', async () => { useStripe.mockReturnValue( null ); - render( ); + render( ); expect( screen.queryByText( 'Stripe button mock' ) @@ -90,7 +90,7 @@ describe( 'PaymentRequestsButtonPreview', () => { it( 'displays an info notice if stripe fails to load', async () => { canMakePaymentMock.mockResolvedValue( null ); - render( ); + render( ); expect( await screen.findByText( @@ -103,7 +103,7 @@ describe( 'PaymentRequestsButtonPreview', () => { } ); it( 'displays the payment button when stripe is loaded', async () => { - render( ); + render( ); expect( await screen.findByText( 'Stripe button mock' ) diff --git a/client/entrypoints/payment-request-settings/__tests__/payment-request-settings-locations.test.js b/client/entrypoints/express-checkout-settings/__tests__/express-checkout-settings-locations.test.js similarity index 90% rename from client/entrypoints/payment-request-settings/__tests__/payment-request-settings-locations.test.js rename to client/entrypoints/express-checkout-settings/__tests__/express-checkout-settings-locations.test.js index 7548543b88..1006bec2c4 100644 --- a/client/entrypoints/payment-request-settings/__tests__/payment-request-settings-locations.test.js +++ b/client/entrypoints/express-checkout-settings/__tests__/express-checkout-settings-locations.test.js @@ -1,7 +1,7 @@ import { render, screen } from '@testing-library/react'; import userEvent from '@testing-library/user-event'; -import PaymentRequestsSettingsSection from '../payment-request-settings-section'; -import PaymentRequestButtonPreview from '../payment-request-button-preview'; +import ExpressCheckoutSettingsSection from '../express-checkout-settings-section'; +import ExpressCheckoutButtonPreview from '../express-checkout-button-preview'; import { usePaymentRequestEnabledSettings, usePaymentRequestLocations, @@ -24,8 +24,8 @@ jest.mock( 'wcstripe/data/account-keys/hooks', () => ( { useAccountKeysTestPublishableKey: jest.fn().mockReturnValue( [ '' ] ), } ) ); -jest.mock( '../payment-request-button-preview' ); -PaymentRequestButtonPreview.mockImplementation( () => '<>' ); +jest.mock( '../express-checkout-button-preview' ); +ExpressCheckoutButtonPreview.mockImplementation( () => '<>' ); jest.mock( '../utils/utils', () => ( { getPaymentRequestData: jest.fn().mockReturnValue( { @@ -55,7 +55,7 @@ const getMockPaymentRequestLocations = ( updatePaymentRequestLocationsHandler, ]; -describe( 'PaymentRequestsSettingsSection', () => { +describe( 'ExpressCheckoutSettingsSection', () => { const globalValues = global.wc_stripe_payment_request_settings_params; beforeEach( () => { @@ -81,7 +81,7 @@ describe( 'PaymentRequestsSettingsSection', () => { } ); it( 'should enable express checkout locations when express checkout is enabled', () => { - render( ); + render( ); const [ checkoutCheckbox, productPageCheckbox, cartCheckbox ] = screen.getAllByRole( 'checkbox' ); @@ -106,7 +106,7 @@ describe( 'PaymentRequestsSettingsSection', () => { ) ); - render( ); + render( ); // Uncheck each checkbox, and verify them what kind of action should have been called await userEvent.click( screen.getByText( 'Product page' ) ); @@ -140,7 +140,7 @@ describe( 'PaymentRequestsSettingsSection', () => { ) ); - render( ); + render( ); await userEvent.click( screen.getByText( 'Cart' ) ); diff --git a/client/entrypoints/payment-request-settings/__tests__/payment-request-settings.test.js b/client/entrypoints/express-checkout-settings/__tests__/express-checkout-settings.test.js similarity index 89% rename from client/entrypoints/payment-request-settings/__tests__/payment-request-settings.test.js rename to client/entrypoints/express-checkout-settings/__tests__/express-checkout-settings.test.js index 126e1d6a79..66c93a0a2c 100644 --- a/client/entrypoints/payment-request-settings/__tests__/payment-request-settings.test.js +++ b/client/entrypoints/express-checkout-settings/__tests__/express-checkout-settings.test.js @@ -1,7 +1,6 @@ import { render, screen } from '@testing-library/react'; import userEvent from '@testing-library/user-event'; -import PaymentRequestsSettingsSection from '../payment-request-settings-section'; -import PaymentRequestButtonPreview from '../payment-request-button-preview'; +import ExpressCheckoutSettingsSection from '../express-checkout-settings-section'; import { usePaymentRequestEnabledSettings, usePaymentRequestLocations, @@ -9,6 +8,7 @@ import { usePaymentRequestButtonSize, usePaymentRequestButtonTheme, } from 'wcstripe/data'; +import ExpressCheckoutButtonPreview from 'wcstripe/entrypoints/express-checkout-settings/express-checkout-button-preview'; jest.mock( 'wcstripe/data', () => ( { usePaymentRequestEnabledSettings: jest.fn(), @@ -27,8 +27,8 @@ jest.mock( 'wcstripe/data/account-keys/hooks', () => ( { } ) ); jest.mock( '@woocommerce/blocks-checkout', () => {}, { virtual: true } ); -jest.mock( '../payment-request-button-preview' ); -PaymentRequestButtonPreview.mockImplementation( () => '<>' ); +jest.mock( '../express-checkout-button-preview' ); +ExpressCheckoutButtonPreview.mockImplementation( () => '<>' ); jest.mock( '../utils/utils', () => ( { getPaymentRequestData: jest.fn().mockReturnValue( { @@ -57,7 +57,7 @@ const getMockPaymentRequestLocations = ( updatePaymentRequestLocationsHandler, ]; -describe( 'PaymentRequestsSettingsSection', () => { +describe( 'ExpressCheckoutSettingsSection', () => { const globalValues = global.wc_stripe_payment_request_settings_params; beforeEach( () => { usePaymentRequestEnabledSettings.mockReturnValue( @@ -82,7 +82,7 @@ describe( 'PaymentRequestsSettingsSection', () => { } ); it( 'renders settings with defaults', () => { - render( ); + render( ); // confirm settings headings. expect( @@ -125,7 +125,7 @@ describe( 'PaymentRequestsSettingsSection', () => { ] ); usePaymentRequestEnabledSettings.mockReturnValue( [ true, jest.fn() ] ); - render( ); + render( ); expect( setButtonTypeMock ).not.toHaveBeenCalled(); expect( setButtonSizeMock ).not.toHaveBeenCalled(); diff --git a/client/entrypoints/payment-request-settings/payment-request-button-preview.js b/client/entrypoints/express-checkout-settings/express-checkout-button-preview.js similarity index 97% rename from client/entrypoints/payment-request-settings/payment-request-button-preview.js rename to client/entrypoints/express-checkout-settings/express-checkout-button-preview.js index 963114068d..7b3adcc4eb 100644 --- a/client/entrypoints/payment-request-settings/payment-request-button-preview.js +++ b/client/entrypoints/express-checkout-settings/express-checkout-button-preview.js @@ -49,7 +49,7 @@ const buttonSizeToPxMap = { large: 56, }; -const PaymentRequestsButtonPreview = () => { +const ExpressCheckoutButtonPreview = () => { const stripe = useStripe(); const [ paymentRequest, setPaymentRequest ] = useState(); const [ isLoading, setIsLoading ] = useState( true ); @@ -136,4 +136,4 @@ const PaymentRequestsButtonPreview = () => { ); }; -export default PaymentRequestsButtonPreview; +export default ExpressCheckoutButtonPreview; diff --git a/client/entrypoints/payment-request-settings/payment-request-enable-section.js b/client/entrypoints/express-checkout-settings/express-checkout-enable-section.js similarity index 90% rename from client/entrypoints/payment-request-settings/payment-request-enable-section.js rename to client/entrypoints/express-checkout-settings/express-checkout-enable-section.js index d82f71042e..0b104fd593 100644 --- a/client/entrypoints/payment-request-settings/payment-request-enable-section.js +++ b/client/entrypoints/express-checkout-settings/express-checkout-enable-section.js @@ -3,7 +3,7 @@ import { __ } from '@wordpress/i18n'; import { Card, CheckboxControl } from '@wordpress/components'; import { usePaymentRequestEnabledSettings } from 'wcstripe/data'; import CardBody from 'wcstripe/settings/card-body'; -const PaymentRequestsEnableSection = () => { +const ExpressCheckoutEnableSection = () => { const [ isPaymentRequestEnabled, updateIsPaymentRequestEnabled ] = usePaymentRequestEnabledSettings(); @@ -28,4 +28,4 @@ const PaymentRequestsEnableSection = () => { ); }; -export default PaymentRequestsEnableSection; +export default ExpressCheckoutEnableSection; diff --git a/client/entrypoints/payment-request-settings/payment-request-page.js b/client/entrypoints/express-checkout-settings/express-checkout-page.js similarity index 83% rename from client/entrypoints/payment-request-settings/payment-request-page.js rename to client/entrypoints/express-checkout-settings/express-checkout-page.js index 092fff43fd..87640cff0c 100644 --- a/client/entrypoints/payment-request-settings/payment-request-page.js +++ b/client/entrypoints/express-checkout-settings/express-checkout-page.js @@ -1,7 +1,7 @@ import React from 'react'; import PaymentRequestIcon from '../../payment-method-icons/payment-request'; -import PaymentRequestsEnableSection from './payment-request-enable-section'; -import PaymentRequestsSettingsSection from './payment-request-settings-section'; +import ExpressCheckoutEnableSection from './express-checkout-enable-section'; +import ExpressCheckoutSettingsSection from './express-checkout-settings-section'; import { __ } from '@wordpress/i18n'; import SettingsSection from 'wcstripe/settings/settings-section'; import SettingsLayout from 'wcstripe/settings/settings-layout'; @@ -39,18 +39,18 @@ const SettingsDescription = () => ( ); -const PaymentRequestsPage = () => { +const ExpressCheckoutPage = () => { return ( - + - + @@ -59,4 +59,4 @@ const PaymentRequestsPage = () => { ); }; -export default PaymentRequestsPage; +export default ExpressCheckoutPage; diff --git a/client/entrypoints/payment-request-settings/express-checkout-button-preview.js b/client/entrypoints/express-checkout-settings/express-checkout-preview-component.js similarity index 100% rename from client/entrypoints/payment-request-settings/express-checkout-button-preview.js rename to client/entrypoints/express-checkout-settings/express-checkout-preview-component.js diff --git a/client/entrypoints/payment-request-settings/payment-request-settings-section.js b/client/entrypoints/express-checkout-settings/express-checkout-settings-section.js similarity index 97% rename from client/entrypoints/payment-request-settings/payment-request-settings-section.js rename to client/entrypoints/express-checkout-settings/express-checkout-settings-section.js index d7513e2e96..846b824b2c 100644 --- a/client/entrypoints/payment-request-settings/payment-request-settings-section.js +++ b/client/entrypoints/express-checkout-settings/express-checkout-settings-section.js @@ -6,8 +6,8 @@ import interpolateComponents from 'interpolate-components'; import { Elements } from '@stripe/react-stripe-js'; import { loadStripe } from '@stripe/stripe-js'; import styled from '@emotion/styled'; -import PaymentRequestButtonPreview from './payment-request-button-preview'; -import ExpressCheckoutPreviewComponent from './express-checkout-button-preview'; +import ExpressCheckoutButtonPreview from './express-checkout-button-preview'; +import ExpressCheckoutPreviewComponent from './express-checkout-preview-component'; import { Card, RadioControl, @@ -127,7 +127,7 @@ const buttonThemeOptions = [ }, ]; -const PaymentRequestsSettingsSection = () => { +const ExpressCheckoutSettingsSection = () => { const [ buttonType, setButtonType ] = usePaymentRequestButtonType(); const [ size, setSize ] = usePaymentRequestButtonSize(); const [ theme, setTheme ] = usePaymentRequestButtonTheme(); @@ -292,7 +292,7 @@ const PaymentRequestsSettingsSection = () => { /> ) : ( - + ) } @@ -301,4 +301,4 @@ const PaymentRequestsSettingsSection = () => { ); }; -export default PaymentRequestsSettingsSection; +export default ExpressCheckoutSettingsSection; diff --git a/client/entrypoints/payment-request-settings/index.js b/client/entrypoints/express-checkout-settings/index.js similarity index 61% rename from client/entrypoints/payment-request-settings/index.js rename to client/entrypoints/express-checkout-settings/index.js index 23f325c8f2..0f9c017918 100644 --- a/client/entrypoints/payment-request-settings/index.js +++ b/client/entrypoints/express-checkout-settings/index.js @@ -1,11 +1,11 @@ import React from 'react'; import { createRoot } from 'react-dom/client'; -import PaymentRequestsPage from './payment-request-page'; +import ExpressCheckoutPage from './express-checkout-page'; const container = document.getElementById( 'wc-stripe-payment-request-settings-container' ); if ( container ) { - createRoot( container ).render( ); + createRoot( container ).render( ); } diff --git a/client/entrypoints/payment-request-settings/style.scss b/client/entrypoints/express-checkout-settings/style.scss similarity index 100% rename from client/entrypoints/payment-request-settings/style.scss rename to client/entrypoints/express-checkout-settings/style.scss diff --git a/client/entrypoints/payment-request-settings/utils/utils.js b/client/entrypoints/express-checkout-settings/utils/utils.js similarity index 100% rename from client/entrypoints/payment-request-settings/utils/utils.js rename to client/entrypoints/express-checkout-settings/utils/utils.js diff --git a/includes/admin/class-wc-stripe-payment-requests-controller.php b/includes/admin/class-wc-stripe-payment-requests-controller.php index 56189bd0c0..2d9ac45f25 100644 --- a/includes/admin/class-wc-stripe-payment-requests-controller.php +++ b/includes/admin/class-wc-stripe-payment-requests-controller.php @@ -19,7 +19,7 @@ public function __construct() { */ public function admin_scripts() { // Webpack generates an assets file containing a dependencies array for our built JS file. - $script_asset_path = WC_STRIPE_PLUGIN_PATH . '/build/payment-requests-settings.asset.php'; + $script_asset_path = WC_STRIPE_PLUGIN_PATH . '/build/express-checkout-settings.asset.php'; $asset_metadata = file_exists( $script_asset_path ) ? require $script_asset_path : [ @@ -28,7 +28,7 @@ public function admin_scripts() { ]; wp_register_script( 'wc-stripe-payment-request-settings', - plugins_url( 'build/payment-requests-settings.js', WC_STRIPE_MAIN_FILE ), + plugins_url( 'build/express-checkout-settings.js', WC_STRIPE_MAIN_FILE ), $asset_metadata['dependencies'], $asset_metadata['version'], true @@ -53,7 +53,7 @@ public function admin_scripts() { wp_register_style( 'wc-stripe-payment-request-settings', - plugins_url( 'build/payment-requests-settings.css', WC_STRIPE_MAIN_FILE ), + plugins_url( 'build/express-checkout-settings.css', WC_STRIPE_MAIN_FILE ), [ 'wc-components' ], $asset_metadata['version'] ); diff --git a/readme.txt b/readme.txt index c38bdc223e..a73a472e4a 100644 --- a/readme.txt +++ b/readme.txt @@ -111,6 +111,7 @@ If you get stuck, you can ask for help in the [Plugin Forum](https://wordpress.o == Changelog == = 10.0.0 - xxxx-xx-xx = +* Update - Removes frontend code related to Payment Request Buttons in the checkout page * Update - Disable Payment Request Buttons and ensure Express Checkout is used when express checkout buttons are enabled * Dev - Expands the Stripe Order Helper class to handle source ID, refund ID, intent ID, and setup intent ID metas * Update - Removing the `wc_stripe_is_upe_checkout_enabled` filter, as Legacy Checkout is no longer supported diff --git a/webpack.config.js b/webpack.config.js index 0e300b9649..551ea7f905 100644 --- a/webpack.config.js +++ b/webpack.config.js @@ -113,13 +113,13 @@ module.exports = { }, entry: { index: './client/blocks/index.js', - 'payment-requests-settings': - './client/entrypoints/payment-request-settings/index.js', 'upe-classic': './client/classic/upe/index.js', 'upe-blocks': './client/blocks/upe/index.js', 'upe-settings': './client/settings/index.js', 'payment-gateways': './client/entrypoints/payment-gateways/index.js', 'express-checkout': './client/entrypoints/express-checkout/index.js', + 'express-checkout-settings': + './client/entrypoints/express-checkout-settings/index.js', 'amazon-pay-settings': './client/entrypoints/amazon-pay-settings/index.js', },