I've decided to use the custom button code supplied by Stripe for accepting payment on a single product I sell. It looks like this:
<script src="https://checkout.stripe.com/checkout.js"></script>
<button id="customButton">Hire Bike (1 Day)</button>
<script>
var handler = StripeCheckout.configure({
key: 'MY_KEY',
image: 'https://stripe.com/img/documentation/checkout/marketplace.png',
locale: 'auto',
token: function(token) {
// You can access the token ID with `token.id`.
// Get the token ID to your server-side code for use.
}
});
document.getElementById('customButton').addEventListener('click', function(e) {
// Open Checkout with further options:
handler.open({
name: 'Bike Company',
description: '1 Day Bike Hire',
currency: 'usd',
amount: 25000
});
e.preventDefault();
});
// Close Checkout on page navigation:
window.addEventListener('popstate', function() {
handler.close();
});
</script>
While it does work (when I use my actual public API key of course), what I can't find a solution for is a way to execute some of my own JS when the payment is successful.
I can't find an answer in the documentation, so looking for suggestions from the SO community.
You can run code in the token callback:
<script src="https://checkout.stripe.com/checkout.js"></script>
<button id="customButton">Hire Bike (1 Day)</button>
<script>
var handler = StripeCheckout.configure({
key: 'MY_KEY',
image: 'https://stripe.com/img/documentation/checkout/marketplace.png',
locale: 'auto',
token: function(token) {
// DO STUFF HERE
alert("Wahoo! You paid!")
}
});
document.getElementById('customButton').addEventListener('click', function(e) {
// Open Checkout with further options:
handler.open({
name: 'Bike Company',
description: '1 Day Bike Hire',
currency: 'usd',
amount: 25000
});
e.preventDefault();
});
// Close Checkout on page navigation:
window.addEventListener('popstate', function() {
handler.close();
});
</script>
Related
Hi the amount does not display in paypal when making payment. The JavaScript code is shown below:
var form = document.querySelector('#payment-form');
var client_token = '{{ client_token }}';
braintree.dropin.create({
authorization: client_token,
container: '#bt-dropin',
card: {
cardholderName: {
required: true
}
},
applePay: {
displayName: 'Merchant Name',
paymentRequest: {
label: 'Localized Name',
total: '10.00'
}
},
paypal: {
flow: 'checkout',
amount: '10.00',
currency: 'USD'
},
paypalCredit: {
flow: 'checkout',
amount: '10.00',
currency: 'USD'
},
venmo: true
}, function (createErr, instance) {
if (createErr) {
// Handle any errors that might've occurred when creating Drop-in
console.error(err);
return;
}
form.addEventListener('submit', function (event) {
event.preventDefault();
instance.requestPaymentMethod(function (err, payload) {
if (err) {
console.log('Error', err);
return;
}
// Add the nonce to the form and submit
document.querySelector('#nonce').value = payload.nonce;
form.submit();
});
});
});
From the code, the amount is $10, but does not display in the PayPal payment page. Please what am i doing wrong?
Unless you pass line item information, an amount will not show during the PayPal checkout approval process.
very simple. I included the following to paypal option in the code :
commit: true,
I'm trying to implement a Paypal checkout button, using the tutorial here:
https://developer.paypal.com/docs/integration/direct/express-checkout/integration-jsv4/client-side-REST-integration/
I have the checkout.js file on the page:
<script src="https://www.paypalobjects.com/api/checkout.js"></script>
The button code is:
<div id="paypal-button"></div>
<script>
paypal.Button.render({
env: 'sandbox', // 'sandbox' Or 'production',
client: {
sandbox: '<sandbox id>',
production: ''
},
locale: 'en_GB',
commit: true, // Show a 'Pay Now' button
payment: function() {
// Set up the payment here
return actions.payment.create({
payment: {
transactions: [
{
amount: { total: '1.00', currency: 'GBP' }
}
]
}
});
},
onAuthorize: function(data, actions) {
// Execute the payment here
return actions.payment.execute().then(function(payment) {
// The payment is complete!
// You can now show a confirmation message to the customer
});
}
}, '#paypal-button');
</script>
But when I click the button I get "ReferenceError: actions is not defined" in the console and nothing happens. Am I supposed to be including another Javascript file, because it's not mentioned in the tutorial?
payment: function() {
should be
payment: function(data, actions) {
The code below always load script src when page load.
.
I have a website that clicks is on the right side(as menu item) then it loads page on the right side(content), but 1 page only.
.
How to load external script src during at onclick only?
<html>
<head>
<script src="https://xdomain.com/xout.js"></script>
</head>
<body>
<img id="idxclick" src="images/ximage.jpg" />
<script>
var handler = xout.xsetup({
key: 'sd_FlP9fKY7TvINq4bWachJQ35P',
image: '/images/xout.png',
locale: 'auto',
token: function(token) {
//
//
}
});
$('#idxclick').on('click', function(e) {
handler.open({
name: 'Hardware',
description: 'Software',
amount: '50.00'
});
e.preventDefault();
});
$(window).on('popstate', function() {
handler.close();
});
</script>
</body>
</html>
I did what your code > here > but same thing happen >
<html>
<head>
<!-- script src="https://xdomain.com/xout.js"></script> REMOVED -->
</head>
<body>
<img id="idxclick" src="images/ximage.jpg" />
<script>
$.getScript('https://xdomain.com/xout.js', function () {
// do some stuff after script is loaded
var handler = xout.xsetup({
key: 'sd_FlP9fKY7TvINq4bWachJQ35P',
image: '/images/xout.png',
locale: 'auto',
token: function(token) {
//
//
}
});
$('#idxclick').on('click', function(e) {
handler.open({
name: 'Hardware',
description: 'Software',
amount: '50.00'
});
e.preventDefault();
});
$(window).on('popstate', function() {
handler.close();
});
});
</script>
</body>
</html>
.
Your answer was correct!, thank you!, and this is much Better and Faster! Prevent Double Click included.
.
<html>
<head>
</head>
<body>
<img id="idxclick" src="images/ximage.jpg" onmouseover="$.getScript('https://xdomain.com/xout.js')" />
<script>
$('#idxclick').on('mouseout', function() {x=0})
var x=0;
$('#idxclick').on('click', function(e) {
if (x==0) {
x=1;
var handler = xout.xsetup({
key: 'sd_FlP9fKY7TvINq4bWachJQ35P',
image: '/images/xout.png',
locale: 'auto',
token: function(token) {
//
//
}
});
handler.open({
name: 'Hardware',
description: 'Software',
amount: '50.00'
});
}
e.preventDefault();
});
$(window).on('popstate', function() {
handler.close();
});
</script>
</body>
</html>
You can dynamically load a script with $.getScript() inside of your click event handler.
$('#idxclick').on('click', function(e) {
$.getScript('https://xdomain.com/xout.js', function () {
var handler = xout.xsetup({
key: 'sd_FlP9fKY7TvINq4bWachJQ35P',
image: '/images/xout.png',
locale: 'auto',
token: function(token) {
//
//
};
handler.open({
name: 'Hardware',
description: 'Software',
amount: '50.00'
});
});
e.preventDefault();
});
I am working on a chat app using Meteor.
After sending the message, it should show the message and scroll to the bottom. But how can I execute a JS to scroll down, AFTER the insert?
Template.addMessage.events({
'submit form': function(e) {
Messages.insert({
user: 'username',
message: 'my message',
date: new Date()
});
window.scrollTo(0, document.body.scrollHeight);
}
});
Apparently it is scrolling down before the view refreshes with the new record. How can it be executed after the view updates?
Use Collection.insert's callback
Template.addMessage.events({
'submit form': function(e) {
Messages.insert({
user: 'username',
message: 'my message',
date: new Date()
}, function(){
// add your code here
window.scrollTo(0, document.body.scrollHeight);
});
}
});
I am editing this question so that it makes more sense than what I originally wrote.
I am implementing the code below in order to add a Facebook "Share" button to my website. My problem is that this script calls for actual values for 'link', 'picture', 'name', 'caption', and 'description' directly in the script.
How can I change this code so that it pulls this information from my website automatically. For example, I need it to pull the URL from the current and assign it to 'link'. Another example: instead of providing the URL for the picture, I want to point the code to a certain class.
<script>
FB.init({appId: "YOUR_APP_ID", status: true, cookie: true});
function postToFeed() {
// calling the API ...
var obj = {
method: 'feed',
link: 'https://developers.facebook.com/docs/reference/dialogs/',
picture: 'http://fbrell.com/f8.jpg',
name: 'Facebook Dialogs',
caption: 'Reference Documentation',
description: 'Using Dialogs to interact with users.'
};
function callback(response) {
document.getElementById('msg').innerHTML = "Post ID: " + response['post_id'];
}
FB.ui(obj, callback);
}
</script>
This is from http://developers.facebook.com/docs/reference/dialogs/feed/
window.location.pathname will only return the path portion of a URL, you also need to add your domain also. window.location.href will return this. Pretty easy to change your code to do this:
<script>
FB.init({appId: "YOUR_APP_ID", status: true, cookie: true});
function postToFeed() {
// calling the API ...
var obj = {
method: 'feed',
link: window.location.href,
picture: 'http://fbrell.com/f8.jpg',
name: 'Facebook Dialogs',
caption: 'Reference Documentation',
description: 'Using Dialogs to interact with users.'
};
function callback(response) {
document.getElementById('msg').innerHTML = "Post ID: " + response['post_id'];
}
FB.ui(obj, callback);
}
</script>