mirror of
https://github.com/woocommerce/woocommerce-paypal-payments.git
synced 2025-09-01 07:02:48 +08:00
332 lines
16 KiB
JavaScript
332 lines
16 KiB
JavaScript
import OnboardingHeader from '../../ReusableComponents/OnboardingHeader';
|
|
import { __, sprintf } from '@wordpress/i18n';
|
|
import { Button, TextControl } from '@wordpress/components';
|
|
import PaymentMethodIcons from '../../ReusableComponents/PaymentMethodIcons';
|
|
import SettingsToggleBlock from '../../ReusableComponents/SettingsToggleBlock';
|
|
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 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">
|
|
<span>
|
|
{__('Payment Capture', 'woocommerce-paypal-payments')}
|
|
</span>
|
|
<p>
|
|
{__(
|
|
'Authorize only or Capture',
|
|
'woocommerce-paypal-payments'
|
|
)}
|
|
</p>
|
|
</div>
|
|
<div className="ppcp-r-welcome-features__col">
|
|
<span>
|
|
{__(
|
|
'Recurring payments',
|
|
'woocommerce-paypal-payments'
|
|
)}
|
|
</span>
|
|
<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 {connectManual} = useManualConnect();
|
|
|
|
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.');
|
|
}
|
|
};
|
|
|
|
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>
|
|
</>
|
|
);
|
|
};
|
|
|
|
export default StepWelcome;
|
