woocommerce/woocommerce-paypal-payments
2
0
Fork 0
mirror of https://github.com/woocommerce/woocommerce-paypal-payments.git synced 2025-09-05 08:59:14 +08:00
Code Issues Projects Packages Wiki Activity Actions 7

Merge pull request #2840 from woocommerce/PCP-3912-optional-payment-methods-step

Browse source 
New Settings UI: Add optional payment methods step (3912) (3913)
This commit is contained in:
Emili Castells 2024-11-26 11:21:07 +01:00 • committed by GitHub
commit b1618173d2
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
19 changed files with 987 additions and 490 deletions
Download patch file Download diff file Expand all files Collapse all files

2
modules/ppcp-settings/resources/css/components/reusable-components/_badge-box.scss
View file

@ -18,7 +18,7 @@
} }
} }
&-image-badge { .ppcp-r-badge-box__title-text:not(:empty) + .ppcp-r-badge-box__title-image-badge {
margin-left: 7px; margin-left: 7px;
img { img {

2
modules/ppcp-settings/resources/css/components/reusable-components/_separator.scss
View file

@ -10,7 +10,7 @@
} }
&__line { &__line {
background-color: $color-gray-600; background-color: $color-gray-400;
height: 1px; height: 1px;
} }

10
modules/ppcp-settings/resources/css/components/reusable-components/_welcome-docs.scss
View file

@ -7,16 +7,6 @@
margin: 0 0 32px 0; margin: 0 0 32px 0;
} }
&__description {
text-align: center;
@include font(14, 22, 400);
font-style: italic;
a {
color: $color-gray-700;
}
}
&__wrapper { &__wrapper {
padding: 8px; padding: 8px;
margin: 0 0 48px 0; margin: 0 0 48px 0;

1
modules/ppcp-settings/resources/css/components/screens/_onboarding.scss
View file

@ -1,6 +1,7 @@
@import './onboarding/step-welcome'; @import './onboarding/step-welcome';
@import './onboarding/step-business'; @import './onboarding/step-business';
@import './onboarding/step-products'; @import './onboarding/step-products';
@import './onboarding/step-payment-methods';
.ppcp-r-tabs.onboarding, .ppcp-r-tabs.onboarding,
.ppcp-r-container--onboarding { .ppcp-r-container--onboarding {

38
modules/ppcp-settings/resources/css/components/screens/onboarding/_step-payment-methods.scss Normal file
View file

@ -0,0 +1,38 @@
.ppcp-r-page-optional-payment-methods {
.ppcp-r-select-box:first-child {
.ppcp-r-select-box__title {
margin-bottom: 20px;
}
}
}
.ppcp-r-optional-payment-methods {
&__wrapper {
.ppcp-r-badge-box {
margin: 0 0 24px 0;
&:last-child {
margin: 0;
}
}
.ppcp-r-badge-box__description {
margin: 12px 0 0 0;
@include font(14, 20, 400);
}
}
&__description {
margin: 32px 0 0 0;
text-align: center;
@include font(14, 22, 400);
font-style: italic;
a {
color: $color-gray-700;
}
}
&__separator {
margin: 0 0 24px 0;
}
}

5
modules/ppcp-settings/resources/css/components/screens/onboarding/_step-welcome.scss
View file

@ -16,13 +16,10 @@
text-align: center; text-align: center;
} }
.ppcp-r-page-welcome-or-separator {
margin: 0 0 16px 0;
}
.components-base-control__field { .components-base-control__field {
margin: 0 0 24px 0; margin: 0 0 24px 0;
} }
.ppcp-r-toggle-block__toggled-content > button{ .ppcp-r-toggle-block__toggled-content > button{
@include small-button; @include small-button;
color: $color-white; color: $color-white;

271
modules/ppcp-settings/resources/js/Components/ReusableComponents/OptionalPaymentMethods/AcdcOptionalPaymentMethods.js Normal file
View file

@ -0,0 +1,271 @@
import BadgeBox, { BADGE_BOX_TITLE_BIG } from '../BadgeBox';
import { __, sprintf } from '@wordpress/i18n';
import Separator from '../Separator';
const AcdcOptionalPaymentMethods = ( {
isFastlane,
isPayLater,
storeCountry,
} ) => {
if ( isFastlane && isPayLater && storeCountry === 'us' ) {
return (
<div className="ppcp-r-optional-payment-methods__wrapper">
<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 REST application 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 '
) }
/>
<Separator className="ppcp-r-optional-payment-methods__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 REST application 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 '
) }
/>
<Separator className="ppcp-r-optional-payment-methods__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 3.49% + $0.49 USD<sup>1</sup>',
'woocommerce-paypal-payments'
) }
description={ sprintf(
// translators: %s: Link to PayPal REST application 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 '
) }
/>
<Separator className="ppcp-r-optional-payment-methods__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 REST application 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 '
) }
/>
</div>
);
}
if ( isPayLater && storeCountry === 'uk' ) {
return (
<div className="ppcp-r-optional-payment-methods__wrapper">
<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 REST application 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 '
) }
/>
<Separator className="ppcp-r-optional-payment-methods__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 REST application 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 '
) }
/>
<Separator className="ppcp-r-optional-payment-methods__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 REST application 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 '
) }
/>
</div>
);
}
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',
'woocommerce-paypal-payments'
) }
imageBadge={ [
'icon-button-visa.svg',
'icon-button-mastercard.svg',
'icon-button-amex.svg',
'icon-button-discover.svg',
] }
textBadge={ __(
'from 3.40% + €0.35 EUR<sup>1</sup>',
'woocommerce-paypal-payments'
) }
description={ sprintf(
// translators: %s: Link to PayPal REST application 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 '
) }
/>
<Separator className="ppcp-r-optional-payment-methods__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'
) }
description={ sprintf(
// translators: %s: Link to PayPal REST application 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 '
) }
/>
<Separator className="ppcp-r-optional-payment-methods__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 3.40% + €0.35 EUR<sup>1</sup>',
'woocommerce-paypal-payments'
) }
description={ sprintf(
// translators: %s: Link to PayPal REST application 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 '
) }
/>
</div>
);
};
export default AcdcOptionalPaymentMethods;

66
modules/ppcp-settings/resources/js/Components/ReusableComponents/OptionalPaymentMethods/BcdcOptionalPaymentMethods.js Normal file
View file

