Paypal Express checkout not working properly - javascript

I am trying to integrate Paypal using Express Checkout. I am following the this example to make it work. I have setup sandbox account and checkout button show up without ant issue.
Problem happen when i click on the Button it open the popup window and ask for login details. after entering the the login details it open the sandbox account page but "your Order Summary section" is blank it doesn't show the amount as being passed by the API.
Below are image for both steps for your reference
Image 1 Button:
Image 2: Paypal Login screen
Image 3 : Screen After Log in
I am not sure what i am doing wrong. This video from paypal show it is pretty simple.
Test Code on my page.
<html>
<head></head>
<body>
<br>Express Checkout </br>
<div id="paypal-button">Pay Now</div>
<script src="https://www.paypalobjects.com/api/checkout.js"></script>
<script>
paypal.Button.render({
env: 'sandbox', // Optional: specify 'sandbox' environment
client: {
sandbox: 'xxxxxxxxxxx',
production: 'xxxxxxxxx'
},
payment: function() {
var env = this.props.env;
var client = this.props.client;
return paypal.rest.payment.create(env, client, {
transactions: [
{
amount: { total: '1.00', currency: 'USD' }
}
]
});
},
commit: true, // Optional: show a 'Pay Now' button in the checkout flow
onAuthorize: function(data, actions) {
// Optional: display a confirmation page here
return actions.payment.execute().then(function() {
// Show a success page to the buyer
});
}
}, '#paypal-button');
</script>
</body>
</html>

Related

PayPal JavaScript SDK button opens about:blank#blocked window in Django template but not in local HTML file

I've been trying to integrate PayPal buttons on my Django website, but I keep having this problem where the PayPal popup window appears as about:blank#blocked. I can see this error in console:
popup_open_error_iframe_fallback
{err: 'n: Can not open popup window - blocked\n at Ie (…owser=false&allowBillingPayments=true:1342:297830', timestamp: '1644780862712', referer: 'www.sandbox.paypal.com', sdkCorrelationID: 'f12370135a997', sessionID: 'uid_d36969c1b2_mtk6mja6mzy', …}
What I don't understand is that the problem isn't there if I just open the HTML file itself in a browser... The script looks like this:
<!-- Set up a container element for the button -->
<div id="paypal-button-container" class='text-center mt-2'></div>
<!-- Include the PayPal JavaScript SDK -->
<script src="https://www.paypal.com/sdk/js?client-id=blahblahmyid&currency=EUR"></script>
<script>
// Render the PayPal button into #paypal-button-container
paypal.Buttons({
locale: 'it_IT',
style: {
color: 'gold',
shape: 'rect',
layout: 'vertical',
label: 'pay'
},
// Set up the transaction
createOrder: function(data, actions) {
return actions.order.create({
purchase_units: [{
amount: {
value: '88.44'
}
}]
});
},
// Finalize the transaction
onApprove: function(data, actions) {
return actions.order.capture().then(function(orderData) {
// Successful capture! For demo purposes:
console.log('Capture result', orderData, JSON.stringify(orderData, null, 2));
var transaction = orderData.purchase_units[0].payments.captures[0];
alert('Transaction '+ transaction.status + ': ' + transaction.id + '\n\nSee console for all available details');
// Replace the above to show a success message within this page, e.g.
// const element = document.getElementById('paypal-button-container');
// element.innerHTML = '';
// element.innerHTML = '<h3>Thank you for your payment!</h3>';
// Or go to another URL: actions.redirect('thank_you.html');
});
}
}).render('#paypal-button-container');
</script>
What's the problem ? I don't understand.
There's a new feature in django 4.0 that follows the addition of the COOP header in newer browsers which, as I understand it, stops remote sites from opening a window in the same browsing context.
The default setting of SECURE_CROSS_ORIGIN_OPENER_POLICY in django isolates the browsing context to just the current document origin. Setting it to same-origin-allow-popups allows the paypal popup to open in the current context.
See https://docs.djangoproject.com/en/4.0/ref/middleware/#cross-origin-opener-policy
TLDR; set SECURE_CROSS_ORIGIN_OPENER_POLICY='same-origin-allow-popups'
For django 4.0 settings.py add
SECURE_CROSS_ORIGIN_OPENER_POLICY='same-origin-allow-popups'

Unable to login to paypal using paypal payment button - localhost

