From d768c4e24f151676d3ff02d835e85f9d3b4b4791 Mon Sep 17 00:00:00 2001
From: Narek Zakarian <narekzakarian@gmail.com>
Date: Tue, 26 Nov 2024 16:10:35 +0400
Subject: [PATCH] Fix the merge

---
 .../AcdcOptionalPaymentMethods.js             | 138 ++++-----
 .../BcdcOptionalPaymentMethods.js             |  22 +-
 .../OptionalPaymentMethods.js                 |   6 +
 .../WelcomeDocs/AcdcFlow.js                   | 271 ++----------------
 .../WelcomeDocs/BcdcFlow.js                   |  69 ++---
 .../WelcomeDocs/WelcomeDocs.js                |   3 +-
 6 files changed, 142 insertions(+), 367 deletions(-)

diff --git a/modules/ppcp-settings/resources/js/Components/ReusableComponents/OptionalPaymentMethods/AcdcOptionalPaymentMethods.js b/modules/ppcp-settings/resources/js/Components/ReusableComponents/OptionalPaymentMethods/AcdcOptionalPaymentMethods.js
index 18a5456af..e70d0fcbc 100644
--- a/modules/ppcp-settings/resources/js/Components/ReusableComponents/OptionalPaymentMethods/AcdcOptionalPaymentMethods.js
+++ b/modules/ppcp-settings/resources/js/Components/ReusableComponents/OptionalPaymentMethods/AcdcOptionalPaymentMethods.js
@@ -1,11 +1,14 @@
 import BadgeBox, { BADGE_BOX_TITLE_BIG } from '../BadgeBox';
 import { __, sprintf } from '@wordpress/i18n';
 import Separator from '../Separator';