@ -0,0 +1,66 @@
import BadgeBox from '../BadgeBox';
import { __, sprintf } from '@wordpress/i18n';
const BcdcOptionalPaymentMethods = ( { isPayLater, storeCountry } ) => {
if ( isPayLater && storeCountry === 'us' ) {
return (
<div className="ppcp-r-optional-payment-methods__wrapper">
<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.59% + $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 '
) }
/>
</div>
);
}
return (
<div className="ppcp-r-optional-payment-methods__wrapper">
<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 3.40% + €0.35 EUR<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 '
) }
/>
</div>
);
};
export default BcdcOptionalPaymentMethods;

28
modules/ppcp-settings/resources/js/Components/ReusableComponents/OptionalPaymentMethods/OptionalPaymentMethods.js Normal file
View file

@ -0,0 +1,28 @@
import AcdcOptionalPaymentMethods from './AcdcOptionalPaymentMethods';
import BcdcOptionalPaymentMethods from './BcdcOptionalPaymentMethods';
const OptionalPaymentMethods = ( {
useAcdc,
isFastlane,
isPayLater,
storeCountry,
} ) => {
return (
<div className="ppcp-r-optional-payment-methods">
{ useAcdc ? (
<AcdcOptionalPaymentMethods
isFastlane={ isFastlane }
isPayLater={ isPayLater }
storeCountry={ storeCountry }
/>
) : (
<BcdcOptionalPaymentMethods
isPayLater={ isPayLater }
storeCountry={ storeCountry }
/>
) }
</div>
);
};
export default OptionalPaymentMethods;

585
modules/ppcp-settings/resources/js/Components/ReusableComponents/WelcomeDocs/AcdcFlow.js
View file

