We Keep Coding

Open specific url when successful pay - paypal button

I created Smart paypal button and got this code
<div id="paypal-button-container"></div>
<script src="https://www.paypal.com/sdk/js?client-id=sb&currency=EUR" data-sdk-integration-source="button-factory"></script>
<script>
paypal.Buttons({
style: {
shape: 'pill',
color: 'gold',
layout: 'vertical',
label: 'buynow',
},
createOrder: function(data, actions) {
return actions.order.create({
purchase_units: [{
amount: {
value: '13.88'
}
}]
});
},
onApprove: function(data, actions) {
return actions.order.capture().then(function(details) {
alert('Transaction completed by ' + details.payer.name.given_name + '!');
});
}
}).render('#paypal-button-container');
</script>
I am wondering, is there function to open specific url after successful payment to add in onApprove function after alert? Will it work like that?
Will window.open() work in this case?

You want to use location.assign. The syntax:
location.assign(url);

You could use "location.replace()".
You can additionally get the order id from the details object and use that as a get parameter in the redirect url. This allows you to verify the transaction on the next page, preventing the user from just directly calling the "success" url.

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 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.

Paypal Checkout error - ReferenceError: actions is not defined

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) {

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