dynamically add variable to paypal button render
I am following the paypal quick start tutorial. I have an input field that captures the amount entered by the user. Is there any way in javascript that I could dynamically change the amount of the below script. I have tried adding a global variable but it does not work.
<div id="paypal-button"></div>
<script src="https://www.paypalobjects.com/api/checkout.js"></script>
<script>
paypal.Button.render({
// Configure environment
env: 'sandbox',
client: {
sandbox: 'demo_sandbox_client_id',
production: 'demo_production_client_id'
},
// Customize button (optional)
locale: 'en_US',
style: {
size: 'small',
color: 'gold',
shape: 'pill',
},
// Enable Pay Now checkout flow (optional)
commit: true,
// Set up a payment
payment: function(data, actions) {
return actions.payment.create({
transactions: [{
amount: {
total: '0.01',
currency: 'USD'
}
}]
});
},
// Execute the payment
onAuthorize: function(data, actions) {
return actions.payment.execute().then(function() {
// Show a confirmation message to the buyer
window.alert('Thank you for your purchase!');
});
}
}, '#paypal-button');
javascript paypal
add a comment |
I am following the paypal quick start tutorial. I have an input field that captures the amount entered by the user. Is there any way in javascript that I could dynamically change the amount of the below script. I have tried adding a global variable but it does not work.
<div id="paypal-button"></div>
<script src="https://www.paypalobjects.com/api/checkout.js"></script>
<script>
paypal.Button.render({
// Configure environment
env: 'sandbox',
client: {
sandbox: 'demo_sandbox_client_id',
production: 'demo_production_client_id'
},
// Customize button (optional)
locale: 'en_US',
style: {
size: 'small',
color: 'gold',
shape: 'pill',
},
// Enable Pay Now checkout flow (optional)
commit: true,
// Set up a payment
payment: function(data, actions) {
return actions.payment.create({
transactions: [{
amount: {
total: '0.01',
currency: 'USD'
}
}]
});
},
// Execute the payment
onAuthorize: function(data, actions) {
return actions.payment.execute().then(function() {
// Show a confirmation message to the buyer
window.alert('Thank you for your purchase!');
});
}
}, '#paypal-button');
javascript paypal
Which value are you trying to change exactly? And when do you want to do it?
– Armel
Jan 18 at 18:09
add a comment |
I am following the paypal quick start tutorial. I have an input field that captures the amount entered by the user. Is there any way in javascript that I could dynamically change the amount of the below script. I have tried adding a global variable but it does not work.
<div id="paypal-button"></div>
<script src="https://www.paypalobjects.com/api/checkout.js"></script>
<script>
paypal.Button.render({
// Configure environment
env: 'sandbox',
client: {
sandbox: 'demo_sandbox_client_id',
production: 'demo_production_client_id'
},
// Customize button (optional)
locale: 'en_US',
style: {
size: 'small',
color: 'gold',
shape: 'pill',
},
// Enable Pay Now checkout flow (optional)
commit: true,
// Set up a payment
payment: function(data, actions) {
return actions.payment.create({
transactions: [{
amount: {
total: '0.01',
currency: 'USD'
}
}]
});
},
// Execute the payment
onAuthorize: function(data, actions) {
return actions.payment.execute().then(function() {
// Show a confirmation message to the buyer
window.alert('Thank you for your purchase!');
});
}
}, '#paypal-button');
javascript paypal
I am following the paypal quick start tutorial. I have an input field that captures the amount entered by the user. Is there any way in javascript that I could dynamically change the amount of the below script. I have tried adding a global variable but it does not work.
<div id="paypal-button"></div>
<script src="https://www.paypalobjects.com/api/checkout.js"></script>
<script>
paypal.Button.render({
// Configure environment
env: 'sandbox',
client: {
sandbox: 'demo_sandbox_client_id',
production: 'demo_production_client_id'
},
// Customize button (optional)
locale: 'en_US',
style: {
size: 'small',
color: 'gold',
shape: 'pill',
},
// Enable Pay Now checkout flow (optional)
commit: true,
// Set up a payment
payment: function(data, actions) {
return actions.payment.create({
transactions: [{
amount: {
total: '0.01',
currency: 'USD'
}
}]
});
},
// Execute the payment
onAuthorize: function(data, actions) {
return actions.payment.execute().then(function() {
// Show a confirmation message to the buyer
window.alert('Thank you for your purchase!');
});
}
}, '#paypal-button');
javascript paypal
javascript paypal
asked Jan 18 at 17:36
the_big_blackboxthe_big_blackbox
316520
316520
Which value are you trying to change exactly? And when do you want to do it?
– Armel
Jan 18 at 18:09
add a comment |
Which value are you trying to change exactly? And when do you want to do it?
– Armel
Jan 18 at 18:09
Which value are you trying to change exactly? And when do you want to do it?
– Armel
Jan 18 at 18:09
Which value are you trying to change exactly? And when do you want to do it?
– Armel
Jan 18 at 18:09
add a comment |
1 Answer
1
active
oldest
votes
In transactions it could be as simple as getting the input's value from the field, for example:
transactions: [{
amount: {
total: document.getElementById("paymentInput").value,
currency: 'USD'
}
}]
Although I would also do a bit of input sanitation before blindly accepting their keyboard input.
Here is a working example:
document.getElementById("submitButton").addEventListener("click", handleSubmit);
function handleSubmit() {
let payment = function(data, actions) {
return {
transactions: [{
amount: {
total: document.getElementById("paymentInput").value,
currency: 'USD'
}
}]
}
}
console.log(`payment of ${payment().transactions[0].amount.total} submitted`)
}
<input id="paymentInput" />
<button id="submitButton">Submit</button>
Thanks so much for the help
– the_big_blackbox
Jan 18 at 19:07
add a comment |
Your Answer
StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");
StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);
StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});
function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});
}
});
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f54258914%2fdynamically-add-variable-to-paypal-button-render%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
1 Answer
1
active
oldest
votes
1 Answer
1
active
oldest
votes
active
oldest
votes
active
oldest
votes
In transactions it could be as simple as getting the input's value from the field, for example:
transactions: [{
amount: {
total: document.getElementById("paymentInput").value,
currency: 'USD'
}
}]
Although I would also do a bit of input sanitation before blindly accepting their keyboard input.
Here is a working example:
document.getElementById("submitButton").addEventListener("click", handleSubmit);
function handleSubmit() {
let payment = function(data, actions) {
return {
transactions: [{
amount: {
total: document.getElementById("paymentInput").value,
currency: 'USD'
}
}]
}
}
console.log(`payment of ${payment().transactions[0].amount.total} submitted`)
}
<input id="paymentInput" />
<button id="submitButton">Submit</button>
Thanks so much for the help
– the_big_blackbox
Jan 18 at 19:07
add a comment |
In transactions it could be as simple as getting the input's value from the field, for example:
transactions: [{
amount: {
total: document.getElementById("paymentInput").value,
currency: 'USD'
}
}]
Although I would also do a bit of input sanitation before blindly accepting their keyboard input.
Here is a working example:
document.getElementById("submitButton").addEventListener("click", handleSubmit);
function handleSubmit() {
let payment = function(data, actions) {
return {
transactions: [{
amount: {
total: document.getElementById("paymentInput").value,
currency: 'USD'
}
}]
}
}
console.log(`payment of ${payment().transactions[0].amount.total} submitted`)
}
<input id="paymentInput" />
<button id="submitButton">Submit</button>
Thanks so much for the help
– the_big_blackbox
Jan 18 at 19:07
add a comment |
In transactions it could be as simple as getting the input's value from the field, for example:
transactions: [{
amount: {
total: document.getElementById("paymentInput").value,
currency: 'USD'
}
}]
Although I would also do a bit of input sanitation before blindly accepting their keyboard input.
Here is a working example:
document.getElementById("submitButton").addEventListener("click", handleSubmit);
function handleSubmit() {
let payment = function(data, actions) {
return {
transactions: [{
amount: {
total: document.getElementById("paymentInput").value,
currency: 'USD'
}
}]
}
}
console.log(`payment of ${payment().transactions[0].amount.total} submitted`)
}
<input id="paymentInput" />
<button id="submitButton">Submit</button>
In transactions it could be as simple as getting the input's value from the field, for example:
transactions: [{
amount: {
total: document.getElementById("paymentInput").value,
currency: 'USD'
}
}]
Although I would also do a bit of input sanitation before blindly accepting their keyboard input.
Here is a working example:
document.getElementById("submitButton").addEventListener("click", handleSubmit);
function handleSubmit() {
let payment = function(data, actions) {
return {
transactions: [{
amount: {
total: document.getElementById("paymentInput").value,
currency: 'USD'
}
}]
}
}
console.log(`payment of ${payment().transactions[0].amount.total} submitted`)
}
<input id="paymentInput" />
<button id="submitButton">Submit</button>
document.getElementById("submitButton").addEventListener("click", handleSubmit);
function handleSubmit() {
let payment = function(data, actions) {
return {
transactions: [{
amount: {
total: document.getElementById("paymentInput").value,
currency: 'USD'
}
}]
}
}
console.log(`payment of ${payment().transactions[0].amount.total} submitted`)
}
<input id="paymentInput" />
<button id="submitButton">Submit</button>
document.getElementById("submitButton").addEventListener("click", handleSubmit);
function handleSubmit() {
let payment = function(data, actions) {
return {
transactions: [{
amount: {
total: document.getElementById("paymentInput").value,
currency: 'USD'
}
}]
}
}
console.log(`payment of ${payment().transactions[0].amount.total} submitted`)
}
<input id="paymentInput" />
<button id="submitButton">Submit</button>
answered Jan 18 at 18:14
Andrew LohrAndrew Lohr
3,72711330
3,72711330
Thanks so much for the help
– the_big_blackbox
Jan 18 at 19:07
add a comment |
Thanks so much for the help
– the_big_blackbox
Jan 18 at 19:07
Thanks so much for the help
– the_big_blackbox
Jan 18 at 19:07
Thanks so much for the help
– the_big_blackbox
Jan 18 at 19:07
add a comment |
Thanks for contributing an answer to Stack Overflow!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f54258914%2fdynamically-add-variable-to-paypal-button-render%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Which value are you trying to change exactly? And when do you want to do it?
– Armel
Jan 18 at 18:09