My, I followed this exactly (with the only change being my buttons in another component) and I get an 'ERROR Error: Document is ready and element myPaypalButtons does not exist' error... is anybody else finding the same issue?
nice tutorial! but better put it into ngOnInit and not in the constructor, as it may happen that the template is not rendered when the component calls the constructor. then the render() won't work as the div myPaypalButtons is not yet in the DOM
I like the the 3 buttons layout without the PayPal login screen, but do you have the equivalent JS CDN instead of NPM package where I can use the same render object to render these 3 (or 2) buttons with the same effects? Also, can I hide that PayPal Later button? Appreciate if you can reply, thank you!
Hello, You can render each button individually without the NPM package. 1) Add the PayPal script element in the head tags of the indext.html page 2) Go to the component that you are adding the buttons to and declare the paypal variable. declare var paypal; Watch the video on loading and Using JavaScript for more understanding - ua-cam.com/video/k6o8H4YMwGE/v-deo.html 3) Call this to render the single button: paypal.Buttons( { fundingSource: paypal.FUNDING.PAYPAL, } ).render("#paypalButtons"); Here are the types of fundingSource you can use for each button: paypal.FUNDING.PAYPAL, paypal.FUNDING.VENMO, paypal.FUNDING.CREDIT, paypal.FUNDING.CARD If you want to set the other parameters for the buttons such as currency and the amount, look at this page from the Paypal Developer website to set the values.
@@Codeible omg thank you man. I've been looking at the documentation for days to no results. This is the first explanation in Angular that actually makes sense. Thank you!
the only features I see in render are id, currency, value, and onApprove. How would I be able to modify the description and quantity of each item bought? I have variables for both in my code.
Hello sir, I'm getting license issue when tried to use the URL with Client Id. I wanted to use the in one of the component.html. Am I allowed to use it there or should it be used inside index in html only?
Only in the index.html If you want to put it in another component, you need to create the Script element in the Typecript file and then add it to the DOM. Watch this video @2:11 ua-cam.com/video/k6o8H4YMwGE/v-deo.html
Hello, locate the creditCardPayments package in the node_module folder. Go into the creditCardPayment.js file and add the style object code in paypal.Buttons( { style: { layout: 'vertical', color: 'blue', shape: 'rect', label: 'paypal' }, createOrder ..., onApprove .... } ).render(...) Replace the values in the styles object. See the supported styles here: developer.paypal.com/docs/checkout/integration-features/customize-button/#shape
Hello, you need to add this code inside the head tags of your index.html page. You get the client id from your Paypal account. script src="www.paypal.com/sdk/js?client-id=" script
this is crazy! never thought it would be so simple after days of searching. THANK YOU
My, I followed this exactly (with the only change being my buttons in another component) and I get an 'ERROR Error: Document is ready and element myPaypalButtons does not exist' error... is anybody else finding the same issue?
this is soo cool! can t wait to do it myself
Thank you sir, Keep teaching us.
nice tutorial! but better put it into ngOnInit and not in the constructor, as it may happen that the template is not rendered when the component calls the constructor. then the render() won't work as the div myPaypalButtons is not yet in the DOM
Wow I nevee thought it is this simple to implement Paypal payment gateway. Thank you for teaching us 🙂
Great video. Very nicely done.
Well explained! Thanks for the video
I like the the 3 buttons layout without the PayPal login screen, but do you have the equivalent JS CDN instead of NPM package where I can use the same render object to render these 3 (or 2) buttons with the same effects? Also, can I hide that PayPal Later button? Appreciate if you can reply, thank you!
Hello,
You can render each button individually without the NPM package.
1) Add the PayPal script element in the head tags of the indext.html page
2) Go to the component that you are adding the buttons to and declare the paypal variable.
declare var paypal;
Watch the video on loading and Using JavaScript for more understanding - ua-cam.com/video/k6o8H4YMwGE/v-deo.html
3) Call this to render the single button:
paypal.Buttons(
{
fundingSource: paypal.FUNDING.PAYPAL,
}
).render("#paypalButtons");
Here are the types of fundingSource you can use for each button:
paypal.FUNDING.PAYPAL,
paypal.FUNDING.VENMO,
paypal.FUNDING.CREDIT,
paypal.FUNDING.CARD
If you want to set the other parameters for the buttons such as currency and the amount, look at this page from the Paypal Developer website to set the values.
Link to site:
developer.paypal.com/docs/checkout/integrate/
@@Codeible omg thank you man. I've been looking at the documentation for days to no results. This is the first explanation in Angular that actually makes sense. Thank you!
the only features I see in render are id, currency, value, and onApprove. How would I be able to modify the description and quantity of each item bought? I have variables for both in my code.
Very Thanks
I have error
ERROR Error: Document is ready and element "myButtomPayment" does not exist
You need to add the # symbol with the id.
@@louisyan135 thank you very much
Hi how can i make the value dynamic
Hello, instead of calling the render function in the constructor, call it individually.
@@Codeible do you have a reference for this one ? Thanks in advance.
If I have a personal PayPal account, can I apply the PayPal payment button?
You should be able to use your personal PayPal account and turn it into a developer account.
Is there any security issues by hardcoding those values on the frontend? Can the user change the $ amount value in your front end code?
Hello, what do you mean by changing the amount in front end? You mean through the console on the browser?
That has no effect and it is safe.
Question: How do I change the currency in GBP? I already wrote - currency: "GBP", - instead of - currency: "USD" - but it doesn't work
Hello, the supported currency is here: developer.paypal.com/api/rest/reference/currency-codes/
@@Codeible thanks for the reply but as you can see I am writing the same code listed in your link but it is not working
@@alessandrocinque4542 Hello, what link are you referring to? You need to use your own client id.
@@Codeible Hi I meant the one you just sent me to check out the currency codes
@@alessandrocinque4542 Should work, I just clicked on it.
You can search "paypal api supported currencies" and it should show up.
This only works with USD. Cannot get it to work other currencies such as "EUR", "GBP"
Hello sir, I'm getting license issue when tried to use the URL with Client Id. I wanted to use the in one of the component.html. Am I allowed to use it there or should it be used inside index in html only?
Only in the index.html
If you want to put it in another component, you need to create the Script element in the Typecript file and then add it to the DOM.
Watch this video @2:11
ua-cam.com/video/k6o8H4YMwGE/v-deo.html
Can only be used in the constructor? If I need the value of "value" to be dynamic, how can I use it outside the constructor?
Hello, it can be used anywhere.
where did you put it bro
Pls with this method works with Ionic 4 mobile app
Hello, it should it if uses JavaScript
@@Codeible Thanks alot I will give it a try now
thanks a lot sir, but we did not use the security key, is that right ؟
Hello, what do you mean by security key?
Hi, Paypal gives us ClientID and secret key, but we did not use secret key, is that safe !!
@@hazemsweed9979 Yes
Thanks a lot for the replies 🌹
thank you
how can i change button color and shape?
Hello, locate the creditCardPayments package in the node_module folder.
Go into the creditCardPayment.js file and add the style object code in
paypal.Buttons(
{
style: {
layout: 'vertical',
color: 'blue',
shape: 'rect',
label: 'paypal'
},
createOrder ...,
onApprove ....
}
).render(...)
Replace the values in the styles object. See the supported styles here:
developer.paypal.com/docs/checkout/integration-features/customize-button/#shape
How to make it live?
Just switch it to Live mode in the console.
@@Codeible you mean I should create an app on live mode and then use client id from live account?
@@PHPTechLife Yes
doesnt work , ReferenceError: paypal is not defined , no documentation
Hello, you need to add this code inside the head tags of your index.html page. You get the client id from your Paypal account.
script
src="www.paypal.com/sdk/js?client-id="
script
@@Codeible sorry about earlier actually it worked when i put the script inside body tag , inside head tag it caused a problem
Only USD works.
Hello,
See the supported currencies:
developer.paypal.com/docs/api/reference/currency-codes/
Hi did you manage to make it work for another currency?
I still cannot get it to work with other currencies.