woocommerce/plugins/woocommerce-admin/docs/examples/extensions/payment-gateway-suggestions/js/index.js

49 lines
1.3 KiB
JavaScript

/**
* External dependencies
*/
import { __ } from '@wordpress/i18n';
import { createElement } from '@wordpress/element';
import { PAYMENT_GATEWAYS_STORE_NAME } from '@woocommerce/data';
import { registerPlugin } from '@wordpress/plugins';
import { useDispatch } from '@wordpress/data';
import { WooPaymentGatewayConfigure } from '@woocommerce/onboarding';
const MyPaymentGatewaySuggestion = () => {
const { updatePaymentGateway } = useDispatch( PAYMENT_GATEWAYS_STORE_NAME );
return (
<WooPaymentGatewayConfigure id={ 'my-slot-filled-gateway' }>
{ ( { markConfigured, paymentGateway } ) => {
const completeSetup = () => {
updatePaymentGateway( paymentGateway.id, {
settings: {
my_setting: 123,
},
} ).then( () => {
markConfigured();
} );
};
return (
<>
<p>
{ __(
"This payment's configuration screen can be slot filled with any custom content.",
'woocommerce-admin'
) }
</p>
<button onClick={ completeSetup }>
{ __( 'Complete', 'woocommerce-admin' ) }
</button>
</>
);
} }
</WooPaymentGatewayConfigure>
);
};
export default registerPlugin( 'my-payment-gateway-suggestion', {
render: MyPaymentGatewaySuggestion,
scope: 'woocommerce-tasks',
} );