I'm working with .Net, trying to implement multiple buttons.
I'm getting an answer from PayPal (payment id, payer-id, etc.), but everything is client-side. How can I check the payment on server-side?
Do I need to implement all this code for each button?
<script>
paypal.Button.render({
env: 'production', // Optional: specify 'sandbox' environment
client: {
sandbox: 'xxxxxxxxx',
production: 'xxxxxxxxx'
},
payment: function() {
var env = this.props.env;
var client = this.props.client;
return paypal.rest.payment.create(env, client, {
transactions: [
{
amount: { total: '1.00', currency: 'USD' }
}
]
});
},
commit: true, // Optional: show a 'Pay Now' button in the checkout flow
onAuthorize: function(data, actions) {
// Optional: display a confirmation page here
return actions.payment.execute().then(function() {
// Show a success page to the buyer
});
}
}, '#paypal-button');
</script>
To get the information on the server side, you can pass data.paymentID to your server side and use it to make a REST call to paypal: https://developer.paypal.com/docs/integration/direct/express-checkout/integration-jsv4/advanced-payments-api/show-payment-details/
To render multiple buttons you do need to call paypal.Button.render() multiple times, but if you need to you can do this in a for loop, or something.
Related
I would like to:
Have the user log into paypal
Fetch the users information (billing&shipping addresses)
Then calculate the shipping fee
Place the payment
But, how can I receive the address and calculate the fee before I place the payment?
<script>
paypal.Button.render({
// Configure environment
env: '<?php echo $paypal->paypalEnv; ?>',
client: {
sandbox: '<?php echo $paypal->paypalClientID; ?>',
production: '<?php echo $paypal->paypalClientID; ?>'
},
// Customize button (optional)
locale: 'de_DE',
style: {
size: 'small',
color: 'gold',
shape: 'rect',
},
// Set up a payment
payment: function (data, actions) {
return actions.payment.create({
transactions: [{
amount: {
total: '10',
currency: 'EUR'
}
}]
});
},
// Execute the payment
onAuthorize: function (data, actions) {
return actions.payment.execute()
.then(function () {
window.location = "process.php?paymentID="+data.paymentID+"&token="+data.paymentToken+"&payerID="+data.payerID+"&pid=<?php echo $productID; ?>";
});
}
}, '#paypal-button');
</script>
Instead of "return actions.payment.execute()" calling the execute directly, I would like to fetch the address, then show the final basket with all the costs and then click on "pay now" - how can I do this?
Your sample is an older version of PayPal's checkout.js
Start by switching to the latest version of the PayPal Checkout: https://developer.paypal.com/docs/checkout/
Demo of client-side pattern: https://developer.paypal.com/demo/checkout/#/pattern/client
In the onApprove function, you can use the data object to get the address and do Javascript calculations about adding shipping before the capture() call with a modified total.
If you want to do the calculations on your server rather than in Javascript (more secure/reliable), use a server-side pattern:
https://developer.paypal.com/demo/checkout/#/pattern/server
thank you! mhhh okay but what has to be in the serverside part? i dont see any example of the actions to receive the buyers adress information before checkout and afterwards. ?
/demo/checkout/api/paypal/order/create
I use HostedFields for credit card and paypal web for paypal.
So inside of braintree.client.create i have braintree.hostedFields.create and braintree.paypalCheckout.create.
Code example of paypal:
braintree.paypalCheckout.create({
client: clientInstance
}, function (paypalCheckoutErr, paypalCheckoutInstance) {
if (paypalCheckoutErr) {
console.error('Error creating PayPal Checkout:', paypalCheckoutErr);
return;
}
paypal.Button.render({
env: 'sandbox',
commit: true,
buttonStyle: {
color: 'blue',
shape: 'rect',
size: 'medium'
},
payment: function () {
return paypalCheckoutInstance.createPayment({
flow: 'checkout',
locale: ''+langanalytics+'',
amount: '10.00',
currency: 'EUR'
});
},
onAuthorize: function (data, actions) {
return paypalCheckoutInstance.tokenizePayment(data, function (err, payload) {
document.getElementById("paynonce").value = payload.nonce;
document.getElementById("paymentform").submit();
});
},
onCancel: function (data) {
console.log('checkout.js payment cancelled', JSON.stringify(data, 0, 2));
},
onError: function (err) {
console.error('checkout.js error', err);
}
}, '#paypal-button').then(function () {
});
});
The problem is according to my client he want a single page checkout, where the amount get generated dynamically.
For example if someone change the country or payment method the price can change for some €. A click EventListener start the calculation and changes the total sum in real time.
My Problem:
I cant change the amount of my paypal intialization of this part:
return paypalCheckoutInstance.createPayment({
flow: 'checkout',
locale: ''+langanalytics+'',
amount: '10.00',
currency: 'EUR'
});
Is there any way to update the amount outsite of the function as soon as total sum changes (i have full control of this).
I already tried to intialize the whole braintree.client.create new on total sum change but i get errors from hosted fields a instance is already created and for paypal i recieve multiple buttons.
I want to accept payment in Multiple currencies & also autofill the Address/Name in PayPal form using Express Checkout method
I have tried going through various posts, paypal getting started, paypal community, but not able to find if it possible.
Currently, using Express Checkout I'm able to receive payment on changing the get parameter of the script.
<script src="https://www.paypal.com/sdk/js?client-id=valueOfClientID¤cy=GBP"> </script>
Is is possible to pass the currency & name/address details in below code?
<script>
paypal.Buttons({
createOrder: function(data, actions) {
return actions.order.create({
purchase_units: [{
amount: {
value: '24'
}
}]
});
},
onApprove: function(data, actions) {
return actions.order.capture().then(function(details) {
alert('Transaction completed by ' + details.payer.name.given_name);
// Call your server to save the transaction
return fetch('/paypal-transaction-complete', {
method: 'post',
headers: {
'content-type': 'application/json'
},
body: JSON.stringify({
orderID: data.orderID
})
});
});
}
}).render('#paypal-button-container');
</script>
Based on the currency dynamically inject the script to the page and pass the address object as mentioned in the link
Hello I am using the following setup
Created paypal merchant and customer sandbox accounts
Configured paypal REST API app
Added a webhook url to my server and have validated that it works using the webhook simulator
Used the Express Checkout javascript implementation found here
I am able to make successful payments when viewing the notifications in sandbox but no webhook is ever triggered???
Below is a sample of my javascript implementation that I have used, please not that it's embedded in a coldfusion script file hence the use hashtags.
`
var items = #paypalItems#;
// Render the PayPal button
paypal.Button.render({
env: '#application.config.paypal.bSandbox ? "sandbox" : "production"#', // sandbox | production
commit: true,
//style the button
style: {
label: 'pay'
},
// PayPal Client IDs - replace with your own
client: {
sandbox: '#application.config.paypal.sandbox_key#',
production: '#application.config.paypal.live_key#'
},
// Wait for the PayPal button to be clicked
payment: function(data, actions) {
// Make a client-side call to the REST api to create the payment
return actions.payment.create({
payment: {
transactions: [{
amount: {
total: #trim(numberFormat( application.oCart.getTotal(bDiscount=1,bShipping=1) , "99999999.99" ))#,
currency: "AUD",
details: {
subtotal: #trim(numberFormat( application.oCart.getTotal() - application.oCart.getAmountGST( amount=application.oCart.getTotal(bDiscount=1), addGST=false ), "99999999.99" ))#,
tax: #trim(numberFormat(application.oCart.getAmountGST( amount=application.oCart.getTotal(bDiscount=1), addGST=false ), "99999999.99" ))#,
shipping: #trim(numberFormat( application.oCart.oShipping.getCartShippingAmount(country=session.fcbshoppingCart.order.shippingCountry), "99999999.99" ))#
}
},
invoice_number: "#orderNumber#",
item_list: {
items: items,
shipping_address: {
recipient_name: "#session.fcbshoppingCart.customer.firstName# #session.fcbshoppingCart.customer.lastName#",
line1: "#session.fcbshoppingCart.order.shippingAddress1#",
line2: "#session.fcbshoppingCart.order.shippingAddress2#",
city: "#session.fcbshoppingCart.order.shippingSuburb#",
country_code: "#paypalCountryCode#",
postal_code: "#session.fcbshoppingCart.order.shippingPostCode#",
state: "#session.fcbshoppingCart.order.shippingState#"
}
}
}]
}
});
},
// Wait for the payment to be authorized by the customer
onAuthorize: function(data, actions) {
console.log( "Paypal Authorize:", data );
// Execute the payment
return actions.payment.execute().then(function(payment) {
console.log( "Paypal Response:", payment );
//payment has been accepted so we can now generate an order
$.ajax({
type: "get",
url: "/apps/paypal/createOrder.cfm",
data: {
transactionNumber: "#orderNumber#",
payPalPaymentId: data.paymentID
},
dataType: "json",
success: function( res ) {
console.log('edharry create order data', res);
if( res.BPAYMENTPROCEED ) {
$('##paypal-message').addClass("show success").text('Payment Successfully Complete!');
//lets redirect to the checkout success page.
window.location.href = window.location.origin + '/shop/checkout/confirmation?productOrder=' + res.PRODUCTORDER.OBJECTID;
} else {
//need to handle a failed transaction
$('##paypal-message').addClass("show failure").text('Payment did not complete on server!');
}
},
error: function() {
//lets show an error
$('##paypal-message').addClass("show failure").text('Payment did not complete on server!');
}
})
$('##paypal-message').addClass("show success").text('Payment Successfully Complete!');
});
},
onCancel: function(data) {
console.log('The payment was cancelled!');
}
}, '##paypal-button-container');`
This is an ongoing issue with Paypal. They are aware of this issue and are currently working to resolve this.
I'm trying to integrate Paypal Express Checkout into simple Shopping Cart. There are different ways to do that. Paypal recommends to choose between Basic or Advanced integration and version 4.0 of checkout.js (with REST API). So far so good.
I created Paypal App in my Paypal account to get credentials and start testing it.
The test was OK, but there are some misunderstandings here.
Checkout.js send the amount ( 1.00 ) and currency ( EUR ) to the Paypal servers via REST API (along with my credentials). And if the payment is finished OK - callback function onAuthorize is triggered and there are two parameters with response (data and actions). Well, here I call my own AJAX function to write transaction response data in my database. BUT... I get here only PaymentID and PayerID of the paid transaction?!! And if I want to search later into web interface of paypal.com - there is no such thing as PaymentID. There is only TransactionID ??? How to get other transaction details in the response in onAutorize callback function? How can I get TransactionID here to write down in my database? May be here I have to call Paypal API, or have to implement Paypal IPN (instant payment notification )? BUT how to call IPN API, if I don't have TransactionID :)
<div style="width: 906px; text-align: right; height: 100px;
margin-top: 50px;">
<div id="paypal-button"></div>
</div>
<script src="https://www.paypalobjects.com/api/checkout.js"></script>
<script>
paypal.Button.render({
env: 'production', // Optional: specify 'sandbox' environment
style: {
size: 'medium',
shape: 'rect'
},
client: {
sandbox: 'xxx-my-credentials-xxx',
production: 'xxx-my-credentials-xxx'
},
payment: function() {
var env = this.props.env;
var client = this.props.client;
return paypal.rest.payment.create(env, client, {
transactions: [
{
amount: { total: '1.00', currency: 'EUR' }
}
]
});
},
commit: true, // Optional: show a 'Pay Now' button in the checkout flow
onAuthorize: function(data, actions) {
// Optional: display a confirmation page here
var EXECUTE_PAYMENT_URL = 'payment-process.php';
paypal.request.post(EXECUTE_PAYMENT_URL, { paymentID: data.paymentID, payerID: data.payerID, transactionID: data.transactionID, data: data }) .then(function(data) { }) .catch(function(err) { });
return actions.payment.execute().then(function() {
// Show a success page to the buyer
});
}
}, '#paypal-button');
</script>
To read the information from the transaction you need to call and save data JSON in database
return actions.payment.execute().then(function() {
actions.payment.get().then(function(data) {
if(data.state === 'approved'){
console.log(data);
var transactionId = data.id;
alert("Transaction ID: "+ transactionId + " \n State: " +data.state);
}else{
console.log(data);
}
});
});