From 1cc7e0288f1eb105b984b097fb2906748731c94c Mon Sep 17 00:00:00 2001 From: Bec Scott Date: Mon, 24 Feb 2020 13:54:46 +1000 Subject: [PATCH] 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 --- .../task-list/tasks/payments/index.js | 49 ++++- .../task-list/tasks/payments/payfast.js | 181 ++++++++++++++++++ .../src/Features/Onboarding.php | 1 + 3 files changed, 230 insertions(+), 1 deletion(-) create mode 100644 plugins/woocommerce-admin/client/dashboard/task-list/tasks/payments/payfast.js diff --git a/plugins/woocommerce-admin/client/dashboard/task-list/tasks/payments/index.js b/plugins/woocommerce-admin/client/dashboard/task-list/tasks/payments/index.js index 4af153bdcbf..6ccb5e3930c 100644 --- a/plugins/woocommerce-admin/client/dashboard/task-list/tasks/payments/index.js +++ b/plugins/woocommerce-admin/client/dashboard/task-list/tasks/payments/index.js @@ -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: ( + + { __( + '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' + ) } +

+ { __( + 'Selecting this extension will configure your store to use South African rands as the selected currency.', + 'woocommerce-admin' + ) } +

+ + ), + before: ( + PayFast logo + ), + after: , + 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: ( + + ), + visible: showIndividualConfigs && methods.includes( 'payfast' ), + }, ]; return filter( steps, ( step ) => step.visible ); diff --git a/plugins/woocommerce-admin/client/dashboard/task-list/tasks/payments/payfast.js b/plugins/woocommerce-admin/client/dashboard/task-list/tasks/payments/payfast.js new file mode 100644 index 00000000000..8dce2da9858 --- /dev/null +++ b/plugins/woocommerce-admin/client/dashboard/task-list/tasks/payments/payfast.js @@ -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: ( + + ), + }, + } ); + + return ( +
+ { ( { getInputProps, handleSubmit } ) => { + return ( + + + + + + +

{ helpText }

+ + ); + } } +
+ ); + } +} + +export default compose( + withDispatch( ( dispatch ) => { + const { createNotice } = dispatch( 'core/notices' ); + const { updateOptions } = dispatch( 'wc-api' ); + + return { + createNotice, + updateOptions, + }; + } ) +)( PayFast ); diff --git a/plugins/woocommerce-admin/src/Features/Onboarding.php b/plugins/woocommerce-admin/src/Features/Onboarding.php index d5e93443af3..197cc716a10 100644 --- a/plugins/woocommerce-admin/src/Features/Onboarding.php +++ b/plugins/woocommerce-admin/src/Features/Onboarding.php @@ -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', ) ); }