mirror of
https://github.com/woocommerce/woocommerce-paypal-payments.git
synced 2025-08-31 06:52:50 +08:00
Use custom save card payment checkbox and show/hide it based on vaulting setting
This commit is contained in:
parent
13b5338627
commit
880bd48271
6 changed files with 45 additions and 13 deletions
|
@ -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>
|
||||
</>
|
||||
|
|
|
@ -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>
|
||||
</>
|
||||
)
|
||||
}
|
||||
|
|
|
@ -12,7 +12,6 @@ registerPaymentMethod({
|
|||
canMakePayment: () => {return true},
|
||||
supports: {
|
||||
showSavedCards: true,
|
||||
showSaveOption: true,
|
||||
features: config.supports
|
||||
}
|
||||
})
|
||||
|
|
|
@ -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);
|
||||
|
|
|
@ -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 {
|
||||
|
|
|
@ -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' ),
|
||||
);
|
||||
}
|
||||
|
||||
|
|
Loading…
Add table
Add a link
Reference in a new issue