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-processor.js b/client/checkout/blocks/upe-deferred-intent-creation/payment-processor.js
index 1d0a8d9f564..989773e8400 100644
--- a/client/checkout/blocks/upe-deferred-intent-creation/payment-processor.js
+++ b/client/checkout/blocks/upe-deferred-intent-creation/payment-processor.js
@@ -59,7 +59,7 @@ const PaymentProcessor = ( {
api,
activePaymentMethod,
testingInstructions,
- eventRegistration: { onPaymentSetup, onCheckoutAfterProcessingWithSuccess },
+ eventRegistration: { onPaymentSetup, onCheckoutSuccess },
emitResponse,
paymentMethodId,
upeMethods,
@@ -228,7 +228,7 @@ const PaymentProcessor = ( {
api,
stripe,
elements,
- onCheckoutAfterProcessingWithSuccess,
+ onCheckoutSuccess,
emitResponse,
shouldSavePayment
);
diff --git a/client/checkout/blocks/upe-fields.js b/client/checkout/blocks/upe-fields.js
index f8f0b5680c0..9f1ea7d67ee 100644
--- a/client/checkout/blocks/upe-fields.js
+++ b/client/checkout/blocks/upe-fields.js
@@ -41,10 +41,7 @@ const WCPayUPEFields = ( {
activePaymentMethod,
billing: { billingData },
shippingData,
- eventRegistration: {
- onPaymentProcessing,
- onCheckoutAfterProcessingWithSuccess,
- },
+ eventRegistration: { onPaymentProcessing, onCheckoutSuccess },
emitResponse,
paymentIntentId,
paymentIntentSecret,
@@ -206,7 +203,7 @@ const WCPayUPEFields = ( {
// Once the server has completed payment processing, confirm the intent if necessary.
useEffect(
() =>
- onCheckoutAfterProcessingWithSuccess(
+ onCheckoutSuccess(
( { orderId, processingResponse: { paymentDetails } } ) => {
async function updateIntent() {
if ( api.handleDuplicatePayments( paymentDetails ) ) {
diff --git a/client/checkout/blocks/upe-split-fields.js b/client/checkout/blocks/upe-split-fields.js
index 91d0500f3da..07b9f720da1 100644
--- a/client/checkout/blocks/upe-split-fields.js
+++ b/client/checkout/blocks/upe-split-fields.js
@@ -45,10 +45,7 @@ const WCPayUPEFields = ( {
testingInstructions,
billing: { billingData },
shippingData,
- eventRegistration: {
- onPaymentProcessing,
- onCheckoutAfterProcessingWithSuccess,
- },
+ eventRegistration: { onPaymentProcessing, onCheckoutSuccess },
emitResponse,
paymentMethodId,
upeMethods,
@@ -204,7 +201,7 @@ const WCPayUPEFields = ( {
// Once the server has completed payment processing, confirm the intent if necessary.
useEffect(
() =>
- onCheckoutAfterProcessingWithSuccess(
+ onCheckoutSuccess(
( { orderId, processingResponse: { paymentDetails } } ) => {
async function updateIntent() {
if ( api.handleDuplicatePayments( paymentDetails ) ) {
diff --git a/client/checkout/woopay/email-input-iframe.js b/client/checkout/woopay/email-input-iframe.js
index 6c17b14fc3e..a30e7cc26ce 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,
@@ -186,6 +190,9 @@ export const handleWooPayEmailInput = async (
buildAjaxURL( getConfig( 'wcAjaxUrl' ), 'get_woopay_session' ),
{
_ajax_nonce: getConfig( 'woopaySessionNonce' ),
+ order_id: getConfig( 'order_id' ),
+ key: getConfig( 'key' ),
+ billing_email: getConfig( 'billing_email' ),
}
).then( ( response ) => {
if ( response?.data?.session ) {
@@ -534,7 +541,9 @@ export const handleWooPayEmailInput = async (
true
);
if ( e.data.redirectUrl ) {
- window.location = e.data.redirectUrl;
+ window.location = appendRedirectionParams(
+ e.data.redirectUrl
+ );
}
break;
case 'redirect_to_platform_checkout':
diff --git a/client/checkout/woopay/express-button/express-checkout-iframe.js b/client/checkout/woopay/express-button/express-checkout-iframe.js
index 7ac6bfcb275..b021e9eab15 100644
--- a/client/checkout/woopay/express-button/express-checkout-iframe.js
+++ b/client/checkout/woopay/express-button/express-checkout-iframe.js
@@ -5,7 +5,11 @@ import { __ } from '@wordpress/i18n';
import { getConfig } from 'utils/checkout';
import request from 'wcpay/checkout/utils/request';
import { buildAjaxURL } from 'wcpay/payment-request/utils';
-import { getTargetElement, validateEmail } from '../utils';
+import {
+ getTargetElement,
+ validateEmail,
+ appendRedirectionParams,
+} from '../utils';
import wcpayTracks from 'tracks';
export const expressCheckoutIframe = async ( api, context, emailSelector ) => {
@@ -92,6 +96,9 @@ export const expressCheckoutIframe = async ( api, context, emailSelector ) => {
buildAjaxURL( getConfig( 'wcAjaxUrl' ), 'get_woopay_session' ),
{
_ajax_nonce: getConfig( 'woopaySessionNonce' ),
+ order_id: getConfig( 'order_id' ),
+ key: getConfig( 'key' ),
+ billing_email: getConfig( 'billing_email' ),
}
).then( ( response ) => {
if ( response?.data?.session ) {
@@ -250,7 +257,9 @@ export const expressCheckoutIframe = async ( api, context, emailSelector ) => {
true
);
if ( e.data.redirectUrl ) {
- window.location = e.data.redirectUrl;
+ window.location = appendRedirectionParams(
+ e.data.redirectUrl
+ );
}
break;
case 'redirect_to_platform_checkout':
@@ -269,7 +278,9 @@ export const expressCheckoutIframe = async ( api, context, emailSelector ) => {
return;
}
if ( response.result === 'success' ) {
- window.location = response.url;
+ window.location = appendRedirectionParams(
+ response.url
+ );
} else {
showErrorMessage();
closeIframe( false );
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/strings.ts b/client/components/account-balances/strings.ts
index 547f23da8c7..76e7c2f9721 100644
--- a/client/components/account-balances/strings.ts
+++ b/client/components/account-balances/strings.ts
@@ -26,7 +26,7 @@ export const fundLabelStrings = {
export const documentationUrls = {
depositSchedule:
- 'https://woocommerce.com/document/woocommerce-payments/deposits/deposit-schedule',
+ 'https://woocommerce.com/document/woopayments/deposits/deposit-schedule/',
negativeBalance:
- 'https://woocommerce.com/document/woocommerce-payments/fees-and-debits/account-showing-negative-balance',
+ 'https://woocommerce.com/document/woopayments/fees-and-debits/account-showing-negative-balance/',
};
diff --git a/client/components/account-balances/test/index.test.tsx b/client/components/account-balances/test/index.test.tsx
index 6018d85b1f2..586b5dc2027 100644
--- a/client/components/account-balances/test/index.test.tsx
+++ b/client/components/account-balances/test/index.test.tsx
@@ -339,7 +339,7 @@ describe( 'AccountBalances', () => {
} );
expect( within( tooltip ).getByRole( 'link' ) ).toHaveAttribute(
'href',
- 'https://woocommerce.com/document/woocommerce-payments/deposits/deposit-schedule'
+ 'https://woocommerce.com/document/woopayments/deposits/deposit-schedule/'
);
} );
@@ -358,7 +358,7 @@ describe( 'AccountBalances', () => {
} );
expect( within( tooltip ).getByRole( 'link' ) ).toHaveAttribute(
'href',
- 'https://woocommerce.com/document/woocommerce-payments/fees-and-debits/account-showing-negative-balance'
+ 'https://woocommerce.com/document/woopayments/fees-and-debits/account-showing-negative-balance/'
);
} );
@@ -377,7 +377,7 @@ describe( 'AccountBalances', () => {
} );
expect( within( tooltip ).getByRole( 'link' ) ).toHaveAttribute(
'href',
- 'https://woocommerce.com/document/woocommerce-payments/fees-and-debits/account-showing-negative-balance'
+ 'https://woocommerce.com/document/woopayments/fees-and-debits/account-showing-negative-balance/'
);
} );
@@ -399,7 +399,7 @@ describe( 'AccountBalances', () => {
} );
expect( within( tooltip ).getByRole( 'link' ) ).toHaveAttribute(
'href',
- 'https://woocommerce.com/document/woocommerce-payments/deposits/deposit-schedule'
+ 'https://woocommerce.com/document/woopayments/deposits/deposit-schedule/'
);
} );
diff --git a/client/components/banner-notice/index.tsx b/client/components/banner-notice/index.tsx
index 6c687e10cff..dcba0e665fb 100644
--- a/client/components/banner-notice/index.tsx
+++ b/client/components/banner-notice/index.tsx
@@ -1,111 +1,197 @@
+/**
+ * Based on the @wordpress/components `Notice` component.
+ * Adjusted to meet WooCommerce Admin Design Library.
+ */
+
/**
* External dependencies
*/
-import * as React from 'react';
-import { Flex, FlexItem, Icon, Notice, Button } from '@wordpress/components';
+import React from 'react';
+
+import { __ } from '@wordpress/i18n';
+import { useEffect, renderToString } from '@wordpress/element';
+import { speak } from '@wordpress/a11y';
import classNames from 'classnames';
+import { Icon, Button } from '@wordpress/components';
+import { check, info } from '@wordpress/icons';
+import NoticeOutlineIcon from 'gridicons/dist/notice-outline';
+import CloseIcon from 'gridicons/dist/cross-small';
/**
* Internal dependencies.
*/
-import './styles.scss';
+import './style.scss';
+
+const statusIconMap = {
+ success: check,
+ error: NoticeOutlineIcon,
+ warning: NoticeOutlineIcon,
+ info: info,
+};
+
+type Status = keyof typeof statusIconMap;
/**
- * Props for the BannerNotice component.
- *
- * @typedef {Object} BannerNoticeProps
- * @property {Icon.IconType
+
+
{ __( 'Debug mode', 'woocommerce-payments' ) }
{ __( 'Subscriptions', 'woocommerce-payments' ) }
+