I'm trying to make online payment using paypal button. I make the button using some instruction from paypal for developers. The paypal payment button shows fine on the page, but when I want to pay (test) it open me a popup, where I need to login with paypal account. I tried to login with another paypal account, because the money should come to my paypal account, but every time it shows me a error message "Check your email address and password and try again", email address and password are correct because I can login to paypal on another tab.
Image for popup where I need to login to paypal account and the error message
Here is code I got from paypal developers:
<script src="https://www.paypalobjects.com/api/checkout.js"></script>
<script>
// Render the PayPal button
paypal.Button.render({
// Set your environment
env: 'sandbox', // sandbox | production
// Specify the style of the button
style: {
layout: 'vertical', // horizontal | vertical
size: 'medium', // medium | large | responsive
shape: 'rect', // pill | rect
color: 'gold' // gold | blue | silver | white | black
},
// Specify allowed and disallowed funding sources
//
// Options:
// - paypal.FUNDING.CARD
// - paypal.FUNDING.CREDIT
// - paypal.FUNDING.ELV
funding: {
allowed: [
paypal.FUNDING.CARD,
paypal.FUNDING.CREDIT
],
disallowed: []
},
// Enable Pay Now checkout flow (optional)
commit: true,
// PayPal Client IDs - replace with your own
// Create a PayPal app: https://developer.paypal.com/developer/applications/create
client: {
sandbox: 'AZDxjDScFpQtjWTOUtWKbyN_bDt4OgqaF4eYXlewfBP4-8aqX3PiV8e1GWU6liB2CUXlkA59kJXE7M6R',
production: '<insert production client id>'
},
payment: function (data, actions) {
totalPrice = $('.price').val()
totalPrice = parseFloat(totalPrice)
return actions.payment.create({
payment: {
transactions: [
{
amount: {
total: '1.0' ,
currency: 'USD'
}
}
]
}
});
},
onAuthorize: function (data, actions) {
return actions.payment.execute()
.then(function () {
window.alert('Payment Complete!');
});
}
}, '#paypal-button-container');
</script>
<div id="paypal-button-container"></div>
Are you logging in with a Sandbox account? Since you're working in the sandbox (according to your screenshot) you need to make sure you're logging in with a Sandbox buyer account for testing.

Paypal express checkout button IPN

I have an express checkout button on my webpage which looks somethin like that:
<body>
<div id="paypal-button"></div>
<script src="https://www.paypalobjects.com/api/checkout.js"></script>
<script>
paypal.Button.render({
env: 'sandbox', // Or 'sandbox'
client: {
sandbox: '<censored>',
production: 'xxxxxxxxx'
},
commit: true, // Show a 'Pay Now' button
payment: function(data, actions) {
return actions.payment.create({
payment: {
transactions: [
{
amount: { total: '1.00', currency: 'USD' }
}
]
}
});
},
onAuthorize: function(data, actions) {
return actions.payment.execute().then(function(payment) {
console.log(data);
});
}
}, '#paypal-button');
</script>
I also have an IPN handler on my rails backend that i tested with the IPN simulator at https://developer.paypal.com/developer/ipnSimulator/ and selected express checkout and it works fine. The only thing I couldn't figure out is how to setup paypal to send the IPNs to my server. I tried setting up a paypal business account and entering url there for IPNs but i don't recieve anything on the server nor on the IPNs history website.
I see button code is for sandbox.
Sandbox is a test environment, you should setup IPN in your sandbox account to receive IPN notifications.
You can login to sandbox account in this URL: www.sandbox.paypal.com
If you are using live account, you'll need to change "env" and "client" to production.

paypal checkout javascript error - this20.getParentTemplate is not a function

