I would like to direct my clients to a payment site that allows them to enter the custom invoice amount. I am using the basic Paypal checkout code, however the amount is defaulting to $1. I would like to add a text box to set the amount.
The current value is set to 1 in the code below, is there a way to change this to a manual entry?
<div id="paypal-button-container"></div>
<script src="https://www.paypal.com/sdk/js?client-id=Aff-
dCcKoLWR548gVo8w9nNu1F7Lx0Poo8I1STNdRuxvRYyv3JDrcNqcg3snh7SRmY9BMZdJXm1Ih95y¤cy=USD" data-sdk-
integration-source="button-factory"></script>
<script>
paypal.Buttons({
style: {
shape: 'rect',
color: 'gold',
layout: 'vertical',
label: 'pay',
},
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');`enter code here`
</script>
You can use Javascript to get the amount from somewhere else on your site.
value: document.getElementById('myAmountInput').value
Or similar.
Related
<div id="paypal-payment-button">
</div>
<script src="https://www.paypal.com/sdk/js?client-id= CLIENT_ID&disable-funding=credit,card¤cy=USD"></script>
paypal.Buttons({
style: {
color: 'blue',
shape: 'pill'
},
createOrder: function(data, actions) {
return actions.order.create({
purchase_units: [{
amount: {
value: "<?php echo $total; ?>"
}
}]
});
},
}).render('#paypal-payment-button');
I have a paypal page that accepts paypal pay later. I want to dynamically set the button amount with javascript.
This is the code
<script src="https://www.paypal.com/sdk/js?client-id=¤cy=GBP&enable-funding=paylater,card&components=messages,buttons">
</script>
<div id="paypal-button-container"></div>
<script>
var amount = 90;
//$('#paypal').data('pp-amount',amount);
paypal.Buttons({
createOrder: function(data, actions) {
return actions.order.create({
purchase_units: [{
amount: {
value: amount
}
}]
});
},
//return url after successful payment
onAuthorize: function(data, actions) {
console.log(data, actions);
actions.payment.execute().then(function(data) {
console.log(data);
// Show a success page to the buyer
});
}
}).render('#paypal-button-container');
</script>
<div id="paypal" data-pp-message data-pp-amount="90"> </div>
I added the paypal id into this <div id="paypal" data-pp-message data-pp-amount="90"> </div>
I am trying to dynamically set this value
data-pp-amount="90"
but this doesn't work $('#paypal').data('pp-amount',amount);
I did it this way
<script src="https://www.paypal.com/sdk/js?client-id=¤cy=GBP&enable-funding=paylater,card&components=messages,buttons">
</script>
<div id="paypal-button-container"></div>
<div class="pp-message"> </div>
<script>
var am = 90;
paypal.Buttons({
createOrder: function(data, actions) {
return actions.order.create({
purchase_units: [{
amount: {
value: am
}
}]
});
},
//return url after successful payment
onAuthorize: function(data, actions) {
console.log(data, actions);
actions.payment.execute().then(function(data) {
console.log(data);
// Show a success page to the buyer
});
}
}).render('#paypal-button-container');
paypal.Messages({
amount: am,
placement: 'product',
style: {
layout: 'text',
logo: {
type: 'primary',
position: 'top'
}
}
})
.render('.pp-message');
</script>
I'm new to the Paypal SDK. I've managed to pass the cart total from Laravel 8 cart in the Paypal code, but I'm looking to add shipping rates based on different types of shipping, like economy and priority mail, but I want to do it for different states. Does anybody know some sdk code to do this, and the code to add that to the cart total? Here is what I've done so far...
paypal.Buttons({
createOrder: function(data, actions) {
return actions.order.create({
purchase_units: [{
amount: {
value: "{{ $cartTotal }}",
currency_code: "USD"
},
shipping: {
options: [
{
id: "SHIP_123",
label: "Free Shipping",
type: "SHIPPING",
selected: true,
amount: {
value: "3.00",
currency_code: "USD"
}
},
{
id: "SHIP_456",
label: "Pick up in Store",
type: "PICKUP",
selected: false,
amount: {
value: "0.00",
currency_code: "USD"
}
}
]
}
}]
});
},
onApprove: function(data, actions) {
// This function captures the funds from the transaction.
return actions.order.capture().then(function(details) {
// This function shows a transaction success message to your buyer.
alert('Transaction completed by ' + details.payer.name.given_name);
});
}
}).render('#paypal-button-container');
//This function displays Smart Payment Buttons on your web page.
but I want to do it for different states
To calculate an amount for different addresses, you need to use an onShippingChange callback function for once the buyer has selected an address.
It appears you already found the sample code on Support multiple shipping options, so read further down that page.
Reference data.shipping_address to determine the selected country and state, and return actions.order.patch to make any changes to the order , or actions.reject if there is no shipping to that location. See further sample code in the SDK reference.
Sometime a user charged multiple times because of accidental clicks on the pay button in paypal smart payment button. In paypal dashboard > payment preferences I have already enabled the option "Yes, block multiple payments per invoice ID".
Now I want to set the invoice id in my smart button script code, which is as follows:
function initPayPalButton() {
paypal.Buttons({
style: {
shape: 'rect',
color: 'gold',
layout: 'vertical',
label: 'pay',
},
createOrder: function(data, actions) {
return actions.order.create({
purchase_units: [{"amount":{"currency_code":"USD","value":total_amount}}],
application_context: {
shipping_preference: 'NO_SHIPPING'
}
});
},
onApprove: function(data, actions) {
return actions.order.capture().then(function(details) {
window.location = 'success_url';
});
},
onError: function(err) {
console.log(err);
alert('Something went wrong. Please refresh the page and try again.');
}
}).render('#button_container_id');
}
initPayPalButton();
Add invoice_id with a unique identifier from your system to avoid duplicate payments.
See: https://developer.paypal.com/docs/multiparty/checkout/standard/integrate/#link-addpaymentbuttons
Other useful purchase unit parameters include:
A unique invoice_id that hasn't been used for a previously-completed
transaction to identify the order for accounting purposes and to
prevent duplicate payments.
A custom_id value of your choice for your
system or own reference. This value is not indexed or visible to the
buyer.
This is what my code looks like:
paypal.Buttons({
style: {
shape: 'rect',
color: 'silver',
label: 'buynow'
},
onError: function (err) {
// FIXME: show the user an error message
},
onClick: function(data) {
// FIXME: do something cool when the button is clicked
},
// Set up the transaction
createOrder: function(data, actions) {
return actions.order.create({
purchase_units: [{
description: 'My awesome product',
amount: {
currency_code: "USD",
value: 9.99,
breakdown: {
item_total: {
currency_code: 'USD',
value: 9.99
},
discount: {
currency_code: "USD",
value: 1.25
}
}
},
invoice_id: 'UNIQUE-ID',
custom_id: 'ANOTHER-SYSTEM-ID'
}],
application_context: {
shipping_preference: "NO_SHIPPING"
}
});
},
// Finalize the transaction
onApprove: function(data, actions) {
return actions.order.capture().then(function(details) {
// FIXME: finalise the order and show the success message
console.log("order id: "+details.id);
});
}
}).render('#paypal-button-container');
}
In the purchase_units, specify invoice_id.
It's documented here: https://developer.paypal.com/docs/api/orders/v2/#orders-create-request-body
I'm having a problem using the REST API along with the
paypal-checkout javascript integration
(https://github.com/paypal/paypal-checkout) to set a third party as the
payment receiver.
According to this
https://devblog.paypal.com/setting-payee/
a third-party payee should be allowed now. Correct?
The heart of the matter seems to be this call:
paypal.rest.payment.create(button_member.env,
button_member.client,
pp_data_member);
where button_member.env is "sandbox"
and button_member.client is
{"sandbox":"Ab**********0O","production":"AW**********38"}
When pp_data_member is
{"intent":"authorize",
"payer":{"payment_method":"paypal"},
"transactions":[
{ "amount":{"total":"5.50",
"currency":"USD",
"details":{
"subtotal":"5.00","tax":"0.00","shipping":"0.50"
}},
"payee":{"email":"development-facilitator#troc*****.com"},
"soft_descriptor":"ZenKitsch",
"notify_url":
"https://www.trocadero.com/_internal/alpha/**********",
"description":"Your Zen Kitsch order of September 16, 2017",
"invoice_number":"CHKT-zenkitsch-479618-SV16M8PSFG",
"item_list":{
"items":[{"sku":"844697","name":"United Airlines Beverage Menu Card","quantity":"1","price":"5.00","currency":"USD"}]
}
}
]
}
all works fine. But when I set the payee to a different sandbox address and
nothing else changes:
...
"payee":{"email":"development-seller#troc*****.com"},
...
while I get the popup as expected, after I log in with the buyer sandbox
account and confirm the purchase, I get a failure back from the API, a
400 status code and a "contingency":"PERMISSION_DENIED" error message:
Request URL: https://www.sandbox.paypal.com/webapps/hermes/api/payment/PAY-9TX329794L770414LLG6YSZQ/execute
Request Method:POST
Status Code:400 Bad Request
Remote Address:173.0.82.77:443
{"ack":"contingency",
"contingency":"PERMISSION_DENIED",
"meta":
{"calc":"e305762ccebe",
"rlog":"7Jz2DIxLg7B25ErQ1yIJI2shyI%2FIqDJZY2fbMMEef%2FVnBUNHVn2YYp4ptK5fN6DoGzjRHFjL6nRZkZqdnHIRwQ_15e8c60e8a8"
},
"server":"6ajNNYfBIhVmBs2ogHWhF35ezBlTaOHlCtx2erpwzk-5XmIY9isE5Hk07x5GBputw5DXmqsjLE71y3mJtJHw6TPBWcgBGzPpOkEXIWpJVOPsgsani23mTTQPfrrhKtd2pLLSFQDXQ0ISqpWOC0vZa4DvUshowfLFfFn_oNyAB_gquO5vWd1wIZOEp8z6EiUAnjsDBhCv1K1xBjn6KsOFyczIThuWeoh86RnPLJnhzpqXWAuSDCof_00kGVXCskQDxDqLpa4-0Ry"
}
Any help greatly appreciated. Thanks!
Edited to add: small code to demo the issue. The first button with payee set to app owner works, the second button fails with an error that can be ssen in the console.
<html><head><title>PP Button Test</title></head>
<body>
<script src="https://www.paypalobjects.com/api/checkout.js" data-version-4></script>
<div id="myContainerElement1"></div>
<hr>
<div id="myContainerElement2"></div>
<script>
paypal.Button.render({
client: {
sandbox: 'AbR*****T0O',
production: 'xxxxxxxxx'
},
payment: function(data, actions) {
return actions.payment.create({
transactions: [
{
amount: {
total: '1.00',
currency: 'USD'
},
payee:{email:'development-facilitator#troc*****.com'},
}
]
});
},
commit: true,
locale: 'en_US',
style: {
size: 'medium', // tiny, small, medium
color: 'blue', // orange, blue, silver
shape: 'pill' // pill, rect
},
env: 'sandbox', // Optional: specify 'sandbox' or 'production'
onAuthorize: function(data, actions) {
return actions.payment.execute().then(function(response) {
console.log('payment 1 completed!');
});
},
onCancel: function(data) {
console.log('payment 1 was cancelled!');
}
}, '#myContainerElement1');
paypal.Button.render({
client: {
sandbox: 'AbRF38w5WaF4qE3nSr_JLsxdGGOEGSpS4wxI8HbW-QYcnISvpmPEc-hJfUemR1k57IrCKwBDNamV9T0O',
production: 'xxxxxxxxx'
},
payment: function(data, actions) {
return actions.payment.create({
transactions: [
{
amount: {
total: '1.00',
currency: 'USD'
},
payee:{email:'development-seller#troc*****.com'},
}
]
});
},
commit: true,
locale: 'en_US',
style: {
size: 'medium', // tiny, small, medium
color: 'blue', // orange, blue, silver
shape: 'pill' // pill, rect
},
env: 'sandbox', // Optional: specify 'sandbox' or 'production'
onAuthorize: function(data, actions) {
return actions.payment.execute().then(function(response) {
console.log('payment 2 completed!');
});
},
onCancel: function(data) {
console.log('payment 2 was cancelled!');
}
}, '#myContainerElement2');
</script>
</body></html>