Add PayFast payment gateway option for sites in South Africa (https://github.com/woocommerce/woocommerce-admin/pull/3738)
* Add PayFast payment gateway option for sites in South Africa * Fix PayFast extension in the whitelist * Configure PayFast from within the task list * Triggering hook * Show PayFast payment method at the bottom of the options * When configuring the PayFast extension set the store currency to ZAR * Remove withSelect from compose function * Only do one call to update the settings
This commit is contained in:
Bec Scott
GitHub
parent
8eda9cbd59
commit
1cc7e0288f
|
|
@ -36,6 +36,7 @@ import Stripe from './stripe';
|
|||
import Square from './square';
|
||||
import PayPal from './paypal';
|
||||
import Klarna from './klarna';
|
||||
import PayFast from './payfast';
|
||||
|
||||
class Payments extends Component {
|
||||
constructor() {
|
||||
|
|
@ -130,6 +131,7 @@ class Payments extends Component {
|
|||
square: false,
|
||||
create_stripe: this.isStripeEnabled(),
|
||||
stripe_email: ( this.isStripeEnabled() && stripeEmail ) || '',
|
||||
payfast: false,
|
||||
};
|
||||
return values;
|
||||
}
|
||||
|
|
@ -229,6 +231,7 @@ class Payments extends Component {
|
|||
getMethodOptions() {
|
||||
const { getInputProps } = this.formData;
|
||||
const { countryCode, profileItems } = this.props;
|
||||
|
||||
const methods = [
|
||||
{
|
||||
key: 'stripe',
|
||||
|
|
@ -318,6 +321,32 @@ class Payments extends Component {
|
|||
) &&
|
||||
[ 'US', 'CA', 'JP', 'GB', 'AU' ].includes( countryCode ),
|
||||
},
|
||||
{
|
||||
key: 'payfast',
|
||||
title: __( 'PayFast', 'woocommerce-admin' ),
|
||||
content: (
|
||||
<Fragment>
|
||||
{ __(
|
||||
'The PayFast extension for WooCommerce enables you to accept payments by Credit Card and EFT via one of South Africa’s most popular payment gateways. No setup fees or monthly subscription costs.',
|
||||
'woocommerce-admin'
|
||||
) }
|
||||
<p>
|
||||
{ __(
|
||||
'Selecting this extension will configure your store to use South African rands as the selected currency.',
|
||||
'woocommerce-admin'
|
||||
) }
|
||||
</p>
|
||||
</Fragment>
|
||||
),
|
||||
before: (
|
||||
<img
|
||||
src={ wcAssetUrl + 'images/payfast.png' }
|
||||
alt="PayFast logo"
|
||||
/>
|
||||
),
|
||||
after: <FormToggle { ...getInputProps( 'payfast' ) } />,
|
||||
visible: [ 'ZA' ].includes( countryCode ),
|
||||
},
|
||||
];
|
||||
|
||||
return filter( methods, ( method ) => method.visible );
|
||||
|
|
@ -340,6 +369,7 @@ class Payments extends Component {
|
|||
'klarna-checkout': values.klarna_checkout,
|
||||
'klarna-payments': values.klarna_payments,
|
||||
square: values.square,
|
||||
payfast: values.payfast,
|
||||
};
|
||||
return keys( pickBy( methods ) );
|
||||
}
|
||||
|
|
@ -352,6 +382,7 @@ class Payments extends Component {
|
|||
'klarna-checkout-for-woocommerce': values.klarna_checkout,
|
||||
'klarna-payments-for-woocommerce': values.klarna_payments,
|
||||
'woocommerce-square': values.square,
|
||||
'woocommerce-payfast-gateway': values.payfast,
|
||||
};
|
||||
return keys( pickBy( pluginSlugs ) );
|
||||
}
|
||||
|
|
@ -380,7 +411,8 @@ class Payments extends Component {
|
|||
values.paypal ||
|
||||
values.klarna_checkout ||
|
||||
values.klarna_payments ||
|
||||
values.square;
|
||||
values.square ||
|
||||
values.payfast;
|
||||
|
||||
const { showIndividualConfigs } = this.state;
|
||||
const { activePlugins, countryCode, isJetpackConnected } = this.props;
|
||||
|
|
@ -526,6 +558,21 @@ class Payments extends Component {
|
|||
showIndividualConfigs &&
|
||||
methods.includes( 'klarna-payments' ),
|
||||
},
|
||||
{
|
||||
key: 'payfast',
|
||||
label: __( 'Enable PayFast', 'woocommerce-admin' ),
|
||||
description: __(
|
||||
'Connect your store to your PayFast account',
|
||||
'woocommerce-admin'
|
||||
),
|
||||
content: (
|
||||
<PayFast
|
||||
markConfigured={ this.markConfigured }
|
||||
setRequestPending={ this.setMethodRequestPending }
|
||||
/>
|
||||
),
|
||||
visible: showIndividualConfigs && methods.includes( 'payfast' ),
|
||||
},
|
||||
];
|
||||
|
||||
return filter( steps, ( step ) => step.visible );
|
||||
|
|
|
|||
|
|
@ -0,0 +1,181 @@
|
|||
/**
|
||||
* External dependencies
|
||||
*/
|
||||
import { __ } from '@wordpress/i18n';
|
||||
import { Component, Fragment } from '@wordpress/element';
|
||||
import { Button } from '@wordpress/components';
|
||||
import interpolateComponents from 'interpolate-components';
|
||||
import { compose } from '@wordpress/compose';
|
||||
import { withDispatch } from '@wordpress/data';
|
||||
|
||||
/**
|
||||
* WooCommerce dependencies
|
||||
*/
|
||||
import { Form, Link, TextControl } from '@woocommerce/components';
|
||||
|
||||
/**
|
||||
* Internal dependencies
|
||||
*/
|
||||
import { recordEvent } from 'lib/tracks';
|
||||
|
||||
class PayFast extends Component {
|
||||
getInitialConfigValues = () => {
|
||||
return {
|
||||
merchant_id: '',
|
||||
merchant_key: '',
|
||||
pass_phrase: '',
|
||||
};
|
||||
};
|
||||
|
||||
validate = ( values ) => {
|
||||
const errors = {};
|
||||
|
||||
if ( ! values.merchant_id ) {
|
||||
errors.merchant_id = __(
|
||||
'Please enter your merchant ID',
|
||||
'woocommerce-admin'
|
||||
);
|
||||
}
|
||||
|
||||
if ( ! values.merchant_key ) {
|
||||
errors.merchant_key = __(
|
||||
'Please enter your merchant key',
|
||||
'woocommerce-admin'
|
||||
);
|
||||
}
|
||||
|
||||
if ( ! values.pass_phrase ) {
|
||||
errors.pass_phrase = __(
|
||||
'Please enter your passphrase',
|
||||
'woocommerce-admin'
|
||||
);
|
||||
}
|
||||
|
||||
return errors;
|
||||
};
|
||||
|
||||
updateSettings = async ( values ) => {
|
||||
const {
|
||||
createNotice,
|
||||
isSettingsError,
|
||||
updateOptions,
|
||||
markConfigured,
|
||||
setRequestPending,
|
||||
} = this.props;
|
||||
|
||||
setRequestPending( true );
|
||||
|
||||
// Because the PayFast extension only works with the South African Rand
|
||||
// currency, force the store to use it while setting the PayFast settings
|
||||
await updateOptions( {
|
||||
woocommerce_currency: 'ZAR',
|
||||
woocommerce_payfast_settings: {
|
||||
merchant_id: values.merchant_id,
|
||||
merchant_key: values.merchant_key,
|
||||
pass_phrase: values.pass_phrase,
|
||||
enabled: 'yes',
|
||||
},
|
||||
} );
|
||||
|
||||
if ( ! isSettingsError ) {
|
||||
recordEvent( 'tasklist_payment_connect_method', {
|
||||
payment_method: 'payfast',
|
||||
} );
|
||||
setRequestPending( false );
|
||||
markConfigured( 'payfast' );
|
||||
createNotice(
|
||||
'success',
|
||||
__( 'PayFast connected successfully', 'woocommerce-admin' )
|
||||
);
|
||||
} else {
|
||||
setRequestPending( false );
|
||||
createNotice(
|
||||
'error',
|
||||
__(
|
||||
'There was a problem saving your payment setings',
|
||||
'woocommerce-admin'
|
||||
)
|
||||
);
|
||||
}
|
||||
};
|
||||
|
||||
render() {
|
||||
const helpText = interpolateComponents( {
|
||||
mixedString: __(
|
||||
'Your API details can be obtained from your {{link}}PayFast account{{/link}}',
|
||||
'woocommerce-admin'
|
||||
),
|
||||
components: {
|
||||
link: (
|
||||
<Link
|
||||
href="https://www.payfast.co.za/"
|
||||
target="_blank"
|
||||
type="external"
|
||||
/>
|
||||
),
|
||||
},
|
||||
} );
|
||||
|
||||
return (
|
||||
<Form
|
||||
initialValues={ this.getInitialConfigValues() }
|
||||
onSubmitCallback={ this.updateSettings }
|
||||
validate={ this.validate }
|
||||
>
|
||||
{ ( { getInputProps, handleSubmit } ) => {
|
||||
return (
|
||||
<Fragment>
|
||||
<TextControl
|
||||
label={ __(
|
||||
'Merchant ID',
|
||||
'woocommerce-admin'
|
||||
) }
|
||||
required
|
||||
{ ...getInputProps( 'merchant_id' ) }
|
||||
/>
|
||||
<TextControl
|
||||
label={ __(
|
||||
'Merchant Key',
|
||||
'woocommerce-admin'
|
||||
) }
|
||||
required
|
||||
{ ...getInputProps( 'merchant_key' ) }
|
||||
/>
|
||||
<TextControl
|
||||
label={ __(
|
||||
'Passphrase',
|
||||
'woocommerce-admin'
|
||||
) }
|
||||
required
|
||||
{ ...getInputProps( 'pass_phrase' ) }
|
||||
/>
|
||||
<Button onClick={ handleSubmit } isPrimary>
|
||||
{ __( 'Proceed', 'woocommerce-admin' ) }
|
||||
</Button>
|
||||
<Button
|
||||
onClick={ () => {
|
||||
this.props.markConfigured( 'payfast' );
|
||||
} }
|
||||
>
|
||||
{ __( 'Skip', 'woocommerce-admin' ) }
|
||||
</Button>
|
||||
<p>{ helpText }</p>
|
||||
</Fragment>
|
||||
);
|
||||
} }
|
||||
</Form>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
export default compose(
|
||||
withDispatch( ( dispatch ) => {
|
||||
const { createNotice } = dispatch( 'core/notices' );
|
||||
const { updateOptions } = dispatch( 'wc-api' );
|
||||
|
||||
return {
|
||||
createNotice,
|
||||
updateOptions,
|
||||
};
|
||||
} )
|
||||
)( PayFast );
|
||||
|
|
@ -554,6 +554,7 @@ class Onboarding {
|
|||
'klarna-payments-for-woocommerce' => 'klarna-payments-for-woocommerce/klarna-payments-for-woocommerce.php',
|
||||
'woocommerce-square' => 'woocommerce-square/woocommerce-square.php',
|
||||
'woocommerce-shipstation-integration' => 'woocommerce-shipstation-integration/woocommerce-shipstation.php',
|
||||
'woocommerce-payfast-gateway' => 'woocommerce-payfast-gateway/gateway-payfast.php',
|
||||
)
|
||||
);
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in New Issue