Example - https://tiaanrich.wixsite.com/pplbutton
Hi!
I have a project that calculates a different amount based on client inputs. What I need to do is to postMessage this custom-amount to a PayPal button in an iFrame.
I've been at it for 2 weeks, but I'm still stuck.. Is there anyone that has done this before, or can offer advice?
Thank you
Hi Tiaan,
Can please elaborate what is now working ?
If you wish to work with html component this article will be useful.
Have you tried the builtin paypal button ?
Roi
Hi Roi
Thank you for the reply. I would prefer working witht the built in PayPal button, however there doesn’t seem to be a way to set the price with code, one can only enter the price through the UI, which means I can’t change the price depending on the client selections.
I’ve tried going at it the way PayPal shows on their website. I can successfully embed the script they provide into an iFrame, and then it works. However, their script also only has a fixed amount in it. What I wish to do is to postMessage the calculated amount on my page to the iFrame conaining the PayPal button, and then let the PayPal button do its business from there once clicked.
Any ideas on this?
Have you tried to work with the example in the article ?
Roi
I did yes, I used this article as a guide. The problem really comes in as to where to place the variable and the onMessage receiver in the html script as in this article. I've tried all different sorts of methods, but can't get it to work....
https://developer.paypal.com/demo/checkout/#/pattern/client
Can you please paste here the code of the paypal button?
Roi
<!DOCTYPE html>
<head>
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="https://www.paypalobjects.com/api/checkout.js"></script>
</head>
<body>
<div id="paypal-button-container"></div>
<script>
paypal.Button.render({
env: 'sandbox', // sandbox | production
// 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>'
},
// Show the buyer a 'Pay Now' button in the checkout flow
commit: true,
// payment() is called when the button is clicked
payment: function(data, actions) {
// Make a call to the REST api to create the payment
return actions.payment.create({
payment: {
transactions: [
{
amount: { total: '0.01', currency: 'USD' }
}
]
}
});
},
// onAuthorize() is called when the buyer approves the payment
onAuthorize: function(data, actions) {
// Make a call to the REST api to execute the payment
return actions.payment.execute().then(function() {
window.alert('Payment Complete!');
});
}
}, '#paypal-button-container');
</script>
</body>
This is per PayPal instructions, without any edits made, for the sandbox environment. What I want to change is the 0.01 highlighted in bold to any amount my site calculates and sends to the iFrame
Check this out:
The code of the button:
<!DOCTYPE html> <head> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta name="viewport" content="width=device-width, initial-scale=1"> <script src="https://www.paypalobjects.com/api/checkout.js"></script> </head> <body> <div id="paypal-button-container"></div> <script> //the next 6 lines was added let amount = 0; window.onmessage = (event) => { if (event.data) { amount = event.data; } }; paypal.Button.render({ env: 'sandbox', // sandbox | production // 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>' }, // Show the buyer a 'Pay Now' button in the checkout flow commit: true, // payment() is called when the button is clicked payment: function(data, actions) { // Make a call to the REST api to create the payment return actions.payment.create({ payment: { transactions: [ { amount: { total: `${amount}`, currency: 'USD' }// instead of hard coded value, replaced with a variable. } ] } }); }, // onAuthorize() is called when the buyer approves the payment onAuthorize: function(data, actions) { // Make a call to the REST api to execute the payment return actions.payment.execute().then(function() { window.alert('Payment Complete!'); }); } }, '#paypal-button-container'); </script> </body>For the post message:
Now, your job is to postMessage to amount you want.
Good luck!
Roi
Roi,
You are a genius!!
Thank you! This seems to have done the trick.. I am eternally grateful to you for freeing me from my misery of that which is html
No problem :)
Good luck!
Hi,
I have the price in #text1 and the product´s name in #text2
How do i send them in amount and product name ?
please help me!!
Hi,
Finally I set the price like:
HTML Code:
//the next 6 lines was added
let amount = 0;
window.onmessage = (event) => {
if (event.data) { amount = event.data; }
};
in the post message:
let price = itemObj.priceItem; //to get the price from collection
console.log(price);
$w("#html1").postMessage(price);
but when i click the paypal button, show me a window but in a few seconds it dissapear.
I think that `${amount}` has a problem in the iFrame HTML:
amount: { total: `${amount}`, currency: 'MXN' }
Let me know...
Hi Roi
This is very helpful but I could not make it work.
I put the postMessage on click event handler
export function button183_onClick() { $w("#html5").postMessage($w('#input1').value); }
and paste the same code as you provided to HTML iFrame but it only pop out new window and Paypal is not showing instead it disappear after few seconds.
Could you give us more details? is there anything we need to change on your code to match any fieldKey/Name?
Thanks in advance.
DA
this sometimes happens if you are logged into to your own paypal account when you clicked the button. It basically cancels out itself since you are generating a payment to the same paypal account that you are logged into. Try logging out of paypal then test the button by clicking on it. The pop up window should now prompt the customer to log into their paypal account.
@ginocumbe it is a logical explanation and in some cases this may be the reason. But not in my case. If you check at the developer console while loading the page, you'll see a lot of error messages. I'm having the same problem while using Safari (either OS X or iOS X versions). If anyone has any clue, please post it here.
Hi Guys
An update on this, replace if (event.data) with if (event.data > 0), use this guide to get your client Id and replace the script in bold below.
https://developer.paypal.com/docs/integration/direct/express-checkout/integration-jsv4/client-side-REST-integration/?mark=client%20id#get-your-client-id
<!DOCTYPE html> <head> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta name="viewport" content="width=device-width, initial-scale=1"> <script src="https://www.paypalobjects.com/api/checkout.js"></script> </head> <body> <div id="paypal-button-container"></div> <script type="text/javascript"> let AMOUNT = 0; window.onmessage = (event) => { if (event.data > 0) { AMOUNT = event.data; } } paypal.Button.render({ env: 'sandbox', // sandbox | production // 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>' }, // Show the buyer a 'Pay Now' button in the checkout flow commit: true, // payment() is called when the button is clicked payment: function(data, actions) { // Make a call to the REST api to create the payment return actions.payment.create({ payment: { transactions: [ { amount: { total: `${AMOUNT}`, currency: 'USD' } } ] } }); }, // onAuthorize() is called when the buyer approves the payment onAuthorize: function(data, actions) { // Make a call to the REST api to execute the payment return actions.payment.execute().then(function() { window.alert('Payment Complete!'); }); } }, '#paypal-button-container'); </script> </body>For the postMessage:
$w("#htmlComponent").postMessage("100"); // Change to your HTML component id.Good luck!
Tiaan
Hi,
I've gotten this to work with my website, but when the paypal window pops up there is textbox that says "cancel and return to Alfredo Barcos store." How can I remove this or change the text to something else?
Thanks,
Grant
Hi Grant
I’m not sure one can change this, I think it’s part of the PayPal widget..
Tiaan
I'm trying to parse a dynamic value into the variable "custom". Since I used your code as a base, maybe you can help me out. (look for "HERE IS THE PROBLEM" down below.
I can't make it right. Tried all sort of combinations and it's not working. I can pass a fixed value as in
[custom: "this is the custom value to parse"], but nothing more.
It seems that the line "custom: `${CUSTOM}`" somehow does not take the value inside the CUSTOM variable. Most of other combinations result in the button not displaying or while execution mode, a blank window open and closes after a few seconds. Would you please take a look?
<!DOCTYPE html>
<head>
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="https://www.paypalobjects.com/api/checkout.js"></script>
</head>
<body>
<div id="paypal-button-container"></div>
<script type="text/javascript">
let AMOUNT = 0;
let CUSTOM = "tits";
window.onmessage = (event) => {
if (event.data != '') {
AMOUNT = 0.2;
CUSTOM = event.data;
}
}
paypal.Button.render({
env: 'sandbox', // sandbox | production
// PayPal Client IDs - replace with your own
// Create a PayPal app: https://developer.paypal.com/developer/applications/create
client: {
sandbox: 'Adfasdfasdf9sv_oPTUWBaUY0m9TuJKBB27u1dosborN7A2X5AwLYYl1GhRoUQo2naGFUKRGVM84p23BjMV',
production: '<insert production client id>'
},
// Show the buyer a 'Pay Now' button in the checkout flow
commit: true,
// payment() is called when the button is clicked
payment: function(data, actions) {
// Make a call to the REST api to create the payment
return actions.payment.create({
payment: {
transactions: [
{
amount: { total: `${AMOUNT}`, currency: 'USD' },
//************************************************************************************
// HERE IS THE PROBLEM:
custom: `${CUSTOM}`
//************************************************************************************
}
]
}
});
},
// onAuthorize() is called when the buyer approves the payment
onAuthorize: function(data, actions) {
// Make a call to the REST api to execute the payment
return actions.payment.execute().then(function() {
window.alert('Payment Complete!');
});
}
}, '#paypal-button-container');
</script>
</body>
Tiaan, another update. I discovered that while the value is sent OK tho the html element, whenever I click on the PayPal button, event.data changes it's content and it's not longer the text value I defined (hence the length > 256). So I'm guessing the problem is on the calling side (wix page code)...
@agustin you are correct. After trying several things and doing some research, it would appear that the postMessage is ignored when the page is loaded (probably because the html component hasn’t fully initialized until after the page is loaded). What I ended up doing is hiding the paypal button on page load and then creating a separate button called Confirm Order. When the user clicks on the Confirm Order button, the postMessage is then sent to the html component and the paypal button appears by using .show() . the user then clicks the paypal button and successfully gets the updated amount. The window is loaded prompting the user to log in via paypal.
May I know how to send a second email as booking reference (date, name, location, etc.) to the customer after payment completed. Should I used IPN? If IPN used, can someone like show the step 1 by 1 because I'm not really type of programming but I still try to learn it.