We Keep Coding

Amount not showing in PayPal payment in Braintree

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,

PayPal Express (checkout.js): Disable enter key

When a user presses the enter key on my site the PayPal Express modal pops up. I need to prevent this happening.
I am using client-side PayPal Express (checkout.js).
I have tried $("#paypal-button").blur()
What I need is a way to prevent the box popping up, by setting a JavaScript variable (some way to validate).
payment: function(data, actions) {
return actions.payment.create({
payment: {
transactions: [
{
amount: { total: 35, currency: 'USD' }, description: name + " " + email, custom: 'New York'
}
]
},

You can add the blur method to the button in onCancel and onAuthorize processing like so;
onCancel: function(data, actions) {
$("#paypal-button").blur()
},
onAuthorize: function(data, actions) {
$("#paypal-button").blur();
return actions.payment.execute().then(function(payment) {
});
}
This should remove focus from the button after the modal is closed

Paypal API Express checkout error: Document is ready and element [object Object] does not exist

I am working with paypal and I need to render multiple paypal express checkout buttons in my table.
I followed a solution I found in this link
and here's what I did.
document.querySelectorAll('.btn-paypal').forEach(function(){
var dis = $(this);
var amount = dis.data('amount');
paypal.Button.render({
env: 'sandbox',
style: {
label: 'checkout',
size: 'medium', // small | medium | large | responsive
shape: 'rect', // pill | rect
color: 'gold' // gold | blue | silver | black
},
client: {
sandbox: 'xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx-w6Q9rX2BdH1',
production: '<insert production client id>'
},
payment: function(data, actions) {
return actions.payment.create({
payment: {
transactions: [
{
amount: { total: amount, currency: 'JPY' }
}
]
}
});
},
commit: true,
onAuthorize: function(data, actions) {
return actions.payment.get().then(function(paymentDetails) {
console.log(paymentDetails)
swal({
title: "Confirm Payment!",
text: "Confirm the amount of ¥"+paymentDetails.transactions[0].amount.total,
type: "info",
confirmButtonClass: "btn btn-danger",
confirmButtonText: "Yes! Continue Payment",
showCancelButton: true,
cancelButtonText: "No! Cancel Transaction"
},
function(){
$('.ajax-loading').show();
return actions.payment.execute().then(function(){
alert('Payment Success');
})
});
});
},
onError: function(err) {
$('.ajax-loading').hide();
swal('Ooops!','Paypal failed to load. Please click the paypal button again!','error');
console.log(err);
}
}, dis);
})
when I try to run this code I get no button displayed in the table and an error appears in the console saying, Uncaught Error: Document is ready and element [object Object] does not exist
What is my error here? Please help.
Thanks!

I have a single Paypal button, but had the same error. The HTML example states
<div id="paypal-button"></div>
Braintree manual
while the script is in a separate file. It seems that the div element is not yet rendered while the script is loading.
I simply moved the script inside the div element and now the button appears. Make sure the script does not load elsewhere prior this point.

If you are using a js framework like Vue for example, just load it first in the mounted hook and it should work.

Getting error accessing data value in paypal function using vue and javascript

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>

Foundation 6 Abide Form Validation

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