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>
Related
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.
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 am trying to set the currency for the PayPal API and I am unable to do so. When you click on the PayPal button, It shows the total amount in USD (next to the cart icon). Under pay with, it shows the amount converted to CAD which is not what I want. I want the amount set in createOrder to be in the currency I set.
<script src="https://www.paypal.com/sdk/js?currency=CAD&client-id="></script>
<script>
paypal.Buttons({
createOrder: function(data, actions) {
return actions.order.create({
intent: "CAPTURE",
purchase_units: [{
amount: {
value: "150"
}
}]
});
},
onError: function (err) {
alert(err);
}
}).render('#paypal-button-container');
</script>
I have tried to put currency_code: "CAD" in amount but I get:
Error: Unexpected currency: CAD passed to order.create. Please ensure you are passing /sdk/js?currency=CAD in the PayPal script tag.
Not sure where you're going wrong, since your code would work if it were complete. The following is a working example:
<script src="https://www.paypal.com/sdk/js?currency=CAD&client-id=sb"></script>
<script>
paypal.Buttons({
createOrder: function(data, actions) {
return actions.order.create({
intent: "CAPTURE",
purchase_units: [{
amount: {
value: "150",
currency_code: "CAD"
}
}]
});
},
onError: function (err) {
alert(err);
}
}).render('body');
</script>
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
I'm using Paypal's Smart Payment Buttons with the following code:
window.paypal.Buttons({
createOrder: function(data, actions) {
return actions.order.create({
purchase_units: [{
amount: {
value: this.price,
currency: "USD"
}
}]
});
},
...
}
Which works fine except for the fact that it asks the user for a shipping address on the checkout window, which I want to get rid of as this is a digital good and not a physical one. How can I achieve that? I've tried doing no_shipping: 1 and similar to no avail.
You can use application_context and shipping_preference like this
return actions.order.create({
"application_context": {
shipping_preference: "NO_SHIPPING",
},
purchase_units: [{
amount: {value: "0.1"},
},],
});
Figured it out, you need to create a payment instead of an order in the server side using a payment experience you have previously created.