I am implementing paypal express checkout button into my developing wordpress plugin.
I have an edit order page, where there is a "confirm order" button, which a popup modal message confirming the total payable amount, where the checkout button is rendered.
$("#mdp-order-button").click(function(e){
e.preventDefault();
mdp_render_confirm_modal();
});
function mdp_render_confirm_modal(){
if (!$("#mdp_upload_image")[0].files[0]){
alert("please upload an image first");
}else{
if(mdp_check_overlap()){
alert("the block is either out of the grid or overlapped with other block, please place it again");
}else{
var current_block = $('.current_block');
var cost = current_block.width() * current_block.height();
$('#mdp-show-size').html("Your block is "+current_block.width()+"px X "+current_block.height()+"px");
$('#mdp-show-cost').html("Total: "+cost);
$('#mdp-modal').show();
$('#mdp-close').click(function(){
$('mdp-modal').hide();
})
mdp_render_paypal_button(cost)
}
}
}
function mdp_render_paypal_button(charge) {
paypal.Button.render({
env: 'sandbox', // Or 'sandbox'
commit: true, // Show a 'Pay Now' button
client: {
sandbox: 'censored xxxxx'
},
payment: function() {
return paypal.rest.payment.create(this.props.env, this.props.client, {
transactions: [
{
amount: {
total: charge,
currency: 'USD'
}
}
]
});
},
onAuthorize: function(data, actions) {
return actions.payment.execute().then(function(response) {
console.log(response);
});
}
}, '#paypal-button');
}
When I click on the checkout button, the paypal window popup and close straight away, and error is displayed on console
checkout.js:4225 ppxo_xc_ppcheckout_destroy Object {timestamp: 1494405598944, windowID: "53bb903148", pageID: "84e2908f4a", host: "www.sandbox.paypal.com", path: "/webapps/hermes/button"…}
checkout.js:2021 Uncaught Error: _this20.getParentTemplate is not a function
TypeError: _this20.getParentTemplate is not a function
at Object.onSuccess (https://www.paypalobjects.com/api/checkout.js?ver=4.7.4:9346:40)
at _loop2 (https://www.paypalobjects.com/api/checkout.js?ver=4.7.4:1077:62)
at SyncPromise.dispatch (https://www.paypalobjects.com/api/checkout.js?ver=4.7.4:1107:29)
at SyncPromise.then (https://www.paypalobjects.com/api/checkout.js?ver=4.7.4:1125:18)
at Function.syncPromiseTry [as try] (https://www.paypalobjects.com/api/checkout.js?ver=4.7.4:1170:42)
at DelegateComponent.openContainer (https://www.paypalobjects.com/api/checkout.js?ver=4.7.4:9342:55)
at Object.onSuccess (https://www.paypalobjects.com/api/checkout.js?ver=4.7.4:8556:35)
at _loop2 (https://www.paypalobjects.com/api/checkout.js?ver=4.7.4:1077:62)
at SyncPromise.dispatch (https://www.paypalobjects.com/api/checkout.js?ver=4.7.4:1107:29)
at SyncPromise.then (https://www.paypalobjects.com/api/checkout.js?ver=4.7.4:1125:18)
at Object.onSuccess (https://www.paypalobjects.com/api/checkout.js?ver=4.7.4:9346:40)
at _loop2 (https://www.paypalobjects.com/api/checkout.js?ver=4.7.4:1077:62)
at SyncPromise.dispatch (https://www.paypalobjects.com/api/checkout.js?ver=4.7.4:1107:29)
at SyncPromise.then (https://www.paypalobjects.com/api/checkout.js?ver=4.7.4:1125:18)
at Function.syncPromiseTry [as try] (https://www.paypalobjects.com/api/checkout.js?ver=4.7.4:1170:42)
at DelegateComponent.openContainer (https://www.paypalobjects.com/api/checkout.js?ver=4.7.4:9342:55)
at Object.onSuccess (https://www.paypalobjects.com/api/checkout.js?ver=4.7.4:8556:35)
at _loop2 (https://www.paypalobjects.com/api/checkout.js?ver=4.7.4:1077:62)
at SyncPromise.dispatch (https://www.paypalobjects.com/api/checkout.js?ver=4.7.4:1107:29)
at SyncPromise.then (https://www.paypalobjects.com/api/checkout.js?ver=4.7.4:1125:18)
at Object._RECEIVE_MESSAGE_TYPE.(anonymous function) [as postrobot_message_response] (https://www.paypalobjects.com/api/checkout.js:2021:118)
at receiveMessage (https://www.paypalobjects.com/api/checkout.js:1929:73)
at messageListener (https://www.paypalobjects.com/api/checkout.js:1949:13)
I tried to search on the web but I found no similar questions nor documentation and I really have no ideas on why this happen.
Thanks in advance for the help, full sta
Thank you so much for #bluepnume help.
It is the problem with how wordpress load the script, which by default appending a query string ?ver='current_wordpress_version' to scripts that get loaded, have disabled that and now it is getting the latest version of the checkout.js
instead of just
wp_enqueue_script('paypal_checkout', 'https://www.paypalobjects.com/api/checkout.js');
it is now
wp_enqueue_script('paypal_checkout', 'https://www.paypalobjects.com/api/checkout.js',array(),null);

Paypal Checkout. I can't login with the paypal account accesses

I'm trying to implement the payment process with Paypal Checkout
This is my code
<div class='wrapper-packages'>
<div id="paypal-button"></div>
</div>
<script>
paypal.Button.render({
env: 'sandbox',
client: {
sandbox: 'xxxxxxxx',
production: 'xxxxxxxx'
},
payment: function() {
var env = this.props.env;
var client = this.props.client;
return paypal.rest.payment.create(env, client, {
transactions: [
{
amount: { total: '1.00', currency: 'USD' }
}
]
});
},
commit: true, // Optional: show a 'Pay Now' button in the checkout flow
onAuthorize: function(data, actions) {
// Optional: display a confirmation page here
return actions.payment.execute().then(function() {
alert('ok');
});
}
}, '#paypal-button')
</script>
When I click on Paypal Checkout button, it opens the modal for log in paypal account, but I can't do login
The login credentials are ok, I've checked it.
So, what can be the problem?
When using PayPal's Sandbox, you need to use Sandbox Test Accounts. You can read more about them in the Docs

Categories