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
});
Related
I'm building my first integration with Squareup.com. In the docs as shown in their walkthrough page (https://developer.squareup.com/docs/payment-form/payment-form-walkthrough), I've copied the code as instructed but I there's an error coming from the 'catch error' in the callbacks.
[update]
OK so having been told applicationID was wrong, we have discovered that its the process-payment file that is empty and that is causing the error. I reinstalled npm and started it and we're chugging along :)
Final questions....
I'm thinking server.js needs to be updated with the data of the specific order. At what stage is it best to do that - presumably when card details are submitted within a hidden parameter. But what name should it be given? I haven't found anything in the docs.
[/update]
Thanks for comments and, in response, here's the complete code.
<body>
<div id="form-container">
<div id="sq-card-number"></div>
<div class="third" id="sq-expiration-date"></div>
<div class="third" id="sq-cvv"></div>
<div class="third" id="sq-postal-code"></div>
<button id="sq-creditcard" class="button-credit-card" onclick="onGetCardNonce(event)">Pay $1.00</button>
</div>
<!-- end #form-container -->
<script type="text/javascript">
const idempotency_key = uuidv4();
// Create and initialize a payment form object
const paymentForm = new SqPaymentForm({
// Initialize the payment form elements
applicationId: "edited-out-for-security",
inputClass: 'sq-input',
autoBuild: false,
// Customize the CSS for SqPaymentForm iframe elements
inputStyles: [{
fontSize: '16px',
lineHeight: '24px',
padding: '16px',
placeholderColor: '#a0a0a0',
backgroundColor: 'transparent',
}],
// Initialize the credit card placeholders
cardNumber: {
elementId: 'sq-card-number',
placeholder: 'Card Number'
},
cvv: {
elementId: 'sq-cvv',
placeholder: 'CVV'
},
expirationDate: {
elementId: 'sq-expiration-date',
placeholder: 'MM/YY'
},
postalCode: {
elementId: 'sq-postal-code',
placeholder: 'Postal'
},
// SqPaymentForm callback functions
callbacks: {
/*
* callback function: cardNonceResponseReceived
* Triggered when: SqPaymentForm completes a card nonce request
*/
cardNonceResponseReceived: function (errors, nonce, cardData) {
if (errors) {
// Log errors from nonce generation to the browser developer console.
console.error('Encountered errors:');
errors.forEach(function (error) {
console.error(' ' + error.message);
});
alert('Encountered errors, check browser developer console for more details');
return;
}
fetch('/cgi-bin/square-payment-processor/process-payment', {
method: 'POST',
headers: {
'Accept': 'application/json',
'Content-Type': 'application/json'
},
body: JSON.stringify({
nonce: nonce,
idempotency_key: idempotency_key,
location_id: "edited-out-for-security"
})
})
.catch(err => {
alert('Network error: ' + err);
})
.then(response => {
if (!response.ok) {
return response.json().then(
errorInfo => Promise.reject(errorInfo));
}
return response.json();
})
.then(data => {
console.log(data);
alert('Payment complete successfully!\nCheck browser developer
console for more details');
})
.catch(err => {
console.error(err);
alert('Payment failed to complete!\nCheck browser developer console for more details');
});
}
}
});
paymentForm.build();
//Generate a random UUID as an idempotency key for the payment request
// length of idempotency_key should be less than 45
function uuidv4() {
return 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g,
function(c) {
var r = Math.random() * 16 | 0, v = c == 'x' ? r : (r & 0x3 | 0x8);
return v.toString(16);
});
}
// onGetCardNonce is triggered when the "Pay $1.00" button is clicked
function onGetCardNonce(event) {
// Don't submit the form until SqPaymentForm returns with a nonce
event.preventDefault();
// Request a nonce from the SqPaymentForm object
paymentForm.requestCardNonce();
}
</script>
</body>
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 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'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) {
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');