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?
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
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.
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…
<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>
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
<!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:
$w("#htmlComponent").postMessage("100"); // Change to your HTML component id.
Now, your job is to postMessage to amount you want.
Good luck!
Roi
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’ }
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?
<!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.
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?
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?
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)…
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.