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 basic card payment flow

Browse source
This commit is contained in:
Emili Castells Guasch 2024-05-16 12:29:05 +02:00
parent e3ac190849
commit aec32512ce
2 changed files with 47 additions and 61 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -10,69 +10,65 @@ 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
}),
async function createOrder() {
return fetch(config.scriptData.ajax.create_order.endpoint, {
method: "POST",
headers: {
"Content-Type": "application/json",
},
body: JSON.stringify({
nonce: config.scriptData.ajax.create_order.nonce,
context: config.scriptData.context,
payment_method: 'ppcp-credit-card-gateway',
createaccount: false
}),
})
.then((response) => response.json())
.then((order) => {
return order.data.id;
})
.catch((err) => {
console.error(err);
});
}
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 onApprove = 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,
})
function onApprove(data) {
fetch(config.scriptData.ajax.approve_order.endpoint, {
method: "POST",
headers: {
"Content-Type": "application/json",
},
body: JSON.stringify({
order_id: data.orderID,
nonce: config.scriptData.ajax.approve_order.nonce,
}),
})
.then((response) => response.json())
.then((data) => {
console.log(data)
return {
type: responseTypes.SUCCESS,
};
})
.catch((err) => {
console.error(err);
});
const json = await res.json();
if (!json.success) {
console.error(json)
}
console.log(json)
} catch (err) {
console.error(err);
}
};
}
return (
<>
<PayPalScriptProvider
options={{
clientId:
"abc123",
clientId: config.scriptData.client_id,
components: "card-fields",
dataNamespace: 'custom-namespace',
dataNamespace: 'ppcp-block-card-fields',
}}
>
<PayPalCardFieldsProvider
createOrder={createOrder}
onApprove={onApprove}
onError={(err) => {
console.log(err);
console.error(err);
}}
>
<PayPalCardFieldsForm/>

16
modules/ppcp-blocks/resources/js/Components/checkout-handler.js
View file

@ -7,21 +7,11 @@ export const CheckoutHandler = ({onPaymentSetup, responseTypes}) => {
useEffect(() => {
const unsubscribe = onPaymentSetup(async () => {
cardFieldsForm.submit()
.then(() => {
return {
type: responseTypes.SUCCESS,
meta: {
paymentMethodData: {
foo: 'bar',
}
}
};
})
.catch((err) => {
await cardFieldsForm.submit()
.catch((error) => {
console.error(error)
return {
type: responseTypes.ERROR,
message: err
}
});
})