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
Related
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.
I have the little Paypal window working in the sandbox and production mode. The onAuthorize function gets called and my message window pops up thanking you for the purchase and giving the purchased credits to the customer.
paypal.Button.render({
<% if (useBankAccount) { %>
env: 'production', // Or 'sandbox', 'production'
<% } else { %>
env: 'sandbox', // Or 'sandbox', 'production'
<% }%>
client: {
sandbox: 'Axxx',
production: 'Axxx'
},
commit: true,
style: {
size: 'responsive',
color: 'gold',
shape: 'pill',
label: 'pay'
},
payment: function (data, actions) {
return actions.payment.create({
payment: {
transactions: [
{
amount: { total: currentPayment, currency: 'USD' }
}
]
}
});
},
onAuthorize: function (data, actions) {
if (window.ga) { // Google Analytics
window.ga('send', 'event', 'Credits', 'Purchase', 'Payment', currentPayment);
window.ga('send', 'event', 'Credits', 'Purchase', 'Credits', currentCredits);
}
document.getElementById("<%= PurchaseDone.ClientID %>").value = "Yes";
document.getElementById("<%= PurchaseAmount.ClientID %>").value = currentPayment;
TheForm.submit();
},
onCancel: function (data, actions) {
OpenMessageWindow("The payment was cancelled.");
},
onError: function (err) {
var result = err.message.toString().indexOf("Amount cannot be zero")
if (result > 0) {
OpenMessageWindow('Payment Error: The purchase amount must be more than zero');
return;
}
OpenMessageWindow('Payment Error:<br/>' + err.message)
}
}, '#paypal-button');
Looking the data passed into OnAuthorize()
{paymentToken: "EC-xxx",
orderID: "EC-xxx",
payerID: "FTxxx",
paymentID: "PAY-xxx",
intent: "sale", …}
intent:"sale" orderID:"EC-xxx"
payerID:"FTxxx"
paymentID:"PAY-xxx"
paymentToken:"EC-xxx"
returnUrl:
"https://www.paypal.com/?paymentId=PAY-0Kxxx&token=EC-xx&PayerID=FTxxx"
__proto__ :Object
actions is
{close: ƒ, redirect: ƒ, payment: {…}, order: {…}, restart: ƒ, …}
To see those values, I commented out the TheForm.Submit(), which could have been the problem but the payment still did not happen.
The problem is, in production, the customer purchase does not happen. The customer (me) logs into their Paypal account, presses Pay Now, the window disappears calling onAuthorize.
No payment registers on the customer account. No payment transaction happens and my software gives the credits for free.
Ideas? What can I look at? Paypal telephone support does not know anything about development.
Thank you for any help.
The solution is to call actions.payment.execute() in the onAuthorize callback. It causes a second busy indicator that does the payment. It's like the onAuthorize says the user accepts, now do you accept?
Now, this is my working code.
paypal.Button.render({
<% if (useBankAccount) { %>
env: 'production', // Or 'sandbox', 'production'
<% } else { %>
env: 'sandbox', // Or 'sandbox', 'production'
<% }%>
client: {
sandbox: 'xxx',
production: 'xxx'
},
commit: true,
payment: function (data, actions) {
return actions.payment.create({
payment: {
transactions: [
{
amount: { total: currentPayment, currency: 'USD' }
}
]
}
});
},
onAuthorize: function (data, actions) {
return actions.payment.execute().then(function (payment) {
// setup the data to post
TheForm.submit();
});
},
onCancel: function (data, actions) {
OpenMessageWindow("The payment was cancelled.");
},
onError: function (err) {
var result = err.message.toString().indexOf("Amount cannot be zero")
if (result > 0) {
OpenMessageWindow('Payment Error: The purchase amount must be more than zero');
return;
}
OpenMessageWindow('Payment Error:<br/>' + err.message)
}
}, '#paypal-button');
I added two things from the PayPal example to get it working.
The "commit: true," is needed to change the Continue button to Pay Now. Unbelievably, the default is to have a button called Continue that pays.
The second is calling actions.payment.execute() in onAuthorize. Not something you could figure out except by being told.
I am quite incredulous that the PayPal example does not include these two items providing an example that simply does not work. AND you don't know about it until you test a live purchase, sandbox seems fine.
Additionally, Stack Overflow is PayPal's development support, why was this question never answered? I actually found the solution to the problem on a web page explaining how bad PayPal is compared to Stripe. The page gave a nice example of the complicated PayPal code that had the missing function call.
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.
I'm using PayPal Express Checkout from JavaScript.
This is the code I have and works (I see the PayPal button, I can click it, and the payment window opens fine):
<div id="paypal-button"></div>
<script src="https://www.paypalobjects.com/api/checkout.js"></script>
<script>
paypal.Button.render({
env: 'sandbox',
client: {
sandbox: 'xxxxxx',
production: 'yyyyyy'
},
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,
onAuthorize: function (data, actions) {
return actions.payment.execute().then(function() {
document.querySelector('#paypal-button-container').innerText = 'Payment Complete!';
});
}
}, '#paypal-button');
</script>
But, if I supply input_fields like the code below, it stops working and throws a console error:
paypal.Button.render({
env: 'sandbox',
client: {
sandbox: 'xxxxxx',
production: 'yyyyyy'
},
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' }
}
]
}, {
input_fields: {
no_shipping: 1
}
});
},
commit: true,
onAuthorize: function (data, actions) {
return actions.payment.execute().then(function() {
document.querySelector('#paypal-button-container').innerText = 'Payment Complete!';
});
}
}, '#paypal-button');
This is the error detail:
In this last case, I see the PayPal button, the window opens when I click on it, but after a few seconds the window closes itself and gives the console error provided here.
What am I missing?
UPDATE
As #bluepnume pointed out, if I switch from sandbox to production environment, the problem disappears.
But, if I also supply first_name and last_name in input_fields, I get another console error no matter if I'm in sandbox or production environment.
This is the code snippet:
, {
input_fields: {
no_shipping: 1,
first_name: 'Abc',
last_name: 'Dfg'
}
}
And this is the error message:
This is a known issue that's being tracked. For what it's worth, if you run in production mode, the issue should not be present.
EDIT: For the second issue, looks like this is not a valid request format. You should be able to see in your network tab:
Are you looking for the payer_info field for the payments api? https://developer.paypal.com/docs/api/payments/
Concerning the first issue, it seems everything is working well now. The "no_shipping" option can be used even in test conditions.
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>