dynamically add variable to paypal button render












0















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');











share|improve this question























  • Which value are you trying to change exactly? And when do you want to do it?

    – Armel
    Jan 18 at 18:09
















0















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');











share|improve this question























  • Which value are you trying to change exactly? And when do you want to do it?

    – Armel
    Jan 18 at 18:09














0












0








0








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');











share|improve this question














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






share|improve this question













share|improve this question











share|improve this question




share|improve this question










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



















  • 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












1 Answer
1






active

oldest

votes


















1














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>








share|improve this answer
























  • Thanks so much for the help

    – the_big_blackbox
    Jan 18 at 19:07











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
});


}
});














draft saved

draft discarded


















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









1














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>








share|improve this answer
























  • Thanks so much for the help

    – the_big_blackbox
    Jan 18 at 19:07
















1














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>








share|improve this answer
























  • Thanks so much for the help

    – the_big_blackbox
    Jan 18 at 19:07














1












1








1







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>








share|improve this answer













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>






share|improve this answer












share|improve this answer



share|improve this answer










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



















  • 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


















draft saved

draft discarded




















































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.




draft saved


draft discarded














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





















































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







Popular posts from this blog

Liquibase includeAll doesn't find base path

How to use setInterval in EJS file?

Petrus Granier-Deferre