Use custom save card payment checkbox and show/hide it based on vaulting setting

This commit is contained in:
Emili Castells Guasch 2024-05-22 15:52:45 +02:00
parent 13b5338627
commit 880bd48271
6 changed files with 45 additions and 13 deletions

View file

@ -14,11 +14,14 @@ export function CardFields({config, eventRegistration, emitResponse}) {
const {responseTypes} = emitResponse;
const [cardFieldsForm, setCardFieldsForm] = useState();
const getCardFieldsForm = (cardFieldsForm) => {
setCardFieldsForm(cardFieldsForm)
}
const getSavePayment = (savePayment) => {
localStorage.setItem('ppcp-save-card-payment', savePayment);
}
const wait = (milliseconds) => {
return new Promise((resolve) => {
console.log('start...')
@ -65,7 +68,12 @@ export function CardFields({config, eventRegistration, emitResponse}) {
}}
>
<PayPalCardFieldsForm/>
<CheckoutHandler getCardFieldsForm={getCardFieldsForm}/>
<CheckoutHandler
getCardFieldsForm={getCardFieldsForm}
getSavePayment={getSavePayment}
saveCardText={config.save_card_text}
is_vaulting_enabled={config.is_vaulting_enabled}
/>
</PayPalCardFieldsProvider>
</PayPalScriptProvider>
</>

View file

@ -1,12 +1,21 @@
import {useEffect} from '@wordpress/element';
import {usePayPalCardFields} from "@paypal/react-paypal-js";
export const CheckoutHandler = ({getCardFieldsForm}) => {
export const CheckoutHandler = ({getCardFieldsForm, getSavePayment, saveCardText, is_vaulting_enabled}) => {
const {cardFieldsForm} = usePayPalCardFields();
useEffect(() => {
getCardFieldsForm(cardFieldsForm)
}, []);
return null
if (!is_vaulting_enabled) {
return null;
}
return (
<>
<input type="checkbox" id="save" name="save" onChange={(e) => getSavePayment(e.target.checked)}/>
<label htmlFor="save">{saveCardText}</label>
</>
)
}

View file

@ -12,7 +12,6 @@ registerPaymentMethod({
canMakePayment: () => {return true},
supports: {
showSavedCards: true,
showSaveOption: true,
features: config.supports
}
})

View file

@ -10,7 +10,7 @@ export async function createOrder() {
nonce: config.scriptData.ajax.create_order.nonce,
context: config.scriptData.context,
payment_method: 'ppcp-credit-card-gateway',
save_payment_method: true,
save_payment_method: localStorage.getItem('ppcp-save-card-payment') === 'true',
}),
})
.then((response) => response.json())
@ -36,6 +36,7 @@ export function onApprove(data) {
.then((response) => response.json())
.then((data) => {
console.log(data)
localStorage.removeItem('ppcp-save-card-payment');
})
.catch((err) => {
console.error(err);

View file

@ -53,7 +53,8 @@ return array(
$container->get( 'wcgateway.credit-card-gateway' ),
function () use ( $container ): SmartButtonInterface {
return $container->get( 'button.smart-button' );
}
},
$container->get( 'wcgateway.settings' )
);
},
'blocks.settings.final_review_enabled' => static function ( ContainerInterface $container ): bool {

View file

@ -12,11 +12,13 @@ namespace WooCommerce\PayPalCommerce\Blocks;
use Automattic\WooCommerce\Blocks\Payments\Integrations\AbstractPaymentMethodType;
use WooCommerce\PayPalCommerce\Button\Assets\SmartButtonInterface;
use WooCommerce\PayPalCommerce\WcGateway\Gateway\CreditCardGateway;
use WooCommerce\PayPalCommerce\WcGateway\Settings\Settings;
/**
* Class AdvancedCardPaymentMethod
*/
class AdvancedCardPaymentMethod extends AbstractPaymentMethodType {
/**
* The URL of this module.
*
@ -45,6 +47,13 @@ class AdvancedCardPaymentMethod extends AbstractPaymentMethodType {
*/
private $smart_button;
/**
* The settings.
*
* @var Settings
*/
protected $settings;
/**
* AdvancedCardPaymentMethod constructor.
*
@ -52,18 +61,21 @@ class AdvancedCardPaymentMethod extends AbstractPaymentMethodType {
* @param string $version The assets version.
* @param CreditCardGateway $gateway Credit card gateway.
* @param SmartButtonInterface|callable $smart_button The smart button script loading handler.
* @param Settings $settings The settings.
*/
public function __construct(
string $module_url,
string $version,
CreditCardGateway $gateway,
$smart_button
$smart_button,
Settings $settings
) {
$this->name = CreditCardGateway::ID;
$this->module_url = $module_url;
$this->version = $version;
$this->gateway = $gateway;
$this->smart_button = $smart_button;
$this->settings = $settings;
}
/**
@ -100,11 +112,13 @@ class AdvancedCardPaymentMethod extends AbstractPaymentMethodType {
$script_data = $this->smart_button()->script_data();
return array(
'id' => $this->name,
'title' => $this->gateway->title,
'description' => $this->gateway->description,
'scriptData' => $script_data,
'supports' => $this->gateway->supports,
'id' => $this->name,
'title' => $this->gateway->title,
'description' => $this->gateway->description,
'scriptData' => $script_data,
'supports' => $this->gateway->supports,
'save_card_text' => esc_html__( 'Save your card', 'woocommerce-paypal-payments' ),
'is_vaulting_enabled' => $this->settings->has( 'vault_enabled_dcc' ) && $this->settings->get( 'vault_enabled_dcc' ),
);
}