pass amount total to PayPal express checkout - javascript

I have the express checkout button on my ASP.NET webforms webpage but can't seem to figure out how to pass the total variable (stored in a label on the page) to the PayPal popup when the button is clicked.
I know this question has been asked already (How Can pass order Total to (amount: { total: '0.01', currency: 'USD' } ) in paypal) but the answer makes little sense to me and doesn't go into as much detail as I need as a beginner programmer.
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="https://www.paypalobjects.com/api/checkout.js"></script>
<script>
paypal.Button.render({
env: 'sandbox', // sandbox | production
style: {
label: 'pay',
size: 'small', // small | medium | large | responsive
shape: 'rect', // pill | rect
color: 'gold' // gold | blue | silver | black
},
// PayPal Client IDs - replace with your own
// Create a PayPal app: https://developer.paypal.com/developer/applications/create
client: {
sandbox: 'AWDwdGr-KZK4jJi0WBUZmFowgG6oCtLpNDxtXuiOfAT1UdNUYeSlvoXYkrKW7SRdcYqqjHCo7IcYPmJf',
production: 'Production ClientID'
},
// 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: '0.01' , currency: 'EUR' }
}
]
}
});
},
// 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>
Could someone please give me some guidance on how I can go about doing this?

The answer you linked does explain this pretty well but as you wanted more explanation, in WebForms you can use asp.net inline server tags to access elements from your page as long as they are on an aspx file. The syntax is as follows:
<%=ElementName.Property%>
This allows you to either access the value directly or assign it to a javascript variable. In your case either should work fine, for elements such as labels and things that contain text the property you are looking for will generally be innerHTML or innerText, so the following should give you the result you need:
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="https://www.paypalobjects.com/api/checkout.js"></script>
<script>
paypal.Button.render({
env: 'sandbox', // sandbox | production
style: {
label: 'pay',
size: 'small', // small | medium | large | responsive
shape: 'rect', // pill | rect
color: 'gold' // gold | blue | silver | black
},
// PayPal Client IDs - replace with your own
// Create a PayPal app: https://developer.paypal.com/developer/applications/create
client: {
sandbox: 'AWDwdGr-KZK4jJi0WBUZmFowgG6oCtLpNDxtXuiOfAT1UdNUYeSlvoXYkrKW7SRdcYqqjHCo7IcYPmJf',
production: 'Production ClientID'
},
// 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: '<%=TheNameOfYourLabel.innerText%>' , currency: 'EUR' }
}
]
}
});
},
// 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>

Related

How can I display javascript object for paypal api?

I would like to display the details of the payment after users have make a purchase using paypal api. I realised the data is stored in console.log(details) How do I view the console.log(details) in another html page and insert it in the payment database? Here is my codes for the paypal api:
<head>
<meta charset="utf-8">
<title>My Orders</title>
<link rel=" stylesheet" href="~/styles/StyleSheet2.css">
<script src="https://www.paypal.com/sdk/js?client-id=AchXBKgrx7hxmn4m87StLCAuDD76_D4vX0vMqV2XAEyhhiHmO5bwB7O6uyZ3bW8KiyjVdnJdgW0aCh8e"></script>
<script>
paypal.Buttons({
createOrder: function(data, actions){
return actions.order.create({
purchase_units: [{
amount: {
value: '0.01'
}
}]
});
},
onApprove: function (data, actions) {
return actions.order.capture().then(function (details) {
console.log(details)
window.location.replace("http://localhost:62941/Product/Success")
});
},
onCancel: function (data) {
window.location.replace("http://localhost:62941/Product/Unsuccessfulpayment")
}
}).render('#paypal-button-container');
</script>
How do I view the console.log(details) in another html page and insert it in the payment database?
Don't. Do not use actions.order.capture() on the client side and then store information in a database.
If you want to store information in a database, do the capture on a server.
Here is the approval flow to use: https://developer.paypal.com/demo/checkout/#/pattern/server
Pair this with two routes on your server, one for 'Create Order' and one for 'Capture Order', documented here.

