mirror of
https://github.com/woocommerce/woocommerce-paypal-payments.git
synced 2025-09-04 08:47:23 +08:00
Redesign the welcome changes
This commit is contained in:
Narek Zakarian
parent
d4e0167d88
commit
6d078fcf5d
17 changed files with 468 additions and 208 deletions
|
|
@ -0,0 +1,20 @@
|
|||
.ppcp-r-text-badge-box {
|
||||
&__title {
|
||||
font-size: 16px;
|
||||
line-height: 1.25;
|
||||
font-weight: 700;
|
||||
color: #000;
|
||||
display: block;
|
||||
margin: 0 0 8px 0;
|
||||
|
||||
.ppcp-r-title-image-badge {
|
||||
margin-left: 7px;
|
||||
|
||||
img {
|
||||
margin-left: 5px;
|
||||
vertical-align: bottom;
|
||||
height: 24px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -1,11 +1,7 @@
|
|||
button.components-button, a.components-button {
|
||||
&.is-primary, &.is-secondary {
|
||||
&:not(:disabled) {
|
||||
background-color: $color-blueberry;
|
||||
|
||||
&:hover {
|
||||
background: $gradient-header;
|
||||
}
|
||||
background-color: $color-black;
|
||||
}
|
||||
|
||||
&:disabled {
|
||||
|
|
|
|||
|
|
@ -1,29 +1,15 @@
|
|||
.ppcp-r-onboarding-header{
|
||||
margin: 0 0 32px 0;
|
||||
|
||||
&__gradient {
|
||||
background: $gradient-header;
|
||||
width: 100%;
|
||||
height: 112px;
|
||||
position: relative;
|
||||
margin-bottom: 55px;
|
||||
&__logo {
|
||||
text-align: center;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
&__logo-wrapper {
|
||||
width: 110px;
|
||||
height: 110px;
|
||||
background-color: $color-white;
|
||||
border-radius: 110px;
|
||||
position: absolute;
|
||||
left: calc(50% - 55px);
|
||||
bottom: -55px;
|
||||
|
||||
img {
|
||||
width: 56px;
|
||||
position: absolute;
|
||||
left: 50%;
|
||||
top: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
width: 110px;
|
||||
height: 38px;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -38,7 +24,6 @@
|
|||
|
||||
&__title {
|
||||
@include font(20, 28, 700);
|
||||
color: $color-blue;
|
||||
margin: 0 0 4px 0;
|
||||
text-align: center;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -16,15 +16,6 @@
|
|||
}
|
||||
}
|
||||
|
||||
&-container {
|
||||
box-shadow: $shadow-card;
|
||||
}
|
||||
|
||||
&-card {
|
||||
box-shadow: 0 3px 6px 0 rgba(0, 0, 0, 0.15);
|
||||
background-color: $color-white;
|
||||
}
|
||||
|
||||
&-settings-card {
|
||||
background-color: $color-white;
|
||||
padding: 48px;
|
||||
|
|
|
|||
|
|
@ -12,4 +12,8 @@
|
|||
color:#5c0000;
|
||||
background-color: #faeded;
|
||||
}
|
||||
&--info{
|
||||
color: #2F2F2F;
|
||||
background-color: #F5F5F5;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -4,12 +4,16 @@
|
|||
}
|
||||
|
||||
.ppcp-r-payment-method-icons {
|
||||
margin: 0 0 12px 0;
|
||||
margin: 0 0 32px 0;
|
||||
}
|
||||
|
||||
.ppcp-r-button-activate-paypal {
|
||||
display: block;
|
||||
margin: 0 auto 32px auto;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
.ppcp-r-button__description {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.ppcp-r-page-welcome-or-separator {
|
||||
|
|
@ -17,7 +21,7 @@
|
|||
}
|
||||
|
||||
.ppcp-r-page-welcome-mode-separator {
|
||||
margin: 32px 0;
|
||||
margin: 0 0 64px 0;
|
||||
|
||||
.ppcp-r-separator__line {
|
||||
background-color: $color-gray-500;
|
||||
|
|
@ -81,3 +85,55 @@
|
|||
}
|
||||
}
|
||||
|
||||
.ppcp-r-welcome-docs {
|
||||
|
||||
&__title {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
&__wrapper {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
padding: 8px;
|
||||
}
|
||||
|
||||
&__col {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 4px;
|
||||
flex: 1;
|
||||
|
||||
> p {
|
||||
margin: 0;
|
||||
@include font(13, 16, 400);
|
||||
color: $color-gray-700;
|
||||
}
|
||||
|
||||
&:not(:last-child) {
|
||||
padding-right: 24px;
|
||||
border-right: 1px solid $color-gray-200;
|
||||
margin-right: 24px;
|
||||
}
|
||||
}
|
||||
|
||||
.ppcp-r-page-welcome-mode-separator {
|
||||
margin: 8px 0 16px 0;
|
||||
}
|
||||
|
||||
@media screen and (max-width: 480px) {
|
||||
flex-wrap: wrap;
|
||||
row-gap: 8px;
|
||||
&__col {
|
||||
width: 100%;
|
||||
text-align: center;
|
||||
|
||||
&:not(:last-child) {
|
||||
border-bottom: 1px solid $color-gray-200;
|
||||
border-right: 0;
|
||||
padding-right: 0;
|
||||
padding-bottom: 8px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -15,6 +15,7 @@
|
|||
@import './components/reusable-components/navigation';
|
||||
@import './components/reusable-components/fields';
|
||||
@import './components/reusable-components/title-badge';
|
||||
@import './components/reusable-components/_badge-box.scss';
|
||||
@import './components/screens/onboarding';
|
||||
@import './components/screens/dashboard/tab-dashboard';
|
||||
}
|
||||
|
|
|
|||
|
|
@ -0,0 +1,37 @@
|
|||
import data from '../../utils/data';
|
||||
import TitleBadge, {TITLE_BADGE_INFO} from "./TitleBadge";
|
||||
import {__} from "@wordpress/i18n";
|
||||
|
||||
const BadgeBox = ( props ) => {
|
||||
const titleTag = props.titleTag ?? 'h3';
|
||||
const TitleTag = titleTag;
|
||||
return (
|
||||
<div className="ppcp-r-text-badge-box">
|
||||
<span className="ppcp-r-text-badge-box__title">
|
||||
{props.title}
|
||||
|
||||
{props.imageBadge && (
|
||||
<span className="ppcp-r-title-image-badge">
|
||||
{props.imageBadge.map((badge) => data().getImage(badge))}
|
||||
</span>
|
||||
)}
|
||||
|
||||
{props.textBadge && (
|
||||
<TitleBadge type={TITLE_BADGE_INFO} text={props.textBadge}/>
|
||||
)}
|
||||
</span>
|
||||
<div className="ppcp-r-text-badge-box__description">
|
||||
{props?.description && (
|
||||
<p
|
||||
className="ppcp-r-text-badge-box__description"
|
||||
dangerouslySetInnerHTML={{
|
||||
__html: props.description,
|
||||
}}
|
||||
></p>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default BadgeBox;
|
||||
|
|
@ -3,7 +3,7 @@ import data from '../../utils/data';
|
|||
const OnboardingHeader = ( props ) => {
|
||||
return (
|
||||
<section className="ppcp-r-onboarding-header">
|
||||
<div className="ppcp-r-onboarding-header__gradient">
|
||||
<div className="ppcp-r-onboarding-header__logo">
|
||||
<div className="ppcp-r-onboarding-header__logo-wrapper">
|
||||
{ data().getImage( 'logo-paypal.svg' ) }
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -5,4 +5,5 @@ const TitleBadge = ( { text, type } ) => {
|
|||
|
||||
export const TITLE_BADGE_POSITIVE = 'positive';
|
||||
export const TITLE_BADGE_NEGATIVE = 'negative';
|
||||
export const TITLE_BADGE_INFO = 'info';
|
||||
export default TitleBadge;
|
||||
|
|
|
|||
|
|
@ -7,182 +7,326 @@ import Separator from '../../ReusableComponents/Separator';
|
|||
import { useOnboardingStepWelcome, useManualConnect } from '../../../data';
|
||||
|
||||
import DataStoreControl from '../../ReusableComponents/DataStoreControl';
|
||||
import BadgeBox from "../../ReusableComponents/BadgeBox";
|
||||
|
||||
const StepWelcome = ( { setStep, currentStep, setCompleted } ) => {
|
||||
return (
|
||||
<div className="ppcp-r-page-welcome">
|
||||
<OnboardingHeader
|
||||
title={ __(
|
||||
'Welcome to PayPal Payments',
|
||||
'woocommerce-paypal-payments'
|
||||
) }
|
||||
description={ __(
|
||||
'Your all-in-one checkout solution with PayPal, Venmo, Pay Later, all major credit/debit cards, Apple Pay, Google Pay, and more.',
|
||||
'woocommerce-paypal-payments'
|
||||
) }
|
||||
/>
|
||||
<div className="ppcp-r-inner-container">
|
||||
<PaymentMethodIcons icons="all" />
|
||||
<WelcomeFeatures />
|
||||
<Button
|
||||
className="ppcp-r-button-activate-paypal"
|
||||
variant="primary"
|
||||
onClick={ () => setStep( currentStep + 1 ) }
|
||||
>
|
||||
{ __(
|
||||
'Activate PayPal Payments',
|
||||
'woocommerce-paypal-payments'
|
||||
) }
|
||||
</Button>
|
||||
<Separator
|
||||
className="ppcp-r-page-welcome-or-separator"
|
||||
text={ __( 'or', 'woocommerce-paypal-payments' ) }
|
||||
/>
|
||||
<WelcomeForm setCompleted={ setCompleted } />
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
<div className="ppcp-r-page-welcome">
|
||||
<OnboardingHeader
|
||||
title={__(
|
||||
'Welcome to PayPal Payments',
|
||||
'woocommerce-paypal-payments'
|
||||
)}
|
||||
description={__(
|
||||
'Your all-in-one integration for PayPal checkout solutions that enable buyers to pay via PayPal, Pay Later, all major credit/debit cards, Apple Pay, Google Pay, and more.',
|
||||
'woocommerce-paypal-payments'
|
||||
)}
|
||||
/>
|
||||
<div className="ppcp-r-inner-container">
|
||||
<WelcomeFeatures/>
|
||||
<PaymentMethodIcons icons="all"/>
|
||||
<p className="ppcp-r-button__description">{__(
|
||||
`Click the button below to be guided through connecting your existing PayPal account or creating a new one.You will be able to choose the payment options that are right for your store.`,
|
||||
'woocommerce-paypal-payments'
|
||||
)}
|
||||
</p>
|
||||
<Button
|
||||
className="ppcp-r-button-activate-paypal"
|
||||
variant="primary"
|
||||
onClick={() => setStep(currentStep + 1)}
|
||||
>
|
||||
{__(
|
||||
'Activate PayPal Payments',
|
||||
'woocommerce-paypal-payments'
|
||||
)}
|
||||
</Button>
|
||||
</div>
|
||||
<Separator className="ppcp-r-page-welcome-mode-separator"/>
|
||||
<WelcomeDocs/>
|
||||
<WelcomeForm setCompleted={setCompleted}/>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
const WelcomeFeatures = () => {
|
||||
return (
|
||||
<div className="ppcp-r-welcome-features">
|
||||
<div className="ppcp-r-welcome-features__col">
|
||||
<span>{ __( 'Deposits', 'woocommerce-paypal-payments' ) }</span>
|
||||
<p>{ __( 'Instant', 'woocommerce-paypal-payments' ) }</p>
|
||||
</div>
|
||||
<div className="ppcp-r-welcome-features__col">
|
||||
return (
|
||||
<div className="ppcp-r-welcome-features">
|
||||
<div className="ppcp-r-welcome-features__col">
|
||||
<span>{__('Deposits', 'woocommerce-paypal-payments')}</span>
|
||||
<p>{__('Instant', 'woocommerce-paypal-payments')}</p>
|
||||
</div>
|
||||
<div className="ppcp-r-welcome-features__col">
|
||||
<span>
|
||||
{ __( 'Payment Capture', 'woocommerce-paypal-payments' ) }
|
||||
{__('Payment Capture', 'woocommerce-paypal-payments')}
|
||||
</span>
|
||||
<p>
|
||||
{ __(
|
||||
'Authorize only or Capture',
|
||||
'woocommerce-paypal-payments'
|
||||
) }
|
||||
</p>
|
||||
</div>
|
||||
<div className="ppcp-r-welcome-features__col">
|
||||
<p>
|
||||
{__(
|
||||
'Authorize only or Capture',
|
||||
'woocommerce-paypal-payments'
|
||||
)}
|
||||
</p>
|
||||
</div>
|
||||
<div className="ppcp-r-welcome-features__col">
|
||||
<span>
|
||||
{ __(
|
||||
'Recurring payments',
|
||||
'woocommerce-paypal-payments'
|
||||
) }
|
||||
{__(
|
||||
'Recurring payments',
|
||||
'woocommerce-paypal-payments'
|
||||
)}
|
||||
</span>
|
||||
<p>{ __( 'Supported', 'woocommerce-paypal-payments' ) }</p>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
<p>{__('Supported', 'woocommerce-paypal-payments')}</p>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
const WelcomeDocs = () => {
|
||||
return (
|
||||
<div className="ppcp-r-welcome-docs">
|
||||
<h2 className="ppcp-r-welcome-docs__title">{__(`Want to know more about PayPal Payments?`, 'woocommerce-paypal-payments')}</h2>
|
||||
<div className="ppcp-r-welcome-docs__wrapper">
|
||||
<div className="ppcp-r-welcome-docs__col">
|
||||
<BadgeBox
|
||||
title={__('PayPal Checkout', 'woocommerce-paypal-payments')}
|
||||
textBadge={__('from 3.49% + $0.49 USD1', 'woocommerce-paypal-payments')}
|
||||
description={__(
|
||||
'Our all-in-one checkout solution lets you offer PayPal, Venmo, Pay Later options, and more to help maximise conversion',
|
||||
'woocommerce-paypal-payments'
|
||||
)}
|
||||
/>
|
||||
<BadgeBox title={__('Included in PayPal Checkout', 'woocommerce-paypal-payments')}/>
|
||||
<BadgeBox
|
||||
title={__('Pay with PayPal', 'woocommerce-paypal-payments')}
|
||||
titleTag='h4'
|
||||
imageBadge={['icon-button-paypal.svg']}
|
||||
description={sprintf(
|
||||
// translators: %s: Link to PayPal REST application guide
|
||||
__(
|
||||
'Our brand recognition helps give customers the confidence to buy. <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={__('Pay Later', 'woocommerce-paypal-payments')}
|
||||
titleTag='h4'
|
||||
imageBadge={['icon-payment-method-paypal-small.svg']}
|
||||
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'
|
||||
),
|
||||
'https://woocommerce.com/document/woocommerce-paypal-payments/#manual-credential-input '
|
||||
)}
|
||||
/>
|
||||
<Separator className="ppcp-r-page-welcome-mode-separator"/>
|
||||
<BadgeBox
|
||||
title={__('Venmo', 'woocommerce-paypal-payments')}
|
||||
titleTag='h4'
|
||||
imageBadge={['icon-button-venmo.svg']}
|
||||
description={sprintf(
|
||||
// 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>',
|
||||
'woocommerce-paypal-payments'
|
||||
),
|
||||
'https://woocommerce.com/document/woocommerce-paypal-payments/#manual-credential-input '
|
||||
)}
|
||||
/>
|
||||
<Separator className="ppcp-r-page-welcome-mode-separator"/>
|
||||
<BadgeBox
|
||||
title={__('Crypto', 'woocommerce-paypal-payments')}
|
||||
titleTag='h4'
|
||||
imageBadge={['icon-payment-method-crypto.svg']}
|
||||
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'
|
||||
),
|
||||
'https://woocommerce.com/document/woocommerce-paypal-payments/#manual-credential-input '
|
||||
)}
|
||||
/>
|
||||
</div>
|
||||
<div className="ppcp-r-welcome-docs__col">
|
||||
<BadgeBox
|
||||
title={__('Optional payment methods', 'woocommerce-paypal-payments')}
|
||||
description={__('with additional application', 'woocommerce-paypal-payments')}
|
||||
/>
|
||||
<BadgeBox
|
||||
title={__('Custom Card Fields', 'woocommerce-paypal-payments')}
|
||||
titleTag='h4'
|
||||
imageBadge={['icon-button-visa.svg', 'icon-button-mastercard.svg', 'icon-button-amex.svg', 'icon-button-discover.svg']}
|
||||
textBadge={__('from 2.59% + $0.49 USD1', '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-page-welcome-mode-separator"/>
|
||||
<BadgeBox
|
||||
title={__('Digital Wallets', 'woocommerce-paypal-payments')}
|
||||
titleTag='h4'
|
||||
imageBadge={['icon-button-apple-pay.svg', 'icon-button-google-pay.svg']}
|
||||
textBadge={__('from 2.59% + $0.49 USD1', '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-page-welcome-mode-separator"/>
|
||||
<BadgeBox
|
||||
title={__('Alternative Payment Methods', 'woocommerce-paypal-payments')}
|
||||
titleTag='h4'
|
||||
imageBadge={['icon-button-sepa.svg', 'icon-button-ideal.svg', 'icon-button-blik.svg', 'icon-button-bancontact.svg']}
|
||||
textBadge={__('from 3.49% + $0.49 USD1', '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-page-welcome-mode-separator"/>
|
||||
<BadgeBox
|
||||
title={__('', 'woocommerce-paypal-payments')}
|
||||
titleTag='h4'
|
||||
imageBadge={['icon-payment-method-fastlane-small.svg']}
|
||||
textBadge={__('from 2.59% + $0.49 USD1', '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>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
const WelcomeForm = ( { setCompleted } ) => {
|
||||
const {
|
||||
isSandboxMode,
|
||||
setSandboxMode,
|
||||
isManualConnectionMode,
|
||||
setManualConnectionMode,
|
||||
clientId,
|
||||
setClientId,
|
||||
clientSecret,
|
||||
setClientSecret,
|
||||
} = useOnboardingStepWelcome();
|
||||
const WelcomeForm = ({setCompleted}) => {
|
||||
const {
|
||||
isSandboxMode,
|
||||
setSandboxMode,
|
||||
isManualConnectionMode,
|
||||
setManualConnectionMode,
|
||||
clientId,
|
||||
setClientId,
|
||||
clientSecret,
|
||||
setClientSecret,
|
||||
} = useOnboardingStepWelcome();
|
||||
|
||||
const { connectManual } = useManualConnect();
|
||||
const {connectManual} = useManualConnect();
|
||||
|
||||
const handleConnect = async () => {
|
||||
try {
|
||||
const res = await connectManual(
|
||||
clientId,
|
||||
clientSecret,
|
||||
isSandboxMode
|
||||
);
|
||||
if ( ! res.success ) {
|
||||
throw new Error( 'Request failed.' );
|
||||
}
|
||||
const handleConnect = async () => {
|
||||
try {
|
||||
const res = await connectManual(
|
||||
clientId,
|
||||
clientSecret,
|
||||
isSandboxMode
|
||||
);
|
||||
if (!res.success) {
|
||||
throw new Error('Request failed.');
|
||||
}
|
||||
|
||||
setCompleted( true );
|
||||
} catch ( exc ) {
|
||||
console.error( exc );
|
||||
alert( 'Connection failed.' );
|
||||
}
|
||||
};
|
||||
setCompleted(true);
|
||||
} catch (exc) {
|
||||
console.error(exc);
|
||||
alert('Connection failed.');
|
||||
}
|
||||
};
|
||||
|
||||
const advancedUsersDescription = sprintf(
|
||||
// translators: %s: Link to PayPal REST application guide
|
||||
__(
|
||||
'For advanced users: Connect a custom PayPal REST app for full control over your integration. For more information on creating a PayPal REST application, <a target="_blank" href="%s">click here</a>.',
|
||||
'woocommerce-paypal-payments'
|
||||
),
|
||||
'https://woocommerce.com/document/woocommerce-paypal-payments/#manual-credential-input '
|
||||
);
|
||||
const advancedUsersDescription = sprintf(
|
||||
// translators: %s: Link to PayPal REST application guide
|
||||
__(
|
||||
'For advanced users: Connect a custom PayPal REST app for full control over your integration. For more information on creating a PayPal REST application, <a target="_blank" href="%s">click here</a>.',
|
||||
'woocommerce-paypal-payments'
|
||||
),
|
||||
'https://woocommerce.com/document/woocommerce-paypal-payments/#manual-credential-input '
|
||||
);
|
||||
|
||||
return (
|
||||
<>
|
||||
<SettingsToggleBlock
|
||||
label={ __(
|
||||
'Enable Sandbox Mode',
|
||||
'woocommerce-paypal-payments'
|
||||
) }
|
||||
description={ __(
|
||||
'Activate Sandbox mode to safely test PayPal with sample data. Once your store is ready to go live, you can easily switch to your production account.',
|
||||
'woocommerce-paypal-payments'
|
||||
) }
|
||||
isToggled={ !! isSandboxMode }
|
||||
setToggled={ setSandboxMode }
|
||||
>
|
||||
<Button variant="secondary">
|
||||
{ __( 'Connect Account', 'woocommerce-paypal-payments' ) }
|
||||
</Button>
|
||||
</SettingsToggleBlock>
|
||||
<Separator className="ppcp-r-page-welcome-mode-separator" />
|
||||
<SettingsToggleBlock
|
||||
label={ __(
|
||||
'Manually Connect',
|
||||
'woocommerce-paypal-payments'
|
||||
) }
|
||||
description={ advancedUsersDescription }
|
||||
isToggled={ !! isManualConnectionMode }
|
||||
setToggled={ setManualConnectionMode }
|
||||
>
|
||||
<DataStoreControl
|
||||
control={ TextControl }
|
||||
label={
|
||||
isSandboxMode
|
||||
? __(
|
||||
'Sandbox Client ID',
|
||||
'woocommerce-paypal-payments'
|
||||
)
|
||||
: __(
|
||||
'Live Client ID',
|
||||
'woocommerce-paypal-payments'
|
||||
)
|
||||
}
|
||||
value={ clientId }
|
||||
onChange={ setClientId }
|
||||
/>
|
||||
<DataStoreControl
|
||||
control={ TextControl }
|
||||
label={
|
||||
isSandboxMode
|
||||
? __(
|
||||
'Sandbox Secret Key',
|
||||
'woocommerce-paypal-payments'
|
||||
)
|
||||
: __(
|
||||
'Live Secret Key',
|
||||
'woocommerce-paypal-payments'
|
||||
)
|
||||
}
|
||||
value={ clientSecret }
|
||||
onChange={ setClientSecret }
|
||||
type="password"
|
||||
/>
|
||||
<Button variant="secondary" onClick={ handleConnect }>
|
||||
{ __( 'Connect Account', 'woocommerce-paypal-payments' ) }
|
||||
</Button>
|
||||
</SettingsToggleBlock>
|
||||
</>
|
||||
);
|
||||
return (
|
||||
<>
|
||||
<SettingsToggleBlock
|
||||
label={__(
|
||||
'Enable Sandbox Mode',
|
||||
'woocommerce-paypal-payments'
|
||||
)}
|
||||
description={__(
|
||||
'Activate Sandbox mode to safely test PayPal with sample data. Once your store is ready to go live, you can easily switch to your production account.',
|
||||
'woocommerce-paypal-payments'
|
||||
)}
|
||||
isToggled={!!isSandboxMode}
|
||||
setToggled={setSandboxMode}
|
||||
>
|
||||
<Button variant="secondary">
|
||||
{__('Connect Account', 'woocommerce-paypal-payments')}
|
||||
</Button>
|
||||
</SettingsToggleBlock>
|
||||
<Separator className="ppcp-r-page-welcome-mode-separator"/>
|
||||
<SettingsToggleBlock
|
||||
label={__(
|
||||
'Manually Connect',
|
||||
'woocommerce-paypal-payments'
|
||||
)}
|
||||
description={advancedUsersDescription}
|
||||
isToggled={!!isManualConnectionMode}
|
||||
setToggled={setManualConnectionMode}
|
||||
>
|
||||
<DataStoreControl
|
||||
control={TextControl}
|
||||
label={
|
||||
isSandboxMode
|
||||
? __(
|
||||
'Sandbox Client ID',
|
||||
'woocommerce-paypal-payments'
|
||||
)
|
||||
: __(
|
||||
'Live Client ID',
|
||||
'woocommerce-paypal-payments'
|
||||
)
|
||||
}
|
||||
value={clientId}
|
||||
onChange={setClientId}
|
||||
/>
|
||||
<DataStoreControl
|
||||
control={TextControl}
|
||||
label={
|
||||
isSandboxMode
|
||||
? __(
|
||||
'Sandbox Secret Key',
|
||||
'woocommerce-paypal-payments'
|
||||
)
|
||||
: __(
|
||||
'Live Secret Key',
|
||||
'woocommerce-paypal-payments'
|
||||
)
|
||||
}
|
||||
value={clientSecret}
|
||||
onChange={setClientSecret}
|
||||
type="password"
|
||||
/>
|
||||
<Button variant="secondary" onClick={handleConnect}>
|
||||
{__('Connect Account', 'woocommerce-paypal-payments')}
|
||||
</Button>
|
||||
</SettingsToggleBlock>
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
export default StepWelcome;
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue
