woocommerce/woocommerce-paypal-payments
2
0
Fork 0
mirror of https://github.com/woocommerce/woocommerce-paypal-payments.git synced 2025-09-03 08:37:53 +08:00
Code Issues Projects Packages Wiki Activity Actions 7

Add card fields component (WIP)

Browse source
This commit is contained in:
Emili Castells Guasch 2024-04-17 17:35:30 +02:00
parent 94379e4feb
commit 3f61960880
1 changed files with 72 additions and 3 deletions
Download patch file Download diff file Expand all files Collapse all files

75
modules/ppcp-blocks/resources/js/Components/CardFields.js
View file

@ -1,14 +1,83 @@
import {useEffect} from '@wordpress/element';
export function CardFields({config}) {
export function CardFields({config, eventRegistration, emitResponse}) {
const {onPaymentSetup, onCheckoutFail, onCheckoutValidation} = eventRegistration;
const {responseTypes} = emitResponse;
const createOrder = async () => {
try {
const res = await fetch(config.scriptData.ajax.create_order.endpoint, {
method: 'POST',
credentials: 'same-origin',
body: JSON.stringify({
nonce: config.scriptData.ajax.create_order.nonce,
context: config.scriptData.context,
payment_method: 'ppcp-credit-card-gateway',
createaccount: false
}),
});
const json = await res.json();
if (!json.success) {
console.error(json)
}
console.log(json.data.id)
return json.data.id;
} catch (err) {
console.error(err);
}
};
const handleApprove = async (data, actions) => {
try {
const res = await fetch(config.scriptData.ajax.approve_order.endpoint, {
method: 'POST',
credentials: 'same-origin',
body: JSON.stringify({
nonce: config.scriptData.ajax.approve_order.nonce,
order_id: data.orderID,
})
});
const json = await res.json();
if (!json.success) {
console.error(json)
}
console.log(json)
} catch (err) {
console.error(err);
}
};
const cardField = paypal.CardFields({
createOrder: () => {},
onApprove: () => {},
createOrder: () => {
return createOrder();
},
onApprove: (data, actions) => {
return handleApprove(data, actions);
},
onError: function (error) {
console.error(error)
}
});
useEffect(() => {
const unsubscribe = onPaymentSetup(() => {
cardField.submit()
.catch((error) => {
console.error(error)
return {type: responseTypes.ERROR};
});
return true;
});
return unsubscribe;
}, [onPaymentSetup]);
useEffect(() => {
if (cardField.isEligible()) {
const numberField = cardField.NumberField();