programmatically set Paypal purchase 'value'

I'm trying to build my first paypal shopping payment system. Paypal helpfully provide some base code to aid with this:
<div id="paypal-button-container"></div>
<script src="https://www.paypal.com/sdk/js?client-id=[MY-CLIENT-ID]&currency=GBP" data-sdk-integration-source="button-factory"></script>
<script>
paypal.Buttons({
style: {
shape: 'rect',
color: 'white',
layout: 'vertical',
label: 'paypal',
},
createOrder: function(data, actions) {
return actions.order.create({
purchase_units: [{
amount: {
value: '1'
}
}]
});
},
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 can't seem to figure out how to set the 'value' label inside the function inside of:
createOrder: function(data, actions) {
return actions.order.create({
purchase_units: [{
amount: {
value: '1'
}
}]
});
My website is in bootstrap 4.5 with jQuery. On the site's index.html page I have 2 buttons that can be clicked to purchase two different services. Depending on which one the user selects, I use javascript to set the value in localStorage as follows: localStorage.setItem('serviceCost', $('#standard-cost').text()); This grabs a value from a span tag with ID 'standard-cost'. This is then used to set the text on the purchase.html page confirming for the user their selected item. I want to get the value from localStorage.getItem(serviceCost) and use it to set the cost for the 'value' key in the above function but everything I attempt is unsuccessful. The paypal script is embedded in a html page and the jQuery is in a separate file. The Paypal site doesn't offer any insight into this and I'm assuming this is a fairly common process, so how do you get a value from localStorage and pass it to the value variable in Paypal's generated code?
amount: {
value: localStorage.getItem('serviceCost')
}
Yep

Paypal - Split payment and send it to different PayPal account

My goal is to get 5% of the amount and send it to Company PayPal account, and the other 95% will send directly to the Paypal of the other user. How can I do it in PayPal Code?
Here is my PayPal code.
paypal.Button.render({
style: {
size: 'responsive',
color: 'black'
},
env: 'sandbox', // 'sandbox' Or 'production',
client: {
sandbox: 'MyClientID',
production: ''
},
locale: 'en_US',
commit: true, // Show a 'Pay Now' button
payment: function(data, actions) {
// Set up the payment here
return actions.payment.create({
payment: {
transactions: [{
amount: { total: '1.00', currency: 'USD' }
}]
}
});
},
onAuthorize: function(data, actions) {
// Execute the payment here
return actions.payment.execute().then(function(payment) {
console.log(payment);
});
}
}, '#paypal-button');
Please help me.. Thank you.
No it's not possible with just a Paypal button. Paypal has its own way to split the money to whichever account you want to set it to and you'll need to use the Payouts API.
Note: It used to be "Adaptive Payments" but they (Paypal) stopped allowing new integrations.
According to the documentation: https://developer.paypal.com/docs/api/payments.payouts-batch/v1/
Use the Payouts API to make PayPal payments to multiple PayPal
accounts in a single API call. The Payouts API is a fast, convenient
way to send commissions, rebates, rewards, and general disbursements.
Please note that you'll need a paypal business account to be elligible for this: https://developer.paypal.com/docs/payouts/integrate/prerequisites/#

paypal checkout using client integration

I have the following sample code from the paypal dev documentation.
<div id="paypal-button-container"></div>
<script src="https://www.paypalobjects.com/api/checkout.js"></script>
<script>
// Render the PayPal button
paypal.Button.render({
// Set your environment
env: 'sandbox', // sandbox | production
// Specify the style of the button
style: {
layout: 'vertical', // horizontal | vertical
size: 'medium', // medium | large | responsive
shape: 'rect', // pill | rect
color: 'gold' // gold | blue | silver | white | black
},
// Specify allowed and disallowed funding sources
//
// Options:
// - paypal.FUNDING.CARD
// - paypal.FUNDING.CREDIT
// - paypal.FUNDING.ELV
funding: {
allowed: [
paypal.FUNDING.CARD,
paypal.FUNDING.CREDIT
],
disallowed: []
},
// Enable Pay Now checkout flow (optional)
commit: true,
// PayPal Client IDs - replace with your own
// Create a PayPal app: https://developer.paypal.com/developer/applications/create
client: {
sandbox: 'AZDxjDScFpQtjWTOUtWKbyN_bDt4OgqaF4eYXlewfBP4-8aqX3PiV8e1GWU6liB2CUXlkA59kJXE7M6R',
production: '<insert production client id>'
},
payment: function (data, actions) {
return actions.payment.create({
payment: {
transactions: [
{
amount: {
total: '0.01',
currency: 'USD'
}
}
]
}
});
},
onAuthorize: function (data, actions) {
return actions.payment.execute()
.then(function () {
window.alert('Payment Complete!');
});
}
}, '#paypal-button-container');
</script>
I've replaced the sandbox client ID with my own ID. When I double click on the HTMl file and open it locally on my web browser, something weird happens. When I click on the checkout box and enter my sandbox buyer's credentials, the buyer's bank account gets deducted. However, when I log onto my sandbox facilitator, it's bank account doesn't get updated.
Could someone please help me out? Thanks!!

PayPal Developer Issues With Comma

I have run into an error. I am using https://developer.paypal.com/docs/checkout/integrate/ to implement the PayPal payment into my ASP.NET MVC Project. My currency is a float, and the project has prices like 150,99. Whenever this price goes through, it will say that the price is 99,00 EUR. It only reads what is behind the comma. Whenever the price is 190,00, it will correctly say that the price is 190,00 EUR. How do I fix this?
The JavaScript on the front-end is currently this:
<script>
var totalPrice = (#ViewBag.totalPrice);
</script>
<script src="https://www.paypalobjects.com/api/checkout.js"></script>
<script>
// Render the PayPal button
paypal.Button.render({
// Set your environment
env: 'sandbox', // sandbox | production
// Specify the style of the button
style: {
layout: 'horizontal', // horizontal | vertical
size: 'large', // medium | large | responsive
shape: 'pill', // pill | rect
color: 'black' // gold | blue | silver | white | black
},
// Specify allowed and disallowed funding sources
//
// Options:
// - paypal.FUNDING.CARD
// - paypal.FUNDING.CREDIT
// - paypal.FUNDING.ELV
funding: {
allowed: [
paypal.FUNDING.CARD,
paypal.FUNDING.CREDIT
],
disallowed: []
},
// Enable Pay Now checkout flow (optional)
commit: true,
// PayPal Client IDs - replace with your own
// Create a PayPal app: https://developer.paypal.com/developer/applications/create
client: {
sandbox: '<removed>',
production: '<insert production client id>'
},
payment: function (data, actions) {
return actions.payment.create({
payment: {
transactions: [
{
amount: {
total: totalPrice,
currency: 'EUR'
}
}
]
}
});
},
onAuthorize: function (data, actions) {
return actions.payment.execute()
.then(function () {
window.alert('Payment Complete!');
});
}
}, '#paypal-button-container');
</script>
And back-end for the price is like this:
[HttpGet]
public IActionResult Index()
{
...
float totalPrice = 0;
float sendcost = 2.95f;
...
foreach(ShoppingCartModel item in model)
{
item.subtotal = item.qty * item.price;
totalPrice += item.subtotal;
}
if(totalPrice < 100)
{
ViewBag.totalPrice = totalPrice + sendcost;;
}
else
{
ViewBag.totalPrice = totalPrice;
}
}
}
...
}
The official answer is that your web app's language setting causes the server to output numerical values with a comma as decimal separator. So
var totalPrice = (#ViewBag.totalPrice);
ends up
var totalPrice = (150,99);
in the browser and since JavaScript has something called a comma operator, totalPrice is now 99.
To fix this on the server side, you can change the locale used for formatting to English by adding
CultureInfo.DefaultThreadCurrentCulture = CultureInfo.GetCultureInfo("en-US");
to the Configure() method in Startup.cs.

Categories

Resources