We Keep Coding

Load PayPal JS SDK and render smart buttons onclick/onmouseover

I'd like to use the Paypal's smart buttons, because payment by card is also inserted as an option and the visitor/customer doesn't need to leave my page in order to purchase. Using the Pp code works fine, but I prefer to load the external javascript and to render the buttons on click or mouse over, mostly for speed and SEO purposes.
From my little knowledge, the below should work:
<div id="paypal-button-container"></div>
Pay by Paypal
<script>
// uncommented by me window.addEventListener('load', function() {
function initPayPalButton() {
paypal.Buttons({ // and here is the Uncaught ReferenceError: paypal is not defined
style: {
shape: 'rect',
color: 'gold',
layout: 'vertical',
label: 'checkout',
},
createOrder: function(data, actions) {
return actions.order.create({
purchase_units: [{
"description": "My awesome product",
"amount": {
"currency_code": "USD",
"value": 111
}
}]
});
},
onApprove: function(data, actions) {
return actions.order.capture().then(function(orderData) {
console.log('Capture result', orderData, JSON.stringify(orderData, null, 2));
const element = document.getElementById('paypal-button-container');
element.innerHTML = '';
element.innerHTML = '<h3>Thank you for your payment!</h3>';
});
},
onError: function(err) {
console.log(err);
}
}).render('#paypal-button-container');
//my approach starts
var e = document.createElement("script");
e.type = "text/javascript", e.async = 0, e.src = "https://www.paypal.com/sdk/js?client-id=xxx-yyy&enable-funding=venmo&currency=USD", (document.getElementsByTagName("head")[0] || document.getElementsByTagName("body")[0]).appendChild(e);
//my approach ends
}
// uncommented by me initPayPalButton();
// uncommented by me });
</script>
<!-- uncommented by me <script async src="https://www.paypal.com/sdk/js?client-id=xxx-yyy&enable-funding=venmo&currency=USD" data-sdk-integration-source="button-factory"></script>-->
Fails miserably, with the error message 'Uncaught ReferenceError: paypal is not defined'. You can see above where the error occurs.
Please help. I'm using jQuery as well, so any jQuery solution that works will be appreciated.
I've tried to append the sdk js above the render('#paypal-button-container'), it didn't work. I've also tried to have 2 functions triggered by onclick, one to load the sdk and the second to render the buttons... still no use.
OK, a little later....the best I could come up with was to have 2 functions: 1 that would load the external sdk and one that would render the buttons, then add 2 onclick events to the Pay by Paypal link:
onclick="loadpaypalsdk();setTimeout(initPayPalButton, 3000);"
This seems to work, although the 3s delay is a little annoying. Shorter than this is could trigger another error, due to the sdk not being completely loaded.
Surely there are other better ways? Any ideas?

You'll need an onload callback function to invoke paypal.Buttons after the PayPal JS SDK script finishes loading. Here's a loadAsync helper function for this...
//helper function
function loadAsync(url, callback) {
var s = document.createElement('script');
s.setAttribute('src', url); s.onload = callback;
document.head.insertBefore(s, document.head.firstElementChild);
}
// Example usage -- a callback function is inlined here
// (but could be a named function like your own initPayPalButton)
loadAsync('https://www.paypal.com/sdk/js?client-id=test&currency=USD', function() {
paypal.Buttons({
// Set up the transaction
createOrder: function(data, actions) {
return actions.order.create({
purchase_units: [{
amount: {
value: '0.01'
}
}]
});
},
// Finalize the transaction
onApprove: function(data, actions) {
return actions.order.capture().then(function(details) {
//...
});
}
}).render('#paypal-button-container');
});
I don't necessarily endorse your idea of only loading the JS SDK onclick/onmouseover; the buttons would appear faster if you render them on page load to a container div that is style="display:none;" , and then have your onclick/onmouseover reveal them with $('#paypal-button-container').show(); or similar

Paypal button event onshippingChange is not working at all can somebody tell me why?

Can somebody tell me why? This is a simple integration of paypal sdk for javascript. And It is working fine except that the event bellow onShippingChange is never fired. I've searching this for 2 days now. I need to update my price according to the user address.
src="https://www.paypal.com/sdk/js?client-id=XXXXXXXXX"> // Required. Replace SB_CLIENT_ID with your sandbox client ID.
</script>
<div id="paypal-button-container"></div>
<script>
paypal.Buttons({
createOrder: function(data, actions) {
// This function sets up the details of the transaction, including the amount and line item details.
console.log('createOrder ' + data);
return actions.order.create({
application_context : {
shipping_preference: 'SET_PROVIDED_ADDRESS'
},purchase_units: [{
shipping: {
address: {
address_line_1: '555 example bs',
admin_area_2: 'San bastard',
admin_area_1: 'CA',
postal_code: '95111',
country_code: 'CA'
}
},
amount: {
value: '0.01'
}
}]
});
},
onApprove: function(data, actions) {
console.log('onApprove ' + data);
// This function captures the funds from the transaction.
return actions.order.capture().then(function(details) {
// This function shows a transaction success message to your buyer.
alert('Transaction completed by ' + details.payer.name.given_name);
});
},
onClientAuthorization: (data) => {
console.log('onClientAuthorization - you should probably inform your server about completed transaction at this point', data);
this.showSuccess = true;
},
onShippingChange: (data, actions) => {
// this event is never fired no matter what I do
console.log('onShippingChange - Shipping information have changed', data, actions);
},
onCancel: (data, actions) => {
console.log('OnCancel', data, actions);
},
onError: err => {
console.log('OnError', err);
},
onClick: (data, actions) => {
console.log('onClick', data, actions);
}
}).render('#paypal-button-container');
//This function displays Smart Payment Buttons on your web page.
</script>

