Having trouble with my PayPal button (which is actually express checkout) not working on HTTPS. I first noticed this issue when accessing my live app using HTTPS.
I'm unsure if it's my HTTPS setup that's causing the script to fail.
<script src="https://www.paypalobjects.com/api/checkout.js" data-version-4></script>
The button loads without any issues on localhost during development. However, in production with HTTPS, I encounter the following error:
ppxo_xc_ppbutton_error Object
Error: Document is ready and element #paypal-button does not exist
My implementation is within an Angular controller:
paypal.Button.render({
env: 'production', // Optional: specify 'sandbox' environment
payment: function() {
var env = this.props.env;
var client = this.props.client;
return paypal.rest.payment.create(env, client, {
transactions: [{
amount: { total: 5 , currency: 'USD' },
item_list: {
items: [{
"name": "profile",
"price": "5",
"currency": "USD"
}]
}
}],
redirect_urls: {
"return_url": $location.absUrl(),
"cancel_url": $location.absUrl()
}
});
},
commit: true, // Optional: show a 'Pay Now' button in the checkout flow
onAuthorize: function(data, actions) {
return actions.payment.execute().then(function() {
actions.payment.get().then(function(data){
if(data.state === 'approved'){
$http.post('/paid',{qty:$scope.number_of_uses,user_email:user_email})
.then(function(response){
$scope.done = true;
});
}
});
});
}
}, '#paypal-button');
To reiterate, everything works fine on localhost but encounters issues on HTTPS in production.