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
Related
I'm making a subscription with Paypal, however the custom value I'm trying to create just isn't being received from the IPN from PayPal.
Therefore, I must be doing something wrong. To my knowledge, I'm passing the value correctly though?
This is my code, I'm trying to pass custom with my own value.
paypal.Buttons({
style: {
shape: 'rect',
color: 'gold',
layout: 'vertical',
label: 'subscribe'
},
createSubscription: function(data, actions) {
return actions.subscription.create({
'plan_id': 'P-000',
'custom': 'custom value' // the custom parameter attempt
});
},
onApprove: function(data, actions) {
alert(data.subscriptionID);
}
}).render('#paypal-button-container');
The parameter is documented as custom_id here: https://developer.paypal.com/docs/api/subscriptions/v1/#subscriptions-create-request-body
Unknown parameter names like custom will be ignored
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 have two scripts, one to calculate a total for the items in a shopping cart and one to pass the variable to a PayPal API. Is it possible to pass this variable from the shopping cart script to the PayPal script without someone being able to change its value from the console? Otherwise people would be able to determine how much they would like to pay for the items and send the info through to PayPal. Here is my code:
Shopping Cart:
```
var total = 0; //Total for all the items in the shopping cart, value is passed off to paypal-buttons.js to complete the checkout.
// Calculates values items in cart depending on quantity
function addData(clicked_id, quantity) {
var price = values[clicked_id].price;
var qty = document.getElementById(quantity).value;
var lineTotal = price * qty;
total += lineTotal;
document.getElementById("total").innerHTML = total;
addRow(clicked_id, qty, lineTotal);
}
PayPal:
paypal.Buttons({
style: {
shape: 'rect',
color: 'gold',
layout: 'vertical',
label: 'checkout',
},
createOrder: function(data, actions) {
return actions.order.create({
purchase_units: [{
amount: {
value: total
}
}]
});
},
onApprove: function(data, actions) {
return actions.order.capture().then(function(details) {
alert('Thank you for your order ' + details.payer.name.given_name + ', your equipment is on its way!');
});
}
}).render('#paypal-button-container');
I would like to send the value of 'total' from the shopping cart to PayPal. I might try using obfuscation as a partial solution but I would like it to be more secure then that.
The only way to secure against malicious client-side changes is to switch to a server-side integration for the API calls to set up and capture the payment. Here is a demo pattern of the UI:
https://developer.paypal.com/demo/checkout/#/pattern/server
Here is a guide to implementing the necessary v2/orders API calls from your server:
https://developer.paypal.com/docs/checkout/reference/server-integration/
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.