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,
Related
I am trying to pass value for total to paypal function but getting error. Here is my code. Check this line amount: { total: this.total, currency: 'USD' }
<template>
.........
</template>
<script>
export default{
data(){
return{
total:0 //
}
},
methods:{
createPaypalButton(){
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: 'xxxxxxxxxxxxxxxx',
production: 'xxxxxxxxxxxxxxxx'
},
// 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: this.total, currency: 'USD' } **//in above line this.total gives error.**
}
]
}
});
},
// 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>
I am currently using Django 1.9 and Braintree payments JS v3. What I want to be able to do is when the user submits the form successfully, have a Javascript alert() pop up. But the pop-up message will be contingent on what the back end Python returns...
So like this:
Submit the form
Run the backend stuff
Pop up the alert with a message dependent on what is returned by the Python backend
When the alert is closed, refresh or redirect
var client_token = "{{ request.session.braintree_client_token }}"
var form = document.querySelector('#checkout-form');
var submit = document.querySelector('input[type="submit"]');
braintree.client.create({
authorization: client_token
}, function (clientErr, clientInstance) {
if (clientErr) { // for error loading client authorization
if(alert('There was a form verification issue, reloading page on close.')){}
else window.location.reload();
return;
}
braintree.hostedFields.create({
client: clientInstance,
styles: {
'input': {
'font-size': '14px'
},
'input.invalid': {
'color': 'red'
},
'input.valid': {
'color': 'green'
}
},
fields: {
number: {
selector: '#card-number',
placeholder: 'Credit Card Number'
},
cvv: {
selector: '#cvv',
placeholder: '123'
},
expirationDate: {
selector: '#expiration-date',
placeholder: '10/2019'
},
postalCode: {
selector: '#postal-code',
placeholder: '10014'
}
}
}, function (hostedFieldsErr, hostedFieldsInstance) {
if (hostedFieldsErr) { // for errors creating form
if(alert('There was a form creation issue, reloading page on close.')){}
else window.location.reload();
return;
}
submit.removeAttribute('disabled');
form.addEventListener('submit', function (event) {
event.preventDefault();
document.querySelector('input[id="pay-button"]').value = "Please wait...";
hostedFieldsInstance.tokenize(function (tokenizeErr, payload) {
if (tokenizeErr) {
if (tokenizeErr.code === 'HOSTED_FIELDS_FIELDS_EMPTY') {
alert('Please fill in card info');
document.querySelector('input[id="pay-button"]').value = "Complete Booking";
}
return;
}
// Put `payload.nonce` into the `payment_method_nonce`
document.querySelector('input[name="payment_method_nonce"]').value = payload.nonce;
form.submit();
$('input[type="submit"]').prop('disabled',true);
});
}, false);
});
});
I'm thinking that this functionality would need to be right after form.submit() is run on the bottom...
Edit:
I added the vars up top in my code
Is there a way to get a returned value of true or false for Abide form validation. I know there are event listeners that you can call on form submit but I have a PayPal checkout button that I don't want to run unless the form is valid and don't have control over the click action on it since it's in an iFrame.
paypal.Button.render({
env: 'sandbox',
client: {
sandbox: 'xxx'
},
payment: function() {
var env = this.props.env,
client = this.props.client,
total = $('#amount-cents').val() / 100,
$validateError = $('.validate-error'),
valid = $('#payment-form').foundation('validateForm'); // just runs validation
// need to be able to check if form is valid here
if (valid === true) {
$validateError.hide();
return paypal.rest.payment.create(env, client, {
transactions: [
{
amount: { total: total, currency: 'USD' }
}
]
});
} else {
$validateError.show();
return false;
}
},
commit: true,
onAuthorize: function(data, actions) {
return actions.payment.execute().then(function() {
paypalDonation(data);
});
}
}, '#paypal-button');
I am integrating Paypal express checkout button on my site and I have the following code:
paypal.Button.render({
env: 'sandbox', // Optional: specify 'sandbox' environment
style: {
size: 'medium',
color: 'blue',
shape: 'rect'
},
payment: function(resolve, reject) {
var CREATE_PAYMENT_URL = 'http://example.com/create-payment';
paypal.request.post(CREATE_PAYMENT_UR)
.then(function(data) {
resolve(data.paymentID);
})
.catch(function(err) {
reject(err);
});
},
onAuthorize: function(data) {
// Note: you can display a confirmation page before executing
var EXECUTE_PAYMENT_URL = 'http://example.com/execute-payment';
paypal.request.post(EXECUTE_PAYMENT_URL, {
paymentID: data.paymentID,
payerID: data.payerID,
})
.then(function(data) { /* Go to a success page */ })
.catch(function(err) { /* Go to an error page */ });
}
}, '#paypal-button');
I want to set the payment and onAuthorize separately. Is there any way to do it?
Something like: paypal.Button.onAuthorize = function() { };
You can create the functions separately, if it helps
function payment() {
...
}
function onAuthorize() {
...
}
paypal.Button.render({
payment: payment,
onAuthorize: onAuthorize
});
Fairly new to node/express, and I'm trying to get a simple dummy charge working with Stripe 3.3.2 and checkout.js. Once the checkout form is submitted, the token makes its way back to the backend without issue; using that token to create a charge, however, results in the following: There is no token with ID tok_xxxxxxxxxxxxxxxxxxxxxxxx
What am I missing here?
/views/premium.mustache
<a id="subscribe" href="#">Pay with Card</a>
<script>
// Define handler to be called when Stripe returns a card token
function onReceiveToken(token, args) {
// Submit token to server so it can charge the card
$.ajax({
url: '/premium/charge',
type: 'POST',
data: {
stripeToken: token
}
});
}
// Configure Checkout
var checkout = StripeCheckout.configure({
key: 'xx_xxxx_xxxxxxxxxxxxxxxxxxxx',
token: onReceiveToken,
image: '/images/logo/stripe.png',
name: 'Test App',
description: 'Premium Sounds',
amount: 500
});
// Open Checkout when the link is clicked
$('#subscribe').on('click', function() {
checkout.open();
return false;
});
</script>
/routes/stripe/charge.js
var dateUtils = require('date-utils'),
config = require('../../../config/config.js'),
stripe = require('stripe')(config.keys.stripe.test.secret_key),
User = require('../../models/User');
module.exports = function(router, app, passport) {
router.get('/premium/charge', function(req, res) {
res.redirect('/premium');
});
router.post('/premium/charge', function(req, res) {
var token = req.body.stripeToken.id,
card = req.body.stripeToken.card.id;
stripe.charges.create({
amount: 500,
currency: 'USD',
source: token,
description: 'Dummy customer'
}, function(err, charge) {
if (err) {
console.log(err);
} else {
console.log(charge);
}
});
});
}
req.body
{
stripeToken: {
id: 'tok_15jsAF2eZvKYlo2CmvgETnJg',
livemode: 'false',
created: '1427204031',
used: 'false',
object: 'token',
type: 'card',
card: {
id: 'card_15jsAF2eZvKYlo2CdXDcaI0h',
object: 'card',
last4: '4242',
brand: 'Visa',
funding: 'credit',
exp_month: '9',
exp_year: '2018',
country: 'US',
name: 'sd#smm.com',
address_line1: '',
address_line2: '',
address_city: '',
address_state: '',
address_zip: '',
address_country: '',
cvc_check: 'pass',
address_line1_check: '',
address_zip_check: '',
dynamic_last4: ''
},
email: 'sd#smm.com',
verification_allowed: 'true',
client_ip: '74.110.163.89'
}
}
Stripe response
{
[Error: There is no token with ID tok_xxxxxxxxxxxxxxxxxx.]
type: 'StripeInvalidRequest',
stack: 'Error: There is no token with ID (node.js:442:13)',
rawType: 'invalid_request_error',
code: undefined,
param: 'source',
message: 'There is no token with ID tok_xxxxxxxxxxxxxxxxxx.',
detail: undefined,
raw: {
type: 'invalid_request_error',
message: 'There is no token with ID tok_xxxxxxxxxxxxxxxxxx.',
param: 'source'
}
}
Stripe support is awesome. Will mark this as the correct answer for those of you who stumble onto this in the future.
99.9% of the time you see this error it's because you aren't creating the token with your public key. Check to make sure it's correct/set.