+import generatePriceText from '../../../utils/badgeBoxUtils';
 
 const AcdcOptionalPaymentMethods = ( {
 	isFastlane,
 	isPayLater,
 	storeCountry,
+	storeCurrency,
+	countryPriceInfo,
 } ) => {
 	if ( isFastlane && isPayLater && storeCountry === 'us' ) {
 		return (
@@ -21,20 +24,21 @@ const AcdcOptionalPaymentMethods = ( {
 						'icon-button-amex.svg',
 						'icon-button-discover.svg',
 					] }
-					textBadge={ __(
-						'from 2.59% + $0.49 USD<sup>1</sup>',
-						'woocommerce-paypal-payments'
+					textBadge={ generatePriceText(
+						'ccf',
+						countryPriceInfo[ storeCountry ],
+						storeCurrency
 					) }
 					description={ sprintf(
-						// translators: %s: Link to PayPal REST application guide
+						// translators: %s: Link to PayPal business fees guide
 						__(
 							'Style the credit card fields to match your own style. Includes advanced processing with risk management, 3D Secure, fraud protection options, and chargeback protection. <a target="_blank" href="%s">Learn more</a>',
 							'woocommerce-paypal-payments'
 						),
-						'https://woocommerce.com/document/woocommerce-paypal-payments/#manual-credential-input '
+						'https://www.paypal.com/us/business/paypal-business-fees'
 					) }
 				/>
-				<Separator className="ppcp-r-optional-payment-methods__separator" />
+				<Separator className="ppcp-r-page-welcome-mode-separator" />
 				<BadgeBox
 					title={ __(
 						'Digital Wallets',
@@ -44,20 +48,21 @@ const AcdcOptionalPaymentMethods = ( {
 						'icon-button-apple-pay.svg',
 						'icon-button-google-pay.svg',
 					] }
-					textBadge={ __(
-						'from 2.59% + $0.49 USD<sup>1</sup>',
-						'woocommerce-paypal-payments'
+					textBadge={ generatePriceText(
+						'dw',
+						countryPriceInfo[ storeCountry ],
+						storeCurrency
 					) }
 					description={ sprintf(
-						// translators: %s: Link to PayPal REST application guide
+						// translators: %s: Link to PayPal business fees guide
 						__(
 							'Accept Apple Pay on eligible devices and Google Pay through mobile and web. <a target="_blank" href="%s">Learn more</a>',
 							'woocommerce-paypal-payments'
 						),
-						'https://woocommerce.com/document/woocommerce-paypal-payments/#manual-credential-input '
+						'https://www.paypal.com/us/business/paypal-business-fees'
 					) }
 				/>
-				<Separator className="ppcp-r-optional-payment-methods__separator" />
+				<Separator className="ppcp-r-page-welcome-mode-separator" />
 				<BadgeBox
 					title={ __(
 						'Alternative Payment Methods',
@@ -69,34 +74,36 @@ const AcdcOptionalPaymentMethods = ( {
 						'icon-button-blik.svg',
 						'icon-button-bancontact.svg',
 					] }
-					textBadge={ __(
-						'from 3.49% + $0.49 USD<sup>1</sup>',
-						'woocommerce-paypal-payments'
+					textBadge={ generatePriceText(
+						'apm',
+						countryPriceInfo[ storeCountry ],
+						storeCurrency
 					) }
 					description={ sprintf(
-						// translators: %s: Link to PayPal REST application guide
+						// translators: %s: Link to PayPal business fees guide
 						__(
 							'Seamless payments for customers across the globe using their preferred payment methods. <a target="_blank" href="%s">Learn more</a>',
 							'woocommerce-paypal-payments'
 						),
-						'https://woocommerce.com/document/woocommerce-paypal-payments/#manual-credential-input '
+						'https://www.paypal.com/us/business/paypal-business-fees'
 					) }
 				/>
-				<Separator className="ppcp-r-optional-payment-methods__separator" />
+				<Separator className="ppcp-r-page-welcome-mode-separator" />
 				<BadgeBox
 					title={ __( '', 'woocommerce-paypal-payments' ) }
 					imageBadge={ [ 'icon-payment-method-fastlane-small.svg' ] }
-					textBadge={ __(
-						'from 2.59% + $0.49 USD<sup>1</sup>',
-						'woocommerce-paypal-payments'
+					textBadge={ generatePriceText(
+						'fastlane',
+						countryPriceInfo[ storeCountry ],
+						storeCurrency
 					) }
 					description={ sprintf(
-						// translators: %s: Link to PayPal REST application guide
+						// translators: %s: Link to PayPal business fees guide
 						__(
 							'Speed up guest checkout with Fatslane. Link a customer\'s email address to their payment details. <a target="_blank" href="%s">Learn more</a>',
 							'woocommerce-paypal-payments'
 						),
-						'https://woocommerce.com/document/woocommerce-paypal-payments/#manual-credential-input '
+						'https://www.paypal.com/us/business/paypal-business-fees'
 					) }
 				/>
 			</div>
@@ -117,20 +124,21 @@ const AcdcOptionalPaymentMethods = ( {
 						'icon-button-amex.svg',
 						'icon-button-discover.svg',
 					] }
-					textBadge={ __(
-						'from 1.20% + £0.30 GBP<sup>1</sup>',
-						'woocommerce-paypal-payments'
+					textBadge={ generatePriceText(
+						'ccf',
+						countryPriceInfo[ storeCountry ],
+						storeCurrency
 					) }
 					description={ sprintf(
-						// translators: %s: Link to PayPal REST application guide
+						// translators: %s: Link to PayPal business fees guide
 						__(
 							'Style the credit card fields to match your own style. Includes advanced processing with risk management, 3D Secure, fraud protection options, and chargeback protection. <a target="_blank" href="%s">Learn more</a>',
 							'woocommerce-paypal-payments'
 						),
-						'https://woocommerce.com/document/woocommerce-paypal-payments/#manual-credential-input '
+						'https://www.paypal.com/us/business/paypal-business-fees'
 					) }
 				/>
-				<Separator className="ppcp-r-optional-payment-methods__separator" />
+				<Separator className="ppcp-r-page-welcome-mode-separator" />
 				<BadgeBox
 					title={ __(
 						'Digital Wallets',
@@ -140,20 +148,21 @@ const AcdcOptionalPaymentMethods = ( {
 						'icon-button-apple-pay.svg',
 						'icon-button-google-pay.svg',
 					] }
-					textBadge={ __(
-						'from 1.20% + £0.30 GBP<sup>1</sup>',
-						'woocommerce-paypal-payments'
+					textBadge={ generatePriceText(
+						'dw',
+						countryPriceInfo[ storeCountry ],
+						storeCurrency
 					) }
 					description={ sprintf(
-						// translators: %s: Link to PayPal REST application guide
+						// translators: %s: Link to PayPal business fees guide
 						__(
 							'Accept Apple Pay on eligible devices and Google Pay through mobile and web. <a target="_blank" href="%s">Learn more</a>',
 							'woocommerce-paypal-payments'
 						),
-						'https://woocommerce.com/document/woocommerce-paypal-payments/#manual-credential-input '
+						'https://www.paypal.com/us/business/paypal-business-fees'
 					) }
 				/>
-				<Separator className="ppcp-r-optional-payment-methods__separator" />
+				<Separator className="ppcp-r-page-welcome-mode-separator" />
 				<BadgeBox
 					title={ __(
 						'Alternative Payment Methods',
@@ -165,17 +174,18 @@ const AcdcOptionalPaymentMethods = ( {
 						'icon-button-blik.svg',
 						'icon-button-bancontact.svg',
 					] }
-					textBadge={ __(
-						'from 1.20% + £0.30 GBP<sup>1</sup>',
-						'woocommerce-paypal-payments'
+					textBadge={ generatePriceText(
+						'apm',
+						countryPriceInfo[ storeCountry ],
+						storeCurrency
 					) }
 					description={ sprintf(
-						// translators: %s: Link to PayPal REST application guide
+						// translators: %s: Link to PayPal business fees guide
 						__(
 							'Seamless payments for customers across the globe using their preferred payment methods. <a target="_blank" href="%s">Learn more</a>',
 							'woocommerce-paypal-payments'
 						),
-						'https://woocommerce.com/document/woocommerce-paypal-payments/#manual-credential-input '
+						'https://www.paypal.com/us/business/paypal-business-fees'
 					) }
 				/>
 			</div>
@@ -184,17 +194,6 @@ const AcdcOptionalPaymentMethods = ( {
 
 	return (
 		<div className="ppcp-r-optional-payment-methods__wrapper">
-			<BadgeBox
-				title={ __(
-					'Optional payment methods',
-					'woocommerce-paypal-payments'
-				) }
-				titleType={ BADGE_BOX_TITLE_BIG }
-				description={ __(
-					'with additional application',
-					'woocommerce-paypal-payments'
-				) }
-			/>
 			<BadgeBox
 				title={ __(
 					'Custom Card Fields',
@@ -206,40 +205,42 @@ const AcdcOptionalPaymentMethods = ( {
 					'icon-button-amex.svg',
 					'icon-button-discover.svg',
 				] }
-				textBadge={ __(
-					'from 3.40% + €0.35 EUR<sup>1</sup>',
-					'woocommerce-paypal-payments'
+				textBadge={ generatePriceText(
+					'ccf',
+					countryPriceInfo[ storeCountry ],
+					storeCurrency
 				) }
 				description={ sprintf(
-					// translators: %s: Link to PayPal REST application guide
+					// translators: %s: Link to PayPal business fees guide
 					__(
 						'Style the credit card fields to match your own style. Includes advanced processing with risk management, 3D Secure, fraud protection options, and chargeback protection. <a target="_blank" href="%s">Learn more</a>',
 						'woocommerce-paypal-payments'
 					),
-					'https://woocommerce.com/document/woocommerce-paypal-payments/#manual-credential-input '
+					'https://www.paypal.com/us/business/paypal-business-fees'
 				) }
 			/>
-			<Separator className="ppcp-r-optional-payment-methods__separator" />
+			<Separator className="ppcp-r-page-welcome-mode-separator" />
 			<BadgeBox
 				title={ __( 'Digital Wallets', 'woocommerce-paypal-payments' ) }
 				imageBadge={ [
 					'icon-button-apple-pay.svg',
 					'icon-button-google-pay.svg',
 				] }
-				textBadge={ __(
-					'from 3.40% + €0.35 EUR<sup>1</sup>',
-					'woocommerce-paypal-payments'
+				textBadge={ generatePriceText(
+					'dw',
+					countryPriceInfo[ storeCountry ],
+					storeCurrency
 				) }
 				description={ sprintf(
-					// translators: %s: Link to PayPal REST application guide
+					// translators: %s: Link to PayPal business fees guide
 					__(
 						'Accept Apple Pay on eligible devices and Google Pay through mobile and web. <a target="_blank" href="%s">Learn more</a>',
 						'woocommerce-paypal-payments'
 					),
-					'https://woocommerce.com/document/woocommerce-paypal-payments/#manual-credential-input '
+					'https://www.paypal.com/us/business/paypal-business-fees'
 				) }
 			/>
-			<Separator className="ppcp-r-optional-payment-methods__separator" />
+			<Separator className="ppcp-r-page-welcome-mode-separator" />
 			<BadgeBox
 				title={ __(
 					'Alternative Payment Methods',
@@ -251,17 +252,18 @@ const AcdcOptionalPaymentMethods = ( {
 					'icon-button-blik.svg',
 					'icon-button-bancontact.svg',
 				] }
-				textBadge={ __(
-					'from 3.40% + €0.35 EUR<sup>1</sup>',
-					'woocommerce-paypal-payments'
+				textBadge={ generatePriceText(
+					'apm',
+					countryPriceInfo[ storeCountry ],
+					storeCurrency
 				) }
 				description={ sprintf(
-					// translators: %s: Link to PayPal REST application guide
+					// translators: %s: Link to PayPal business fees guide
 					__(
 						'Seamless payments for customers across the globe using their preferred payment methods. <a target="_blank" href="%s">Learn more</a>',
 						'woocommerce-paypal-payments'
 					),
-					'https://woocommerce.com/document/woocommerce-paypal-payments/#manual-credential-input '
+					'https://www.paypal.com/us/business/paypal-business-fees'
 				) }
 			/>
 		</div>
diff --git a/modules/ppcp-settings/resources/js/Components/ReusableComponents/OptionalPaymentMethods/BcdcOptionalPaymentMethods.js b/modules/ppcp-settings/resources/js/Components/ReusableComponents/OptionalPaymentMethods/BcdcOptionalPaymentMethods.js
index d48c37fd5..0ad3c0e69 100644
--- a/modules/ppcp-settings/resources/js/Components/ReusableComponents/OptionalPaymentMethods/BcdcOptionalPaymentMethods.js
+++ b/modules/ppcp-settings/resources/js/Components/ReusableComponents/OptionalPaymentMethods/BcdcOptionalPaymentMethods.js
@@ -1,7 +1,13 @@
 import BadgeBox from '../BadgeBox';
 import { __, sprintf } from '@wordpress/i18n';
+import generatePriceText from '../../../utils/badgeBoxUtils';
 
-const BcdcOptionalPaymentMethods = ( { isPayLater, storeCountry } ) => {
+const BcdcOptionalPaymentMethods = ( {
+	isPayLater,
+	storeCountry,
+	storeCurrency,
+	countryPriceInfo,
+} ) => {
 	if ( isPayLater && storeCountry === 'us' ) {
 		return (
 			<div className="ppcp-r-optional-payment-methods__wrapper">
@@ -16,9 +22,10 @@ const BcdcOptionalPaymentMethods = ( { isPayLater, storeCountry } ) => {
 						'icon-button-amex.svg',
 						'icon-button-discover.svg',
 					] }
-					textBadge={ __(
-						'from 2.59% + $0.49 USD<sup>1</sup>',
-						'woocommerce-paypal-payments'
+					textBadge={ generatePriceText(
+						'standardCardFields',
+						countryPriceInfo[ storeCountry ],
+						storeCurrency
 					) }
 					description={ sprintf(
 						// translators: %s: Link to PayPal REST application guide
@@ -46,9 +53,10 @@ const BcdcOptionalPaymentMethods = ( { isPayLater, storeCountry } ) => {
 					'icon-button-amex.svg',
 					'icon-button-discover.svg',
 				] }
-				textBadge={ __(
-					'from 3.40% + €0.35 EUR<sup>1</sup>',
-					'woocommerce-paypal-payments'
+				textBadge={ generatePriceText(
+					'standardCardFields',
+					countryPriceInfo[ storeCountry ],
+					storeCurrency
 				) }
 				description={ sprintf(
 					// translators: %s: Link to PayPal REST application guide
diff --git a/modules/ppcp-settings/resources/js/Components/ReusableComponents/OptionalPaymentMethods/OptionalPaymentMethods.js b/modules/ppcp-settings/resources/js/Components/ReusableComponents/OptionalPaymentMethods/OptionalPaymentMethods.js
index b83fad366..0ba17a2b2 100644
--- a/modules/ppcp-settings/resources/js/Components/ReusableComponents/OptionalPaymentMethods/OptionalPaymentMethods.js
+++ b/modules/ppcp-settings/resources/js/Components/ReusableComponents/OptionalPaymentMethods/OptionalPaymentMethods.js
@@ -6,6 +6,8 @@ const OptionalPaymentMethods = ( {
 	isFastlane,
 	isPayLater,
 	storeCountry,
+	storeCurrency,
+	countryPriceInfo,
 } ) => {
 	return (
 		<div className="ppcp-r-optional-payment-methods">
@@ -14,11 +16,15 @@ const OptionalPaymentMethods = ( {
 					isFastlane={ isFastlane }
 					isPayLater={ isPayLater }
 					storeCountry={ storeCountry }
+					storeCurrency={ storeCurrency }
+					countryPriceInfo={ countryPriceInfo }
 				/>
 			) : (
 				<BcdcOptionalPaymentMethods
 					isPayLater={ isPayLater }
 					storeCountry={ storeCountry }
+					storeCurrency={ storeCurrency }
+					countryPriceInfo={ countryPriceInfo }
 				/>
 			) }
 		</div>
diff --git a/modules/ppcp-settings/resources/js/Components/ReusableComponents/WelcomeDocs/AcdcFlow.js b/modules/ppcp-settings/resources/js/Components/ReusableComponents/WelcomeDocs/AcdcFlow.js
index 5f713b3ee..3ef3e422d 100644
--- a/modules/ppcp-settings/resources/js/Components/ReusableComponents/WelcomeDocs/AcdcFlow.js
+++ b/modules/ppcp-settings/resources/js/Components/ReusableComponents/WelcomeDocs/AcdcFlow.js
@@ -2,6 +2,7 @@ import BadgeBox, { BADGE_BOX_TITLE_BIG } from '../BadgeBox';
 import { __, sprintf } from '@wordpress/i18n';
 import Separator from '../Separator';
 import generatePriceText from '../../../utils/badgeBoxUtils';
+import OptionalPaymentMethods from '../OptionalPaymentMethods/OptionalPaymentMethods';
 
 const AcdcFlow = ( {
 	isFastlane,
@@ -20,9 +21,10 @@ const AcdcFlow = ( {
 							'woocommerce-paypal-payments'
 						) }
 						titleType={ BADGE_BOX_TITLE_BIG }
-						textBadge={ __(
-							'from 3.49% + $0.49 USD<sup>1</sup>',
-							'woocommerce-paypal-payments'
+						textBadge={ generatePriceText(
+							'checkout',
+							countryPriceInfo[ storeCountry ],
+							storeCurrency
 						) }
 						description={ __(
 							'Our all-in-one checkout solution lets you offer PayPal, Venmo, Pay Later options, and more to help maximise conversion',
@@ -108,96 +110,13 @@ const AcdcFlow = ( {
 							'woocommerce-paypal-payments'
 						) }
 					/>
-					<BadgeBox
-						title={ __(
-							'Custom Card Fields',
-							'woocommerce-paypal-payments'
-						) }
-						imageBadge={ [
-							'icon-button-visa.svg',
-							'icon-button-mastercard.svg',
-							'icon-button-amex.svg',
-							'icon-button-discover.svg',
-						] }
-						textBadge={ __(
-							'from 2.59% + $0.49 USD<sup>1</sup>',
-							'woocommerce-paypal-payments'
-						) }
-						description={ sprintf(
-							// translators: %s: Link to PayPal business fees guide
-							__(
-								'Style the credit card fields to match your own style. Includes advanced processing with risk management, 3D Secure, fraud protection options, and chargeback protection. <a target="_blank" href="%s">Learn more</a>',
-								'woocommerce-paypal-payments'
-							),
-							'https://www.paypal.com/us/business/paypal-business-fees'
-						) }
-					/>
-					<Separator className="ppcp-r-page-welcome-mode-separator" />
-					<BadgeBox
-						title={ __(
-							'Digital Wallets',
-							'woocommerce-paypal-payments'
-						) }
-						imageBadge={ [
-							'icon-button-apple-pay.svg',
-							'icon-button-google-pay.svg',
-						] }
-						textBadge={ __(
-							'from 2.59% + $0.49 USD<sup>1</sup>',
-							'woocommerce-paypal-payments'
-						) }
-						description={ sprintf(
-							// translators: %s: Link to PayPal business fees guide
-							__(
-								'Accept Apple Pay on eligible devices and Google Pay through mobile and web. <a target="_blank" href="%s">Learn more</a>',
-								'woocommerce-paypal-payments'
-							),
-							'https://www.paypal.com/us/business/paypal-business-fees'
-						) }
-					/>
-					<Separator className="ppcp-r-page-welcome-mode-separator" />
-					<BadgeBox
-						title={ __(
-							'Alternative Payment Methods',
-							'woocommerce-paypal-payments'
-						) }
-						imageBadge={ [
-							'icon-button-sepa.svg',
-							'icon-button-ideal.svg',
-							'icon-button-blik.svg',
-							'icon-button-bancontact.svg',
-						] }
-						textBadge={ __(
-							'from 2.59% + $0.49 USD<sup>1</sup>',
-							'woocommerce-paypal-payments'
-						) }
-						description={ sprintf(
-							// translators: %s: Link to PayPal business fees guide
-							__(
-								'Seamless payments for customers across the globe using their preferred payment methods. <a target="_blank" href="%s">Learn more</a>',
-								'woocommerce-paypal-payments'
-							),
-							'https://www.paypal.com/us/business/paypal-business-fees'
-						) }
-					/>
-					<Separator className="ppcp-r-page-welcome-mode-separator" />
-					<BadgeBox
-						title={ __( '', 'woocommerce-paypal-payments' ) }
-						imageBadge={ [
-							'icon-payment-method-fastlane-small.svg',
-						] }
-						textBadge={ __(
-							'from 2.59% + $0.49 USD<sup>1</sup>',
-							'woocommerce-paypal-payments'
-						) }
-						description={ sprintf(
-							// translators: %s: Link to PayPal business fees guide
-							__(
-								'Speed up guest checkout with Fatslane. Link a customer\'s email address to their payment details. <a target="_blank" href="%s">Learn more</a>',
-								'woocommerce-paypal-payments'
-							),
-							'https://www.paypal.com/us/business/paypal-business-fees'
-						) }
+					<OptionalPaymentMethods
+						useAcdc={ true }
+						isFastlane={ isFastlane }
+						isPayLater={ isPayLater }
+						storeCountry={ storeCountry }
+						storeCurrency={ storeCurrency }
+						countryPriceInfo={ countryPriceInfo }
 					/>
 				</div>
 			</div>
@@ -214,9 +133,10 @@ const AcdcFlow = ( {
 							'woocommerce-paypal-payments'
 						) }
 						titleType={ BADGE_BOX_TITLE_BIG }
-						textBadge={ __(
-							'from 2.90% + £0.30 GBP<sup>1</sup>',
-							'woocommerce-paypal-payments'
+						textBadge={ generatePriceText(
+							'checkout',
+							countryPriceInfo[ storeCountry ],
+							storeCurrency
 						) }
 						description={ __(
 							'Our all-in-one checkout solution lets you offer PayPal, Venmo, Pay Later options, and more to help maximise conversion',
@@ -276,77 +196,13 @@ const AcdcFlow = ( {
 							'woocommerce-paypal-payments'
 						) }
 					/>
-					<BadgeBox
-						title={ __(
-							'Custom Card Fields',
-							'woocommerce-paypal-payments'
-						) }
-						imageBadge={ [
-							'icon-button-visa.svg',
-							'icon-button-mastercard.svg',
-							'icon-button-amex.svg',
-							'icon-button-discover.svg',
-						] }
-						textBadge={ __(
-							'from 1.20% + £0.30 GBP<sup>1</sup>',
-							'woocommerce-paypal-payments'
-						) }
-						description={ sprintf(
-							// translators: %s: Link to PayPal business fees guide
-							__(
-								'Style the credit card fields to match your own style. Includes advanced processing with risk management, 3D Secure, fraud protection options, and chargeback protection. <a target="_blank" href="%s">Learn more</a>',
-								'woocommerce-paypal-payments'
-							),
-							'https://www.paypal.com/us/business/paypal-business-fees'
-						) }
-					/>
-					<Separator className="ppcp-r-page-welcome-mode-separator" />
-					<BadgeBox
-						title={ __(
-							'Digital Wallets',
-							'woocommerce-paypal-payments'
-						) }
-						imageBadge={ [
-							'icon-button-apple-pay.svg',
-							'icon-button-google-pay.svg',
-						] }
-						textBadge={ __(
-							'from 1.20% + £0.30 GBP<sup>1</sup>',
-							'woocommerce-paypal-payments'
-						) }
-						description={ sprintf(
-							// translators: %s: Link to PayPal business fees guide
-							__(
-								'Accept Apple Pay on eligible devices and Google Pay through mobile and web. <a target="_blank" href="%s">Learn more</a>',
-								'woocommerce-paypal-payments'
-							),
-							'https://www.paypal.com/us/business/paypal-business-fees'
-						) }
-					/>
-					<Separator className="ppcp-r-page-welcome-mode-separator" />
-					<BadgeBox
-						title={ __(
-							'Alternative Payment Methods',
-							'woocommerce-paypal-payments'
-						) }
-						imageBadge={ [
-							'icon-button-sepa.svg',
-							'icon-button-ideal.svg',
-							'icon-button-blik.svg',
-							'icon-button-bancontact.svg',
-						] }
-						textBadge={ __(
-							'from 1.20% + £0.30 GBP<sup>1</sup>',
-							'woocommerce-paypal-payments'
-						) }
-						description={ sprintf(
-							// translators: %s: Link to PayPal business fees guide
-							__(
-								'Seamless payments for customers across the globe using their preferred payment methods. <a target="_blank" href="%s">Learn more</a>',
-								'woocommerce-paypal-payments'
-							),
-							'https://www.paypal.com/us/business/paypal-business-fees'
-						) }
+					<OptionalPaymentMethods
+						useAcdc={ true }
+						isFastlane={ isFastlane }
+						isPayLater={ isPayLater }
+						storeCountry={ storeCountry }
+						storeCurrency={ storeCurrency }
+						countryPriceInfo={ countryPriceInfo }
 					/>
 				</div>
 			</div>
@@ -420,80 +276,13 @@ const AcdcFlow = ( {
 						'woocommerce-paypal-payments'
 					) }
 				/>
-				<BadgeBox
-					title={ __(
-						'Custom Card Fields',
-						'woocommerce-paypal-payments'
-					) }
-					imageBadge={ [
-						'icon-button-visa.svg',
-						'icon-button-mastercard.svg',
-						'icon-button-amex.svg',
-						'icon-button-discover.svg',
-					] }
-					textBadge={ generatePriceText(
-						'ccf',
-						countryPriceInfo[ storeCountry ],
-						storeCurrency
-					) }
-					description={ sprintf(
-						// translators: %s: Link to PayPal business fees guide
-						__(
-							'Style the credit card fields to match your own style. Includes advanced processing with risk management, 3D Secure, fraud protection options, and chargeback protection. <a target="_blank" href="%s">Learn more</a>',
-							'woocommerce-paypal-payments'
-						),
-						'https://www.paypal.com/us/business/paypal-business-fees'
-					) }
-				/>
-				<Separator className="ppcp-r-page-welcome-mode-separator" />
-				<BadgeBox
-					title={ __(
-						'Digital Wallets',
-						'woocommerce-paypal-payments'
-					) }
-					imageBadge={ [
-						'icon-button-apple-pay.svg',
-						'icon-button-google-pay.svg',
-					] }
-					textBadge={ generatePriceText(
-						'dw',
-						countryPriceInfo[ storeCountry ],
-						storeCurrency
-					) }
-					description={ sprintf(
-						// translators: %s: Link to PayPal business fees guide
-						__(
-							'Accept Apple Pay on eligible devices and Google Pay through mobile and web. <a target="_blank" href="%s">Learn more</a>',
-							'woocommerce-paypal-payments'
-						),
-						'https://www.paypal.com/us/business/paypal-business-fees'
-					) }
-				/>
-				<Separator className="ppcp-r-page-welcome-mode-separator" />
-				<BadgeBox
-					title={ __(
-						'Alternative Payment Methods',
-						'woocommerce-paypal-payments'
-					) }
-					imageBadge={ [
-						'icon-button-sepa.svg',
-						'icon-button-ideal.svg',
-						'icon-button-blik.svg',
-						'icon-button-bancontact.svg',
-					] }
-					textBadge={ generatePriceText(
-						'apm',
-						countryPriceInfo[ storeCountry ],
-						storeCurrency
-					) }
-					description={ sprintf(
-						// translators: %s: Link to PayPal business fees guide
-						__(
-							'Seamless payments for customers across the globe using their preferred payment methods. <a target="_blank" href="%s">Learn more</a>',
-							'woocommerce-paypal-payments'
-						),
-						'https://www.paypal.com/us/business/paypal-business-fees'
-					) }
+				<OptionalPaymentMethods
+					useAcdc={ true }
+					isFastlane={ isFastlane }
+					isPayLater={ isPayLater }
+					storeCountry={ storeCountry }
+					storeCurrency={ storeCurrency }
+					countryPriceInfo={ countryPriceInfo }
 				/>
 			</div>
 		</div>
diff --git a/modules/ppcp-settings/resources/js/Components/ReusableComponents/WelcomeDocs/BcdcFlow.js b/modules/ppcp-settings/resources/js/Components/ReusableComponents/WelcomeDocs/BcdcFlow.js
index e82118b44..ec2b738d5 100644
--- a/modules/ppcp-settings/resources/js/Components/ReusableComponents/WelcomeDocs/BcdcFlow.js
+++ b/modules/ppcp-settings/resources/js/Components/ReusableComponents/WelcomeDocs/BcdcFlow.js
@@ -2,6 +2,7 @@ import BadgeBox, { BADGE_BOX_TITLE_BIG } from '../BadgeBox';
 import { __, sprintf } from '@wordpress/i18n';
 import Separator from '../Separator';
 import generatePriceText from '../../../utils/badgeBoxUtils';
+import OptionalPaymentMethods from '../OptionalPaymentMethods/OptionalPaymentMethods';
 
 const BcdcFlow = ( {
 	isPayLater,
@@ -19,9 +20,10 @@ const BcdcFlow = ( {
 							'woocommerce-paypal-payments'
 						) }
 						titleType={ BADGE_BOX_TITLE_BIG }
-						textBadge={ __(
-							'from 3.49% + $0.49 USD<sup>1</sup>',
-							'woocommerce-paypal-payments'
+						textBadge={ generatePriceText(
+							'checkout',
+							countryPriceInfo[ storeCountry ],
+							storeCurrency
 						) }
 						description={ __(
 							'Our all-in-one checkout solution lets you offer PayPal, Venmo, Pay Later options, and more to help maximise conversion',
@@ -107,29 +109,13 @@ const BcdcFlow = ( {
 							'woocommerce-paypal-payments'
 						) }
 					/>
-					<BadgeBox
-						title={ __(
-							'Credit and Debit Cards',
-							'woocommerce-paypal-payments'
-						) }
-						imageBadge={ [
-							'icon-button-visa.svg',
-							'icon-button-mastercard.svg',
-							'icon-button-amex.svg',
-							'icon-button-discover.svg',
-						] }
-						textBadge={ __(
-							'from 2.99% + $0.49 USD<sup>1</sup>',
-							'woocommerce-paypal-payments'
-						) }
-						description={ sprintf(
-							// translators: %s: Link to PayPal REST application guide
-							__(
-								'Process major credit and debit cards through PayPal’s card fields. <a target="_blank" href="%s">Learn more</a>',
-								'woocommerce-paypal-payments'
-							),
-							'https://woocommerce.com/document/woocommerce-paypal-payments/#manual-credential-input '
-						) }
+					<OptionalPaymentMethods
+						useAcdc={ false }
+						isFastlane={ false }
+						isPayLater={ isPayLater }
+						storeCountry={ storeCountry }
+						storeCurrency={ storeCurrency }
+						countryPriceInfo={ countryPriceInfo }
 					/>
 				</div>
 			</div>
@@ -195,30 +181,13 @@ const BcdcFlow = ( {
 					'woocommerce-paypal-payments'
 				) }
 			/>
-			<BadgeBox
-				title={ __(
-					'Credit and Debit Cards',
-					'woocommerce-paypal-payments'
-				) }
-				imageBadge={ [
-					'icon-button-visa.svg',
-					'icon-button-mastercard.svg',
-					'icon-button-amex.svg',
-					'icon-button-discover.svg',
-				] }
-				textBadge={ generatePriceText(
-					'standardCardFields',
-					countryPriceInfo[ storeCountry ],
-					storeCurrency
-				) }
-				description={ sprintf(
-					// translators: %s: Link to PayPal REST application guide
-					__(
-						'Process major credit and debit cards through PayPal’s card fields. <a target="_blank" href="%s">Learn more</a>',
-						'woocommerce-paypal-payments'
-					),
-					'https://woocommerce.com/document/woocommerce-paypal-payments/#manual-credential-input '
-				) }
+			<OptionalPaymentMethods
+				useAcdc={ false }
+				isFastlane={ false }
+				isPayLater={ isPayLater }
+				storeCountry={ storeCountry }
+				storeCurrency={ storeCurrency }
+				countryPriceInfo={ countryPriceInfo }
 			/>
 		</div>
 	);
diff --git a/modules/ppcp-settings/resources/js/Components/ReusableComponents/WelcomeDocs/WelcomeDocs.js b/modules/ppcp-settings/resources/js/Components/ReusableComponents/WelcomeDocs/WelcomeDocs.js
index a8c905026..4f0538c18 100644
--- a/modules/ppcp-settings/resources/js/Components/ReusableComponents/WelcomeDocs/WelcomeDocs.js
+++ b/modules/ppcp-settings/resources/js/Components/ReusableComponents/WelcomeDocs/WelcomeDocs.js
@@ -27,6 +27,7 @@ const WelcomeDocs = ( {
 			ccf: 2.59,
 			dw: 2.59,
 			apm: 2.59,
+			fastlane: 2.59,
 			standardCardFields: 2.99,
 		},
 		uk: {
@@ -119,7 +120,7 @@ const WelcomeDocs = ( {
 				/>
 			) }
 			<p
-				className="ppcp-r-welcome-docs__description"
+				className="ppcp-r-optional-payment-methods__description"
 				dangerouslySetInnerHTML={ { __html: pricesBasedDescription } }
 			></p>
 		</div>