here is the solution of this question first of the shippings fees can only be managed after you enable it on your account (Login to PayPal >> Hover over to the profile name >> Account Settings >> Shipping >> Here you can create shipping profiles as per your requirements.) it will be available only for customer who pay from a paypal account. For any other payment you won't be able to manage it.
Regards

PayPal integration 400 Bad Request / Order could not be captured

I'm trying to integrate PayPal and I get the error below
You can test the code here with any PayPal sandbox buyer account:
Codepen
Here is the code I'm using
paypal.Buttons({
createOrder: function (data, actions) {
// This function sets up the details of the transaction, including the amount and line item details.
return actions.order.create({
purchase_units: [{
amount: {
value: '5.00'
}
}]
});
},
onApprove: function (data, actions) {
// This function captures the funds from the transaction.
return actions.order.capture().then(details => {
// This function shows a transaction success message to your buyer.
alert('Transaction completed by ' + details.payer.name.given_name);
});
}
}).render('#paypal-button-container');
more about the error

Testing your Codepen from the Network tab, you are getting a COMPLIANCE_VIOLATION -- probably due to the country of the account you are testing with not being properly set up in sandbox.
Try simply using a different country for your testing within sandbox. Create a new business account at https://www.paypal.com/signin?intent=developer&returnUri=https%3A%2F%2Fdeveloper.paypal.com%2Fdeveloper%2Faccounts%2F , and then create a new REST app with a new ClientID/Secret for it.

no_shipping option in new Smart Buttons API

I'm integrating the new Smart Buttons into my website. I want to specify a no_shipping option, so that the user would not be prompted for their address on PayPal pages
paypal.Buttons({
createOrder: function(data, actions) {
// This function sets up the details of the transaction, including the amount and line item details.
return actions.order.create({
purchase_units: [{
amount: {
value: '0.01'
}
}]
});
},
onApprove: function(data, actions) {
// This function captures the funds from the transaction.
return actions.order.capture().then(function(details) {
// This function shows a transaction success message to your buyer.
alert('Transaction completed by ' + details.payer.name.given_name);
});
}
}).render('#paypal-button-container');
//This function displays Smart Payment Buttons on your web page.
</script>
How do I implement it? I do not get it.

The v2/orders application_context object is documented here.
purchase_units: [{
amount: {
value: '0.01'
},
}],
application_context: {
shipping_preference: 'NO_SHIPPING'
}

Paypal Button returns 'Order could not be captured'

I am using paypal Buttons SDK. The Code activating the button is:-
paypal.Buttons({
createOrder: ( data, actions ) => {
return actions.order.create({
purchase_units: [{
amount: {
value: this.amount.toFixed(2),
currency_code: "GBP",
}
}]
})
},
onApprove: ( data, actions ) => {
return actions.order.capture().then(details => {
console.log('details',details);
})
},
onError: ( error ) => {
console.log('error',error);
}
}).render('#paypal-button-container')
The User Interface operates as expected, there is then a long pause before the error is returned. The client_id used in the script tag is for a sandbox account. I can find not documentation describing possible cause for the error...
error Error: Order could not be captured
Any advice greatly appreciated.
Paypal.. https://developer.paypal.com/docs/checkout/integrate/#1-get-paypal-rest-api-credentials

As suggested in the comment try to do a curl with this URL :
https://www.sandbox.paypal.com/smart/api/order/ODER_ID/capture
And it replies with code 401 and did some research and end up finding that I was using a wrong account to make payments.
I refresh the PayPal login and login with the correct sandbox buyer account and make the payment and It works.
Probably paypal should give correct errors messages.

Can you check using CURL which returns the Paypal server?
This is a comment but I do not have 50pkt S / O. Sorry.

If you get a Xss message in the console, just try in private navigation, disconnect from your paypal buyer account.

I have had the same "Order could not be captured" error at "actions.order.capture()" in the onApprove callback.
In my case, it worked on the first run but not the subsequent calls. I found my order always had the same invoice_id. I removed invoice_id and Paypal stopped complaining.
It should be good if the invoice_id was always unique.

Same problem with Nuxt , checkout works but catch error response : Error 500 order-could-not-be-captured
<template>
<no-ssr>
<v-layout row wrap>
<div ref="paypal"></div>
</v-layout>
</no-ssr>
</template>
Script
mounted() {
const script = document.createElement("script");
script.src =
"https://www.paypal.com/sdk/js?client-id=MyKeyID";
script.addEventListener("load", this.setLoaded);
document.body.appendChild(script);
},
methods: {
setLoaded: function() {
this.loaded = true;
window.paypal
.Buttons({
createOrder: (data, actions) => {
return actions.order.create({
purchase_units: [
{
description: "Test description",
amount: {
currency_code: "USD",
value: 1
}
}
]
});
},
onApprove: async (data, actions) => {
const order = await actions.order.capture();
this.paidFor = true;
console.log(order);
},
onError: err => {
console.log(err);
}
})
.render(this.$refs.paypal);
}