@ -1,327 +1,276 @@
import BadgeBox, { BADGE_BOX_TITLE_BIG } from "../BadgeBox"; import BadgeBox, { BADGE_BOX_TITLE_BIG } from '../BadgeBox';
import { __, sprintf } from '@wordpress/i18n'; import { __, sprintf } from '@wordpress/i18n';
import Separator from '../Separator'; import Separator from '../Separator';
import OptionalPaymentMethods from '../OptionalPaymentMethods/OptionalPaymentMethods';
const AcdcFlow = ( { isFastlane, isPayLater, storeCountry } ) => { const AcdcFlow = ( { isFastlane, isPayLater, storeCountry } ) => {
if (isFastlane && isPayLater && storeCountry === 'us') { if ( isFastlane && isPayLater && storeCountry === 'us' ) {
return ( return (
<div className="ppcp-r-welcome-docs__wrapper"> <div className="ppcp-r-welcome-docs__wrapper">
<div className="ppcp-r-welcome-docs__col"> <div className="ppcp-r-welcome-docs__col">
<BadgeBox <BadgeBox
title={__('PayPal Checkout', 'woocommerce-paypal-payments')} title={ __(
titleType={BADGE_BOX_TITLE_BIG} 'PayPal Checkout',
textBadge={__('from 3.49% + $0.49 USD<sup>1</sup>', 'woocommerce-paypal-payments')} 'woocommerce-paypal-payments'
description={__( ) }
'Our all-in-one checkout solution lets you offer PayPal, Venmo, Pay Later options, and more to help maximise conversion', titleType={ BADGE_BOX_TITLE_BIG }
'woocommerce-paypal-payments' textBadge={ __(
)} 'from 3.49% + $0.49 USD<sup>1</sup>',
/> 'woocommerce-paypal-payments'
<BadgeBox ) }
title={__('Included in PayPal Checkout', 'woocommerce-paypal-payments')} description={ __(
titleType={BADGE_BOX_TITLE_BIG}/> 'Our all-in-one checkout solution lets you offer PayPal, Venmo, Pay Later options, and more to help maximise conversion',
<BadgeBox 'woocommerce-paypal-payments'
title={__('Pay with PayPal', 'woocommerce-paypal-payments')} ) }
imageBadge={['icon-button-paypal.svg']} />
description={sprintf( <BadgeBox
// translators: %s: Link to PayPal REST application guide title={ __(
__( 'Included in PayPal Checkout',
'Our brand recognition helps give customers the confidence to buy. <a target="_blank" href="%s">Learn more</a>', 'woocommerce-paypal-payments'
'woocommerce-paypal-payments' ) }
), titleType={ BADGE_BOX_TITLE_BIG }
'https://woocommerce.com/document/woocommerce-paypal-payments/#manual-credential-input ' />
)} <BadgeBox
/> title={ __(
<Separator className="ppcp-r-page-welcome-mode-separator"/> 'Pay with PayPal',
<BadgeBox 'woocommerce-paypal-payments'
title={__('Pay Later', 'woocommerce-paypal-payments')} ) }
imageBadge={['icon-payment-method-paypal-small.svg']} imageBadge={ [ 'icon-button-paypal.svg' ] }
description={sprintf( description={ sprintf(
// translators: %s: Link to PayPal REST application guide // translators: %s: Link to PayPal REST application guide
__( __(
'Offer installment payment options and get paid upfront - at no extra cost to you. <a target="_blank" href="%s">Learn more</a>', 'Our brand recognition helps give customers the confidence to buy. <a target="_blank" href="%s">Learn more</a>',
'woocommerce-paypal-payments' 'woocommerce-paypal-payments'
), ),
'https://woocommerce.com/document/woocommerce-paypal-payments/#manual-credential-input ' 'https://woocommerce.com/document/woocommerce-paypal-payments/#manual-credential-input '
)} ) }
/> />
<Separator className="ppcp-r-page-welcome-mode-separator"/> <Separator className="ppcp-r-page-welcome-mode-separator" />
<BadgeBox <BadgeBox
title={__('Venmo', 'woocommerce-paypal-payments')} title={ __(
imageBadge={['icon-button-venmo.svg']} 'Pay Later',
description={sprintf( 'woocommerce-paypal-payments'
// translators: %s: Link to PayPal REST application guide ) }
__( imageBadge={ [
'Automatically offer Venmo checkout to millions of active users. <a target="_blank" href="%s">Learn more</a>', 'icon-payment-method-paypal-small.svg',
'woocommerce-paypal-payments' ] }
), description={ sprintf(
'https://woocommerce.com/document/woocommerce-paypal-payments/#manual-credential-input ' // translators: %s: Link to PayPal REST application guide
)} __(
/> 'Offer installment payment options and get paid upfront - at no extra cost to you. <a target="_blank" href="%s">Learn more</a>',
<Separator className="ppcp-r-page-welcome-mode-separator"/> 'woocommerce-paypal-payments'
<BadgeBox ),
title={__('Crypto', 'woocommerce-paypal-payments')} 'https://woocommerce.com/document/woocommerce-paypal-payments/#manual-credential-input '
imageBadge={['icon-payment-method-crypto.svg']} ) }
description={sprintf( />
// translators: %s: Link to PayPal REST application guide <Separator className="ppcp-r-page-welcome-mode-separator" />
__( <BadgeBox
'Let customers checkout with Crypto while you get paid in cash. <a target="_blank" href="%s">Learn more</a>', title={ __( 'Venmo', 'woocommerce-paypal-payments' ) }
'woocommerce-paypal-payments' imageBadge={ [ 'icon-button-venmo.svg' ] }
), description={ sprintf(
'https://woocommerce.com/document/woocommerce-paypal-payments/#manual-credential-input ' // translators: %s: Link to PayPal REST application guide
)} __(
/> 'Automatically offer Venmo checkout to millions of active users. <a target="_blank" href="%s">Learn more</a>',
</div> 'woocommerce-paypal-payments'
<div className="ppcp-r-welcome-docs__col"> ),
<BadgeBox 'https://woocommerce.com/document/woocommerce-paypal-payments/#manual-credential-input '
title={__('Optional payment methods', 'woocommerce-paypal-payments')} ) }
titleType={BADGE_BOX_TITLE_BIG} />
description={__('with additional application', 'woocommerce-paypal-payments')} <Separator className="ppcp-r-page-welcome-mode-separator" />
/> <BadgeBox
<BadgeBox title={ __( 'Crypto', 'woocommerce-paypal-payments' ) }
title={__('Custom Card Fields', 'woocommerce-paypal-payments')} imageBadge={ [ 'icon-payment-method-crypto.svg' ] }
imageBadge={['icon-button-visa.svg', 'icon-button-mastercard.svg', 'icon-button-amex.svg', 'icon-button-discover.svg']} description={ sprintf(
textBadge={__('from 2.59% + $0.49 USD<sup>1</sup>', 'woocommerce-paypal-payments')} // translators: %s: Link to PayPal REST application guide
description={sprintf( __(
// translators: %s: Link to PayPal REST application guide 'Let customers checkout with Crypto while you get paid in cash. <a target="_blank" href="%s">Learn more</a>',
__( 'woocommerce-paypal-payments'
'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://woocommerce.com/document/woocommerce-paypal-payments/#manual-credential-input ' />
)} </div>
/> <div className="ppcp-r-welcome-docs__col">
<Separator className="ppcp-r-page-welcome-mode-separator"/> <BadgeBox
<BadgeBox title={ __(
title={__('Digital Wallets', 'woocommerce-paypal-payments')} 'Optional payment methods',
imageBadge={['icon-button-apple-pay.svg', 'icon-button-google-pay.svg']} 'woocommerce-paypal-payments'
textBadge={__('from 2.59% + $0.49 USD<sup>1</sup>', 'woocommerce-paypal-payments')} ) }
description={sprintf( titleType={ BADGE_BOX_TITLE_BIG }
// translators: %s: Link to PayPal REST application guide description={ __(
__( 'with additional application',
'Accept Apple Pay on eligible devices and Google Pay through mobile and web. <a target="_blank" href="%s">Learn more</a>', 'woocommerce-paypal-payments'
'woocommerce-paypal-payments' ) }
), />
'https://woocommerce.com/document/woocommerce-paypal-payments/#manual-credential-input ' <OptionalPaymentMethods
)} useAcdc={ true }
/> isFastlane={ isFastlane }
<Separator className="ppcp-r-page-welcome-mode-separator"/> isPayLater={ isPayLater }
<BadgeBox storeCountry={ storeCountry }
title={__('Alternative Payment Methods', 'woocommerce-paypal-payments')} />
imageBadge={['icon-button-sepa.svg', 'icon-button-ideal.svg', 'icon-button-blik.svg', 'icon-button-bancontact.svg']} </div>
textBadge={__('from 3.49% + $0.49 USD<sup>1</sup>', 'woocommerce-paypal-payments')} </div>
description={sprintf( );
// translators: %s: Link to PayPal REST application 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 '
)}
/>
<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 REST application 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 '
)}
/>
</div>
</div>
);
}
if (isPayLater && storeCountry === 'uk') { if ( isPayLater && storeCountry === 'uk' ) {
return ( return (
<div className="ppcp-r-welcome-docs__wrapper"> <div className="ppcp-r-welcome-docs__wrapper">
<div className="ppcp-r-welcome-docs__col"> <div className="ppcp-r-welcome-docs__col">
<BadgeBox <BadgeBox
title={__('PayPal Checkout', 'woocommerce-paypal-payments')} title={ __(
titleType={BADGE_BOX_TITLE_BIG} 'PayPal Checkout',
textBadge={__('from 2.90% + £0.30 GBP<sup>1</sup>', 'woocommerce-paypal-payments')} 'woocommerce-paypal-payments'
description={__( ) }
'Our all-in-one checkout solution lets you offer PayPal, Venmo, Pay Later options, and more to help maximise conversion', titleType={ BADGE_BOX_TITLE_BIG }
'woocommerce-paypal-payments' textBadge={ __(
)} 'from 2.90% + £0.30 GBP<sup>1</sup>',
/> 'woocommerce-paypal-payments'
<BadgeBox ) }
title={__('Included in PayPal Checkout', 'woocommerce-paypal-payments')} description={ __(
titleType={BADGE_BOX_TITLE_BIG}/> 'Our all-in-one checkout solution lets you offer PayPal, Venmo, Pay Later options, and more to help maximise conversion',
<BadgeBox 'woocommerce-paypal-payments'
title={__('Pay with PayPal', 'woocommerce-paypal-payments')} ) }
imageBadge={['icon-button-paypal.svg']} />
description={sprintf( <BadgeBox
// translators: %s: Link to PayPal REST application guide title={ __(
__( 'Included in PayPal Checkout',
'Our brand recognition helps give customers the confidence to buy. <a target="_blank" href="%s">Learn more</a>', 'woocommerce-paypal-payments'
'woocommerce-paypal-payments' ) }
), titleType={ BADGE_BOX_TITLE_BIG }
'https://woocommerce.com/document/woocommerce-paypal-payments/#manual-credential-input ' />
)} <BadgeBox
/> title={ __(
<Separator className="ppcp-r-page-welcome-mode-separator"/> 'Pay with PayPal',
<BadgeBox 'woocommerce-paypal-payments'
title={__('Pay in 3', 'woocommerce-paypal-payments')} ) }
imageBadge={['icon-payment-method-paypal-small.svg']} imageBadge={ [ 'icon-button-paypal.svg' ] }
description={sprintf( description={ sprintf(
// translators: %s: Link to PayPal REST application guide // translators: %s: Link to PayPal REST application guide
__( __(
'Offer installment payment options and get paid upfront - at no extra cost to you. <a target="_blank" href="%s">Learn more</a>', 'Our brand recognition helps give customers the confidence to buy. <a target="_blank" href="%s">Learn more</a>',
'woocommerce-paypal-payments' 'woocommerce-paypal-payments'
), ),
'https://woocommerce.com/document/woocommerce-paypal-payments/#manual-credential-input ' 'https://woocommerce.com/document/woocommerce-paypal-payments/#manual-credential-input '
)} ) }
/> />
</div> <Separator className="ppcp-r-page-welcome-mode-separator" />
<div className="ppcp-r-welcome-docs__col"> <BadgeBox
<BadgeBox title={ __(
title={__('Optional payment methods', 'woocommerce-paypal-payments')} 'Pay in 3',
titleType={BADGE_BOX_TITLE_BIG} 'woocommerce-paypal-payments'
description={__('with additional application', 'woocommerce-paypal-payments')} ) }
/> imageBadge={ [
<BadgeBox 'icon-payment-method-paypal-small.svg',
title={__('Custom Card Fields', 'woocommerce-paypal-payments')} ] }
imageBadge={['icon-button-visa.svg', 'icon-button-mastercard.svg', 'icon-button-amex.svg', 'icon-button-discover.svg']} description={ sprintf(
textBadge={__('from 1.20% + £0.30 GBP<sup>1</sup>', 'woocommerce-paypal-payments')} // translators: %s: Link to PayPal REST application guide
description={sprintf( __(
// translators: %s: Link to PayPal REST application guide 'Offer installment payment options and get paid upfront - at no extra cost to you. <a target="_blank" href="%s">Learn more</a>',
__( 'woocommerce-paypal-payments'
'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://woocommerce.com/document/woocommerce-paypal-payments/#manual-credential-input ' />
)} </div>
/> <div className="ppcp-r-welcome-docs__col">
<Separator className="ppcp-r-page-welcome-mode-separator"/> <BadgeBox
<BadgeBox title={ __(
title={__('Digital Wallets', 'woocommerce-paypal-payments')} 'Optional payment methods',
imageBadge={['icon-button-apple-pay.svg', 'icon-button-google-pay.svg']} 'woocommerce-paypal-payments'
textBadge={__('from 1.20% + £0.30 GBP<sup>1</sup>', 'woocommerce-paypal-payments')} ) }
description={sprintf( titleType={ BADGE_BOX_TITLE_BIG }
// translators: %s: Link to PayPal REST application guide description={ __(
__( 'with additional application',
'Accept Apple Pay on eligible devices and Google Pay through mobile and web. <a target="_blank" href="%s">Learn more</a>', 'woocommerce-paypal-payments'
'woocommerce-paypal-payments' ) }
), />
'https://woocommerce.com/document/woocommerce-paypal-payments/#manual-credential-input ' <OptionalPaymentMethods
)} useAcdc={ true }
/> isFastlane={ isFastlane }
<Separator className="ppcp-r-page-welcome-mode-separator"/> isPayLater={ isPayLater }
<BadgeBox storeCountry={ storeCountry }
title={__('Alternative Payment Methods', 'woocommerce-paypal-payments')} />
imageBadge={['icon-button-sepa.svg', 'icon-button-ideal.svg', 'icon-button-blik.svg', 'icon-button-bancontact.svg']} </div>
textBadge={__('from 1.20% + £0.30 GBP<sup>1</sup>', 'woocommerce-paypal-payments')} </div>
description={sprintf( );
// translators: %s: Link to PayPal REST application 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 '
)}
/>
</div>
</div>
);
}
return ( return (
<div className="ppcp-r-welcome-docs__wrapper"> <div className="ppcp-r-welcome-docs__wrapper">
<div className="ppcp-r-welcome-docs__col"> <div className="ppcp-r-welcome-docs__col">
<BadgeBox <BadgeBox
title={__('PayPal Checkout', 'woocommerce-paypal-payments')} title={ __(
titleType={BADGE_BOX_TITLE_BIG} 'PayPal Checkout',
textBadge={__('from 3.40% + €0.35 EUR<sup>1</sup>', 'woocommerce-paypal-payments')} 'woocommerce-paypal-payments'
description={__( ) }
'Our all-in-one checkout solution lets you offer PayPal, Venmo, Pay Later options, and more to help maximise conversion', titleType={ BADGE_BOX_TITLE_BIG }
'woocommerce-paypal-payments' textBadge={ __(
)} 'from 3.40% + €0.35 EUR<sup>1</sup>',
/> 'woocommerce-paypal-payments'
<BadgeBox ) }
title={__('Included in PayPal Checkout', 'woocommerce-paypal-payments')} description={ __(
titleType={BADGE_BOX_TITLE_BIG}/> 'Our all-in-one checkout solution lets you offer PayPal, Venmo, Pay Later options, and more to help maximise conversion',
<BadgeBox 'woocommerce-paypal-payments'
title={__('Pay with PayPal', 'woocommerce-paypal-payments')} ) }
imageBadge={['icon-button-paypal.svg']} />
description={sprintf( <BadgeBox
// translators: %s: Link to PayPal REST application guide title={ __(
__( 'Included in PayPal Checkout',
'Our brand recognition helps give customers the confidence to buy. <a target="_blank" href="%s">Learn more</a>', 'woocommerce-paypal-payments'
'woocommerce-paypal-payments' ) }
), titleType={ BADGE_BOX_TITLE_BIG }
'https://woocommerce.com/document/woocommerce-paypal-payments/#manual-credential-input ' />
)} <BadgeBox
/> title={ __(
<Separator className="ppcp-r-page-welcome-mode-separator"/> 'Pay with PayPal',
<BadgeBox 'woocommerce-paypal-payments'
title={__('Pay Later', 'woocommerce-paypal-payments')} ) }
imageBadge={['icon-payment-method-paypal-small.svg']} imageBadge={ [ 'icon-button-paypal.svg' ] }
description={sprintf( description={ sprintf(
// translators: %s: Link to PayPal REST application guide // translators: %s: Link to PayPal REST application guide
__( __(
'Offer installment payment options and get paid upfront - at no extra cost to you. <a target="_blank" href="%s">Learn more</a>', 'Our brand recognition helps give customers the confidence to buy. <a target="_blank" href="%s">Learn more</a>',
'woocommerce-paypal-payments' 'woocommerce-paypal-payments'
), ),
'https://woocommerce.com/document/woocommerce-paypal-payments/#manual-credential-input ' 'https://woocommerce.com/document/woocommerce-paypal-payments/#manual-credential-input '
)} ) }
/> />
</div> <Separator className="ppcp-r-page-welcome-mode-separator" />
<div className="ppcp-r-welcome-docs__col"> <BadgeBox
<BadgeBox title={ __( 'Pay Later', 'woocommerce-paypal-payments' ) }
title={__('Optional payment methods', 'woocommerce-paypal-payments')} imageBadge={ [ 'icon-payment-method-paypal-small.svg' ] }
titleType={BADGE_BOX_TITLE_BIG} description={ sprintf(
description={__('with additional application', 'woocommerce-paypal-payments')} // translators: %s: Link to PayPal REST application guide
/> __(
<BadgeBox 'Offer installment payment options and get paid upfront - at no extra cost to you. <a target="_blank" href="%s">Learn more</a>',
title={__('Custom Card Fields', 'woocommerce-paypal-payments')} 'woocommerce-paypal-payments'
imageBadge={['icon-button-visa.svg', 'icon-button-mastercard.svg', 'icon-button-amex.svg', 'icon-button-discover.svg']} ),
textBadge={__('from 3.40% + €0.35 EUR<sup>1</sup>', 'woocommerce-paypal-payments')} 'https://woocommerce.com/document/woocommerce-paypal-payments/#manual-credential-input '
description={sprintf( ) }
// translators: %s: Link to PayPal REST application guide />
__( </div>
'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>', <div className="ppcp-r-welcome-docs__col">
'woocommerce-paypal-payments' <BadgeBox
), title={ __(
'https://woocommerce.com/document/woocommerce-paypal-payments/#manual-credential-input ' 'Optional payment methods',
)} 'woocommerce-paypal-payments'
/> ) }
<Separator className="ppcp-r-page-welcome-mode-separator"/> titleType={ BADGE_BOX_TITLE_BIG }
<BadgeBox description={ __(
title={__('Digital Wallets', 'woocommerce-paypal-payments')} 'with additional application',
imageBadge={['icon-button-apple-pay.svg', 'icon-button-google-pay.svg']} 'woocommerce-paypal-payments'
textBadge={__('from 3.40% + €0.35 EUR<sup>1</sup>', 'woocommerce-paypal-payments')} ) }
description={sprintf( />
// translators: %s: Link to PayPal REST application guide <OptionalPaymentMethods
__( useAcdc={ true }
'Accept Apple Pay on eligible devices and Google Pay through mobile and web. <a target="_blank" href="%s">Learn more</a>', isFastlane={ isFastlane }
'woocommerce-paypal-payments' isPayLater={ isPayLater }
), storeCountry={ storeCountry }
'https://woocommerce.com/document/woocommerce-paypal-payments/#manual-credential-input ' />
)} </div>
/> </div>
<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 3.40% + €0.35 EUR<sup>1</sup>', 'woocommerce-paypal-payments')}
description={sprintf(
// translators: %s: Link to PayPal REST application 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 '
)}
/>
</div>
</div>
);
}; };
export default AcdcFlow; export default AcdcFlow;

328
modules/ppcp-settings/resources/js/Components/ReusableComponents/WelcomeDocs/BcdcFlow.js
View file

@ -1,160 +1,184 @@
import BadgeBox, { BADGE_BOX_TITLE_BIG } from "../BadgeBox"; import BadgeBox, { BADGE_BOX_TITLE_BIG } from '../BadgeBox';
import { __, sprintf } from '@wordpress/i18n'; import { __, sprintf } from '@wordpress/i18n';
import Separator from '../Separator'; import Separator from '../Separator';
import OptionalPaymentMethods from '../OptionalPaymentMethods/OptionalPaymentMethods';
const BcdcFlow = ( { isPayLater, storeCountry } ) => { const BcdcFlow = ( { isPayLater, storeCountry } ) => {
if (isPayLater && storeCountry === 'us') { if ( isPayLater && storeCountry === 'us' ) {
return ( return (
<div className="ppcp-r-welcome-docs__wrapper"> <div className="ppcp-r-welcome-docs__wrapper">
<div className="ppcp-r-welcome-docs__col"> <div className="ppcp-r-welcome-docs__col">
<BadgeBox <BadgeBox
title={__('PayPal Checkout', 'woocommerce-paypal-payments')} title={ __(
titleType={BADGE_BOX_TITLE_BIG} 'PayPal Checkout',
textBadge={__('from 3.49% + $0.49 USD<sup>1</sup>', 'woocommerce-paypal-payments')} 'woocommerce-paypal-payments'
description={__( ) }
'Our all-in-one checkout solution lets you offer PayPal, Venmo, Pay Later options, and more to help maximise conversion', titleType={ BADGE_BOX_TITLE_BIG }
'woocommerce-paypal-payments' textBadge={ __(
)} 'from 3.49% + $0.49 USD<sup>1</sup>',
/> 'woocommerce-paypal-payments'
<BadgeBox ) }
title={__('Included in PayPal Checkout', 'woocommerce-paypal-payments')} description={ __(
titleType={BADGE_BOX_TITLE_BIG}/> 'Our all-in-one checkout solution lets you offer PayPal, Venmo, Pay Later options, and more to help maximise conversion',
<BadgeBox 'woocommerce-paypal-payments'
title={__('Pay with PayPal', 'woocommerce-paypal-payments')} ) }
imageBadge={['icon-button-paypal.svg']} />
description={sprintf( <BadgeBox
// translators: %s: Link to PayPal REST application guide title={ __(
__( 'Included in PayPal Checkout',
'Our brand recognition helps give customers the confidence to buy. <a target="_blank" href="%s">Learn more</a>', 'woocommerce-paypal-payments'
'woocommerce-paypal-payments' ) }
), titleType={ BADGE_BOX_TITLE_BIG }
'https://woocommerce.com/document/woocommerce-paypal-payments/#manual-credential-input ' />
)} <BadgeBox
/> title={ __(
<Separator className="ppcp-r-page-welcome-mode-separator"/> 'Pay with PayPal',
<BadgeBox 'woocommerce-paypal-payments'
title={__('Pay Later', 'woocommerce-paypal-payments')} ) }
imageBadge={['icon-payment-method-paypal-small.svg']} imageBadge={ [ 'icon-button-paypal.svg' ] }
description={sprintf( description={ sprintf(
// translators: %s: Link to PayPal REST application guide // translators: %s: Link to PayPal REST application guide
__( __(
'Offer installment payment options and get paid upfront - at no extra cost to you. <a target="_blank" href="%s">Learn more</a>', 'Our brand recognition helps give customers the confidence to buy. <a target="_blank" href="%s">Learn more</a>',
'woocommerce-paypal-payments' 'woocommerce-paypal-payments'
), ),
'https://woocommerce.com/document/woocommerce-paypal-payments/#manual-credential-input ' 'https://woocommerce.com/document/woocommerce-paypal-payments/#manual-credential-input '
)} ) }
/> />
<Separator className="ppcp-r-page-welcome-mode-separator"/> <Separator className="ppcp-r-page-welcome-mode-separator" />
<BadgeBox <BadgeBox
title={__('Venmo', 'woocommerce-paypal-payments')} title={ __(
imageBadge={['icon-button-venmo.svg']} 'Pay Later',
description={sprintf( 'woocommerce-paypal-payments'
// translators: %s: Link to PayPal REST application guide ) }
__( imageBadge={ [
'Automatically offer Venmo checkout to millions of active users. <a target="_blank" href="%s">Learn more</a>', 'icon-payment-method-paypal-small.svg',
'woocommerce-paypal-payments' ] }
), description={ sprintf(
'https://woocommerce.com/document/woocommerce-paypal-payments/#manual-credential-input ' // translators: %s: Link to PayPal REST application guide
)} __(
/> 'Offer installment payment options and get paid upfront - at no extra cost to you. <a target="_blank" href="%s">Learn more</a>',
<Separator className="ppcp-r-page-welcome-mode-separator"/> 'woocommerce-paypal-payments'
<BadgeBox ),
title={__('Crypto', 'woocommerce-paypal-payments')} 'https://woocommerce.com/document/woocommerce-paypal-payments/#manual-credential-input '
imageBadge={['icon-payment-method-crypto.svg']} ) }
description={sprintf( />
// translators: %s: Link to PayPal REST application guide <Separator className="ppcp-r-page-welcome-mode-separator" />
__( <BadgeBox
'Let customers checkout with Crypto while you get paid in cash. <a target="_blank" href="%s">Learn more</a>', title={ __( 'Venmo', 'woocommerce-paypal-payments' ) }
'woocommerce-paypal-payments' imageBadge={ [ 'icon-button-venmo.svg' ] }
), description={ sprintf(
'https://woocommerce.com/document/woocommerce-paypal-payments/#manual-credential-input ' // translators: %s: Link to PayPal REST application guide
)} __(
/> 'Automatically offer Venmo checkout to millions of active users. <a target="_blank" href="%s">Learn more</a>',
</div> 'woocommerce-paypal-payments'
<div className="ppcp-r-welcome-docs__col"> ),
<BadgeBox 'https://woocommerce.com/document/woocommerce-paypal-payments/#manual-credential-input '
title={__('Optional payment methods', 'woocommerce-paypal-payments')} ) }
titleType={BADGE_BOX_TITLE_BIG} />
description={__('with additional application', 'woocommerce-paypal-payments')} <Separator className="ppcp-r-page-welcome-mode-separator" />
/> <BadgeBox
<BadgeBox title={ __( 'Crypto', 'woocommerce-paypal-payments' ) }
title={__('Credit and Debit Cards', 'woocommerce-paypal-payments')} imageBadge={ [ 'icon-payment-method-crypto.svg' ] }
imageBadge={['icon-button-visa.svg', 'icon-button-mastercard.svg', 'icon-button-amex.svg', 'icon-button-discover.svg']} description={ sprintf(
textBadge={__('from 2.59% + $0.49 USD<sup>1</sup>', 'woocommerce-paypal-payments')} // translators: %s: Link to PayPal REST application guide
description={sprintf( __(
// translators: %s: Link to PayPal REST application guide 'Let customers checkout with Crypto while you get paid in cash. <a target="_blank" href="%s">Learn more</a>',
__( 'woocommerce-paypal-payments'
'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 '
), ) }
'https://woocommerce.com/document/woocommerce-paypal-payments/#manual-credential-input ' />
)} </div>
/> <div className="ppcp-r-welcome-docs__col">
</div> <BadgeBox
</div> title={ __(
); 'Optional payment methods',
} 'woocommerce-paypal-payments'
) }
titleType={ BADGE_BOX_TITLE_BIG }
description={ __(
'with additional application',
'woocommerce-paypal-payments'
) }
/>
<OptionalPaymentMethods
useAcdc={ false }
isFastlane={ false }
isPayLater={ isPayLater }
storeCountry={ storeCountry }
/>
</div>
</div>
);
}
return ( return (
<div className="ppcp-r-welcome-docs__wrapper ppcp-r-welcome-docs__wrapper--one-col"> <div className="ppcp-r-welcome-docs__wrapper ppcp-r-welcome-docs__wrapper--one-col">
<BadgeBox <BadgeBox
title={__('PayPal Checkout', 'woocommerce-paypal-payments')} title={ __( 'PayPal Checkout', 'woocommerce-paypal-payments' ) }
titleType={BADGE_BOX_TITLE_BIG} titleType={ BADGE_BOX_TITLE_BIG }
textBadge={__('from 3.40% + €0.35 EUR<sup>1</sup>', 'woocommerce-paypal-payments')} textBadge={ __(
description={__( 'from 3.40% + €0.35 EUR<sup>1</sup>',
'Our all-in-one checkout solution lets you offer PayPal, Venmo, Pay Later options, and more to help maximise conversion', 'woocommerce-paypal-payments'
'woocommerce-paypal-payments' ) }
)} description={ __(
/> 'Our all-in-one checkout solution lets you offer PayPal, Venmo, Pay Later options, and more to help maximise conversion',
<BadgeBox 'woocommerce-paypal-payments'
title={__('Included in PayPal Checkout', 'woocommerce-paypal-payments')} ) }
titleType={BADGE_BOX_TITLE_BIG}/> />
<BadgeBox <BadgeBox
title={__('Pay with PayPal', 'woocommerce-paypal-payments')} title={ __(
imageBadge={['icon-button-paypal.svg']} 'Included in PayPal Checkout',
description={sprintf( 'woocommerce-paypal-payments'
// translators: %s: Link to PayPal REST application guide ) }
__( titleType={ BADGE_BOX_TITLE_BIG }
'Our brand recognition helps give customers the confidence to buy. <a target="_blank" href="%s">Learn more</a>', />
'woocommerce-paypal-payments' <BadgeBox
), title={ __( 'Pay with PayPal', 'woocommerce-paypal-payments' ) }
'https://woocommerce.com/document/woocommerce-paypal-payments/#manual-credential-input ' imageBadge={ [ 'icon-button-paypal.svg' ] }
)} description={ sprintf(
/> // translators: %s: Link to PayPal REST application guide
<Separator className="ppcp-r-page-welcome-mode-separator"/> __(
<BadgeBox 'Our brand recognition helps give customers the confidence to buy. <a target="_blank" href="%s">Learn more</a>',
title={__('Pay Later', 'woocommerce-paypal-payments')} 'woocommerce-paypal-payments'
imageBadge={['icon-payment-method-paypal-small.svg']} ),
description={sprintf( 'https://woocommerce.com/document/woocommerce-paypal-payments/#manual-credential-input '
// translators: %s: Link to PayPal REST application guide ) }
__( />
'Offer installment payment options and get paid upfront - at no extra cost to you. <a target="_blank" href="%s">Learn more</a>', <Separator className="ppcp-r-page-welcome-mode-separator" />
'woocommerce-paypal-payments' <BadgeBox
), title={ __( 'Pay Later', 'woocommerce-paypal-payments' ) }
'https://woocommerce.com/document/woocommerce-paypal-payments/#manual-credential-input ' imageBadge={ [ 'icon-payment-method-paypal-small.svg' ] }
)} description={ sprintf(
/> // translators: %s: Link to PayPal REST application guide
<Separator className="ppcp-r-page-welcome-mode-separator"/> __(
<BadgeBox 'Offer installment payment options and get paid upfront - at no extra cost to you. <a target="_blank" href="%s">Learn more</a>',
title={__('Optional payment methods', 'woocommerce-paypal-payments')} 'woocommerce-paypal-payments'
titleType={BADGE_BOX_TITLE_BIG} ),
description={__('with additional application', 'woocommerce-paypal-payments')} 'https://woocommerce.com/document/woocommerce-paypal-payments/#manual-credential-input '
/> ) }
<BadgeBox />
title={__('Credit and Debit Cards', 'woocommerce-paypal-payments')} <Separator className="ppcp-r-page-welcome-mode-separator" />
imageBadge={['icon-button-visa.svg', 'icon-button-mastercard.svg', 'icon-button-amex.svg', 'icon-button-discover.svg']} <BadgeBox
textBadge={__('from 3.40% + €0.35 EUR<sup>1</sup>', 'woocommerce-paypal-payments')} title={ __(
description={sprintf( 'Optional payment methods',
// translators: %s: Link to PayPal REST application guide 'woocommerce-paypal-payments'
__( ) }
'Process major credit and debit cards through PayPal’s card fields. <a target="_blank" href="%s">Learn more</a>', titleType={ BADGE_BOX_TITLE_BIG }
'woocommerce-paypal-payments' description={ __(
), 'with additional application',
'https://woocommerce.com/document/woocommerce-paypal-payments/#manual-credential-input ' 'woocommerce-paypal-payments'
)} ) }
/> />
</div> <OptionalPaymentMethods
); useAcdc={ false }
isFastlane={ false }
isPayLater={ isPayLater }
storeCountry={ storeCountry }
/>
</div>
);
}; };
export default BcdcFlow; export default BcdcFlow;

4
modules/ppcp-settings/resources/js/Components/ReusableComponents/WelcomeDocs/WelcomeDocs.js
View file

@ -22,8 +22,8 @@ const WelcomeDocs = ( { useAcdc, isFastlane, isPayLater, storeCountry, storeCurr
<BcdcFlow isPayLater={ isPayLater } storeCountry={ storeCountry } /> <BcdcFlow isPayLater={ isPayLater } storeCountry={ storeCountry } />
)} )}
<p <p
className="ppcp-r-welcome-docs__description" className="ppcp-r-optional-payment-methods__description"
dangerouslySetInnerHTML={{__html: pricesBasedDescription,}} dangerouslySetInnerHTML={ { __html: pricesBasedDescription } }
></p> ></p>
</div> </div>
); );

78
modules/ppcp-settings/resources/js/Components/Screens/Onboarding/StepPaymentMethods.js Normal file
View file

@ -0,0 +1,78 @@
import { __, sprintf } from '@wordpress/i18n';
import OnboardingHeader from '../../ReusableComponents/OnboardingHeader';
import SelectBoxWrapper from '../../ReusableComponents/SelectBoxWrapper';
import SelectBox from '../../ReusableComponents/SelectBox';
import { OnboardingHooks } from '../../../data';
import OptionalPaymentMethods from '../../ReusableComponents/OptionalPaymentMethods/OptionalPaymentMethods';
const OPM_RADIO_GROUP_NAME = 'optional-payment-methods';
const StepPaymentMethods = ( {} ) => {
const {
areOptionalPaymentMethodsEnabled,
setAreOptionalPaymentMethodsEnabled,
} = OnboardingHooks.useOptionalPaymentMethods();
const pricesBasedDescription = sprintf(
// translators: %s: Link to PayPal REST application guide
__(
'<sup>1</sup>Prices based on domestic transactions as of October 25th, 2024. <a target="_blank" href="%s">Click here</a> for full pricing details.',
'woocommerce-paypal-payments'
),
'https://woocommerce.com/document/woocommerce-paypal-payments/#manual-credential-input '
);
return (
<div className="ppcp-r-page-optional-payment-methods">
<OnboardingHeader
title={ __(
'Add optional payment methods to your Checkout',
'woocommerce-paypal-payments'
) }
/>
<div className="ppcp-r-inner-container">
<SelectBoxWrapper>
<SelectBox
title={ __(
'Available with additional application',
'woocommerce-paypal-payments'
) }
description={
<OptionalPaymentMethods
useAcdc={ true }
isFastlane={ true }
isPayLater={ true }
storeCountry={ 'us' }
storeCurrency={ 'usd' }
/>
}
name={ OPM_RADIO_GROUP_NAME }
value={ true }
changeCallback={ setAreOptionalPaymentMethodsEnabled }
currentValue={ areOptionalPaymentMethodsEnabled }
type="radio"
></SelectBox>
<SelectBox
title={ __(
'No thanks, I prefer to use a different provider for processing credit cards, digital wallets, and local payment methods',
'woocommerce-paypal-payments'
) }
name={ OPM_RADIO_GROUP_NAME }
value={ false }
changeCallback={ setAreOptionalPaymentMethodsEnabled }
currentValue={ areOptionalPaymentMethodsEnabled }
type="radio"
></SelectBox>
</SelectBoxWrapper>
<p
className="ppcp-r-optional-payment-methods__description"
dangerouslySetInnerHTML={ {
__html: pricesBasedDescription,
} }
></p>
</div>
</div>
);
};
export default StepPaymentMethods;

2
modules/ppcp-settings/resources/js/Components/Screens/Onboarding/availableSteps.js
View file

@ -1,6 +1,7 @@
import StepWelcome from './StepWelcome'; import StepWelcome from './StepWelcome';
import StepBusiness from './StepBusiness'; import StepBusiness from './StepBusiness';
import StepProducts from './StepProducts'; import StepProducts from './StepProducts';
import StepPaymentMethods from './StepPaymentMethods';
import StepCompleteSetup from './StepCompleteSetup'; import StepCompleteSetup from './StepCompleteSetup';
export const getSteps = ( flags ) => { export const getSteps = ( flags ) => {
@ -8,6 +9,7 @@ export const getSteps = ( flags ) => {
StepWelcome, StepWelcome,
StepBusiness, StepBusiness,
StepProducts, StepProducts,
StepPaymentMethods,
StepCompleteSetup, StepCompleteSetup,
]; ];

13
modules/ppcp-settings/resources/js/data/onboarding/actions.js
View file

@ -80,6 +80,19 @@ export const setIsCasualSeller = ( isCasualSeller ) => ( {
payload: { isCasualSeller }, payload: { isCasualSeller },
} ); } );
/**
* Persistent. Sets the "areOptionalPaymentMethodsEnabled" value.
*
* @param {boolean} areOptionalPaymentMethodsEnabled
* @return {Action} The action.
*/
export const setAreOptionalPaymentMethodsEnabled = (
areOptionalPaymentMethodsEnabled
) => ( {
type: ACTION_TYPES.SET_PERSISTENT,
payload: { areOptionalPaymentMethodsEnabled },
} );
/** /**
* Persistent. Sets the "products" array. * Persistent. Sets the "products" array.
* *

29
modules/ppcp-settings/resources/js/data/onboarding/hooks.js
View file

@ -25,8 +25,14 @@ const usePersistent = ( key ) =>
); );
const useHooks = () => { const useHooks = () => {
const { persist, setStep, setCompleted, setIsCasualSeller, setProducts } = const {
useDispatch( STORE_NAME ); persist,
setStep,
setCompleted,
setIsCasualSeller,
setAreOptionalPaymentMethodsEnabled,
setProducts,
} = useDispatch( STORE_NAME );
// Read-only flags. // Read-only flags.
const flags = useSelect( ( select ) => select( STORE_NAME ).flags(), [] ); const flags = useSelect( ( select ) => select( STORE_NAME ).flags(), [] );
@ -38,6 +44,9 @@ const useHooks = () => {
const step = usePersistent( 'step' ); const step = usePersistent( 'step' );
const completed = usePersistent( 'completed' ); const completed = usePersistent( 'completed' );
const isCasualSeller = usePersistent( 'isCasualSeller' ); const isCasualSeller = usePersistent( 'isCasualSeller' );
const areOptionalPaymentMethodsEnabled = usePersistent(
'areOptionalPaymentMethodsEnabled'
);
const products = usePersistent( 'products' ); const products = usePersistent( 'products' );
const savePersistent = async ( setter, value ) => { const savePersistent = async ( setter, value ) => {
@ -60,6 +69,10 @@ const useHooks = () => {
setIsCasualSeller: ( value ) => { setIsCasualSeller: ( value ) => {
return savePersistent( setIsCasualSeller, value ); return savePersistent( setIsCasualSeller, value );
}, },
areOptionalPaymentMethodsEnabled,
setAreOptionalPaymentMethodsEnabled: ( value ) => {
return savePersistent( setAreOptionalPaymentMethodsEnabled, value );
},
products, products,
setProducts: ( activeProducts ) => { setProducts: ( activeProducts ) => {
const validProducts = activeProducts.filter( ( item ) => const validProducts = activeProducts.filter( ( item ) =>
@ -82,6 +95,18 @@ export const useProducts = () => {
return { products, setProducts }; return { products, setProducts };
}; };
export const useOptionalPaymentMethods = () => {
const {
areOptionalPaymentMethodsEnabled,
setAreOptionalPaymentMethodsEnabled,
} = useHooks();
return {
areOptionalPaymentMethodsEnabled,
setAreOptionalPaymentMethodsEnabled,
};
};
export const useSteps = () => { export const useSteps = () => {
const { flags, isReady, step, setStep, completed, setCompleted } = const { flags, isReady, step, setStep, completed, setCompleted } =
useHooks(); useHooks();

1
modules/ppcp-settings/resources/js/data/onboarding/reducer.js
View file

@ -27,6 +27,7 @@ const defaultPersistent = {
completed: false, completed: false,
step: 0, step: 0,
isCasualSeller: null, // null value will uncheck both options in the UI. isCasualSeller: null, // null value will uncheck both options in the UI.
areOptionalPaymentMethodsEnabled: true,
products: [], products: [],
}; };

10
modules/ppcp-settings/src/Data/OnboardingProfile.php
View file

@ -67,6 +67,7 @@ class OnboardingProfile extends AbstractDataModel {
'completed' => false, 'completed' => false,
'step' => 0, 'step' => 0,
'is_casual_seller' => null, 'is_casual_seller' => null,
'are_optional_payment_methods_enabled' => true,
'products' => array(), 'products' => array(),
); );
} }
@ -127,6 +128,15 @@ class OnboardingProfile extends AbstractDataModel {
$this->data['is_casual_seller'] = $casual_seller; $this->data['is_casual_seller'] = $casual_seller;
} }
/**
* Sets the optional payment methods flag.
*
* @param bool|null $are_optional_payment_methods_enabled Whether the PayPal optional payment methods are enabled.
*/
public function set_are_optional_payment_methods_enabled( ?bool $are_optional_payment_methods_enabled ) : void {
$this->data['are_optional_payment_methods_enabled'] = $are_optional_payment_methods_enabled;
}
/** /**
* Gets the active product types for this store. * Gets the active product types for this store.
* *

4
modules/ppcp-settings/src/Endpoint/OnboardingRestEndpoint.php
View file

@ -53,6 +53,10 @@ class OnboardingRestEndpoint extends RestEndpoint {
'js_name' => 'isCasualSeller', 'js_name' => 'isCasualSeller',
'sanitize' => 'to_boolean', 'sanitize' => 'to_boolean',
), ),
'are_optional_payment_methods_enabled' => array(
'js_name' => 'areOptionalPaymentMethodsEnabled',
'sanitize' => 'to_boolean',
),
'products' => array( 'products' => array(
'js_name' => 'products', 'js_name' => 'products',
), ),