Angular 9 - How to integrate Paypal chekout - 2020

[@codeupdate]

If you have any question you can connect with me on IG: kevin_lems

[@FreddyOneKenobi]

I'm going crazy, I don't know how to calculate the amount to pass to PayPal.
I've tried everything:
global variable, converting the function to arrow function, services.
Nothing works, Kevin do you have any idea?

[@sanakhan4153]

Hey I achieved thanks, but how can we work with live mode, its works for me on sandbox account

[@codeupdate]

Hi, to need get the live key from your dashboard and use it.

[@sanakhan4153]

@@codeupdate ok I'll try n let you know

[@AmirebrahimMoazami]

Hello Kevin
PayPal button isn't showing up on the page ( I am using angular 9 with ionic 5 frameworks).

[@andreia7422]

did you resolve this problem?

[@AmirebrahimMoazami]

@@andreia7422 YES:
HTML:
TS file:
//this has custom elements you should localize for yourself
@ViewChild('paypalRef', { static: false }) private paypalRef: ElementRef;
paypal.Buttons(
{
style:
{
layout: 'horizontal',
color: 'blue',
type: 'paypal',
shape: 'rect',
},
createOrder: (data, actions) => {
return actions.order.create({
purchase_units: [{
amount: {
value: parseFloat(this.total.toFixed(2)),
currency_code: 'USD'
}
}]
});
},
// Finalize the transaction
onApprove: (data, actions) => {
return actions.order.capture()
.then(_details => {
// Show a success message to the buyer
console.log(_details);
if (_details.status === 'COMPLETED') {
// tslint:disable-next-line
.subscribe(order => {
//what you want to do with the response data
}
});
}
alert('Transaction completed by ' + _details.payer.name.given_name + '!');
this.dismiss();
});
},
onError: error => {
console.log('Error in Payment');
}
}).render('#paypalRef')

[@mushfau]

paypal.Buttons({
style: {
layout: 'horizontal'
}
}).render(this.paypalRef.nativeElement)
In case anyone come across the error "Expected string or element selector to be passed"

[@leumassikevin]

Thanks for the video.

[@codeupdate]

You are welcome!

[@loanpincher2631]

paypal is not defined error, I dont know why I have this.

[@codeupdate]

Hey don't forget to declare a variable for paypal in the global.d.ts file.

[@loanpincher2631]

@@codeupdate Well I did. It seems (i read it somewhere) that my script hasn't finished loading when the var is read. So it is undefined. Could you please assist me somehow?

[@loanpincher2631]

@@codeupdate I got the buttons in a promise patch code, but it is still not working properly as the code is inside ".then" of the promise, after the buttons show, lots of post errors display in the console.

[@codeupdate]

Hey if you want you can contact me by email.
[e-mail]

[@derekmerkle9092]

Not sure if you figured this out, but this did it for me: You'll also get this error if your target element is inside a hidden element. If this is your HTML:
Hello World

[@ss_GOAT]

Zoom in, so I can see your code please...

[@codeupdate]

Sorry about that 🙏! I started zoom in the next video! Check them out 👌