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.
Related
I want to create PayPal payment using javascript SDK. I have followed PayPal documentation https://developer.paypal.com/sdk/js/reference/. Below is the code that I have implemented. The code is working for PayPal payment but when clicking in "Debit or Credit Card", and filling all the billing information, it's not working. When I looked into network request, to URL(https://www.paypal.com/graphql?fetch_credit_form_submit) and it's showing 429 HTTP code with no any response. I have looked lot of videos where this code is working but its not working for me. Any help is really appreciated.
<script src="https://www.paypal.com/sdk/js?client-id=AQTjGimz0db5Gqx2NLBvgXfc-dckdeKGJzJ5KY1JBsv7K5OWYsjipJuh8MX25IoohCWNl09RL4hA24uN"></script>
<script>
paypal.Buttons({
createOrder:function(data,actions){
return actions.order.create({
purchase_units:[{
amount:{
value:'40.99'
}
}]
})
}
}).render('#paypal-button-container');
</script>
<script src="https://www.paypal.com/sdk/js?client-id=AQTjGimz0db5Gqx2NLBvgXfc-dckdeKGJzJ5KY1JBsv7K5OWYsjipJuh8MX25IoohCWNl09RL4hA24uN"></script>
<script>
paypal.Buttons({
createOrder: function(data, actions) {
// Set up the transaction
return actions.order.create({
purchase_units: [{
amount: {
value: 49.0
}
}]
});
},
onApprove: function(data, actions) {
///.........
}).render('#paypal-button-container');
</script>
I will say up front, that I am sure there may be easier or better ways to do this, so if you know of one feel free to comment and explain your method.
For my application though, some things cannot change:
Solution must work with Laravel
Solution must work with Paypal Checkout
Best if solution can't be easily circumvented (don't want people able to easily alter the price of what gets processed for example. So I want the information to come from server side database, or a controller, etc.)
Right now I have things setup as follows:
In the Laravel view:
#push('scripts')
<script src="https://www.paypal.com/sdk/js?client-id=CLIENT_ID_HERE"></script>
<script src="{{ asset('js/paypalbutton.js') }}" type="text/javascript"></script>
#endpush
//LOTS OF STUFF HERE
//|Further Down|
//| |
//v v
<div class="show-price">
{{'$' . $offering['price']}} //This will display the price for current item from mysql
</div>
<div class="click-to-purchase">
<div id="paypal-button-container" load="paypalbutton(this)">
</div>
</div>
in a .js file called paypalbutton.js inside the laravel project directory:
$(document).ready(function paypalbutton(){
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) {
alert('Transaction completed by ' + details.payer.name.given_name);
});
}
}).render('#paypal-button-container'); // Display payment options on your web page
});
This works fine to display the paypal buttons on the page, and it works to process a payment, problem is, I need to pass information from sqlite database to the javascript file with information like for example, the amount of the transaction.
Ideally I would just save variables for each piece of information on top of the .js file, and have them get initialized with the correct values at run time.
you can do this by global js variable :
#push('scripts')
<script>
let amount ='{{$amount}}'
</script>
<script src="https://www.paypal.com/sdk/js?client-id=CLIENT_ID_HERE"></script>
<script src="{{ asset('js/paypalbutton.js') }}" type="text/javascript"></script>
#endpush
and in your js file :
$(document).ready(function paypalbutton(){
paypal.Buttons({
createOrder: function(data, actions) {
return actions.order.create({
purchase_units: [{
amount: {
value: amount
}
}]
});
},
onApprove: function(data, actions) {
return actions.order.capture().then(function(details) {
alert('Transaction completed by ' + details.payer.name.given_name);
});
}
}).render('#paypal-button-container'); // Display payment options on your web page
});
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]¤cy=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
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/#
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>