I was trying to implement PayPal check out with Angular 17 but cannot get on create to be triggered when pressing PayPal button
PayPal check out window does show up but the amount is not incorrect and it only show 0.01 USD.
I even put console log message inside on create to check if it's triggered or not but nothing show up.
My implementation:
paypal.Buttons(
{ style: {
layout:'horizontal',
color:'blue',
shape:'rect',
label:'paypal',
}},
{
createOrder: (data: any, actions: any) => {
console.log("Create Order *********************");
return actions.order.create({
purchase_units:[
{
amount:{
value:this.amountPrice.toString(),
currency_code:'USD'
}
}
]
});
},
onApprove: (data: any, actions: any) => {
console.log("onApprove *********************");
return actions.order.capture().then((details: any) => {
console.log('Payment details:', details);
});
},
onError: (err: any) => {
console.log('Error creating PayPal order:', err);
}
}
).render(this.paypalButtonContainer.nativeElement);
The problem is you are passing two objects as arguments, and the createOrder is in the second object. Basically you have an extra } that closes the first object, and you begin a new one (which is ignored)...
{ style: {
layout:'horizontal',
color:'blue',
shape:'rect',
label:'paypal',
}},
{
Ensure your createOrder and everything else is in the same single object as the style ....
{ style: {
layout:'horizontal',
color:'blue',
shape:'rect',
label:'paypal',
},
createOrder: () => {
},
...
Moreover, actions.order.create and actions.order.capture are deprecated functions that must not be used, I have seen emails from PayPal say they will be sunset later this year. Instead, all JS SDK integrations need to be changed to use a backend for order creation and capture. See the standard integration guide (its backend samples are in node.js but can of course be implemented in any language)