I am a new paypal merchant and am trying to display some information on the checkout pop-up after the client clicks the PAY WITH PAYPAL button. I am using the JavaScript SDK in Sandbox mode
It is a digital purchase, so no shipping is needed -- which works in the code below
The only thing it shows on the Checkout pop-up is the total, "Hi John", Pay With options, and the PAY NOW button.
I want it to show what the client is purchasing, and our company info (name, phone number).
<script src="https://www.paypal.com/sdk/js?client-id=...">
createOrder: function(data, actions) {
// This function sets up the details of the transaction, including the amount and line item details.
var orderDescription = "ITEM YOU PURCHASED" // shows on payment history but not on payment pop-up
return actions.order.create({
intent: "CAPTURE",
purchase_units: [{
description: orderDescription,
amount: {
value: '0.26',
currency_code: "CAD"
}
}],
payee: {
email_address: "email"
},
payee_display_metadata: {
brand_name: "Company Name"
},
application_context: {
shipping_preference: "NO_SHIPPING",
business_name:"My Business Name",
},
note_to_payer: "Contact us at ... for any questions on your order.",
});
},
onApprove: function(data, actions) { .........
Argg..Why is it I always find the answer after I post a question...
I need a item breakdown then I get the down-arrow to expand the cart
changed purchase_units to
purchase_units: [{
amount: {
currency_code: "CAD",
value: "150.00",
breakdown: {
item_total: {
currency_code: "CAD",
value: "150.00"
}
}
},
items: [
{
name: "Tuition",
description: "The best item ever",
sku: "xyz-2654",
unit_amount: {
currency_code: "CAD",
value: "50.00"
},
quantity: "3"
},
]
}],
Related
I am using the PayPal Credit Card and i am trying to fill up the form using their code:
paypal.Buttons({
style: {
layout: 'vertical',
shape: 'rect',
height: 36
},
createOrder: function (data, actions) {
return actions.order.create({
//https://developer.paypal.com/docs/checkout/integration-features/standard-card-fields/
payer: {
name: {
given_name: "PayPal",
surname: "Customer"
},
address: {
address_line_1: '123 ABC Street',
address_line_2: 'Apt 2',
admin_area_2: 'San Jose',
admin_area_1: 'CA',
postal_code: '95121',
country_code: 'US'
},
email_address: "customer#domain.com",
phone: {
phone_type: "MOBILE",
phone_number: {
national_number: "14082508100"
}
}
},
application_context: {
shipping_preference: 'NO_SHIPPING'
},
purchase_units: [{
description: getPurchaseDescription(),
amount: {
value: $("#Amount").val()
}
}]
});
},
Works well but i want to fill the credit card number and expiry date too. Is there any way to do this?
I tried
card: {
number: "378282246310005"
}
But the credit number is not filled.
Thanks.
I want to fill the credit card number and expiry date too. Is there any way to do this?
No. PayPal's SDK buttons should only ever be used by customers on their own devices who are entering their own payment information (login or card details)
Also, be aware that card numbers and accompanying expiry dates are very sensitive information that in general should never be stored by most systems, but in the rare occasions where it makes sense to store them exacting measures must be taken, including a PCI SAQ of type D
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
My checkout code
let ORDERPRICE = 2;
paypal.Buttons({
createOrder: function(data, actions) {
return actions.order.create({
application_context: {
shipping_preference: "NO_SHIPPING",
brand_name: "MYCOMP",
user_action: 'PAY_NOW',
payment_method: {
payee_preferred: 'IMMEDIATE_PAYMENT_REQUIRED'
}
},
payer: {
name: {
given_name: 'NAME'
},
email_address: 'EMAIL#EMAIL.com'
},
purchase_units: [{
description: "description",
amount: {
currency_code: 'EUR',
value: ORDERPRICE
}
}]
});
},
onApprove: function(data, actions) {
return actions.order.capture().then(function(details) {
//submitting my form to show thank you page
var sentform = document.getElementById('booking-sent');
sentform.submit();
});
},
style: {
color: 'blue'
}
}).render('#paypal-button-container');
In a browser debug i see a POST to https://www.paypal.com/smart/api/order/23H57866L56525306/capture And i get an answer from PayPal
{"ack":"contingency","contingency":"UNPROCESSABLE_ENTITY","data":
{"name":"UNPROCESSABLE_ENTITY","details":[{"issue":"TRANSACTION_REFUSED","description":"The request was refused"}],
"message":"The requested action could not be performed, semantically incorrect, or failed business validation.","debug_id":"282422b19213c",
"links":[{"href":"https://developer.paypal.com/docs/api/orders/v2/#error-TRANSACTION_REFUSED","rel":"information_link","method":"GET"}]},"meta":{"calc":"282422b19213c","rlog":"rZJvnqaaQhLn%2FnmWT8cSUueWscmrtUHe5Y1Bd%2FeqyvyOTq66rSXAcnM25I5c5rd3HxcyHxUk51TwoDOk%2By6wR%2Bw1HIUZ5ikN_17823c767ad"},"server":"OIZ58dNapHV5upm8ATCTYU49pCRnWLUsUjSypMRTXJSK5O3nEGxxJcKhByP9VmJq8cMcxl0h826w9SamyEn7niIWkJCJ_dYRHcQcnfMQSPWr2KIOUwJTg_fz4H6p100NKDfIiTBVCsopCu5fUadAqZMpyXvcJvyrj70N6Vvp9rMUXBfLj7d7HnDtxtM_0wO0JUB8gZUJzNmGTn6283Qwandfgn1LcTH6mnja87iXsKVRSFcuLVmSXDOWbhZ3Bh0Dk9hD5ihBeK4T9DYh5TCqe0"}
When I'm going to https://developer.paypal.com/docs/api/orders/v2/#error-TRANSACTION_REFUSED there's no clue there what to do.
The transaction was refused.
Perhaps it was refused in part because you specified:
payment_method: {
payee_preferred: 'IMMEDIATE_PAYMENT_REQUIRED'
}
And it was going to be 'pending' (not immediate), for any number of possible reasons.
The reason was business account settings. Above code is totally ok.
Setting you need to take care of is the currency. To be more specific, you need to point all currencies you (as a business account) accept. In this case, I have set up Euro (EUR) as a currency of the payment. Meanwhile business account by default has only US Dollar (USD) set up as accepted currency.
I am using the JS script recommended by PayPal. It's working well, however it is showing a "Ship to" address of the buyers.
I am trying to search the internet and found that https://api.sandbox.paypal.com/v1/payment-experience/web-profiles/ requested with "no_shipping": 1, can do the trick. But for that we need to make a curl request before the payment.create, so that we can pass it returned id in the function.
Is this possible in JS?
Or is there a much better and simpler way to remove it using the following JS?
<script src="https://www.paypalobjects.com/api/checkout.js" data-version-4></script>
<script>
paypal.Button.render({
env: 'sandbox', // Optional: specify 'sandbox' or 'production'
client: {
sandbox: '{{$data['SandboxId']}}',
production: '{{$data['ProductionId']}}'
},
payment: function() {
var amount = document.getElementById("amount").value;
var env = this.props.env;
var client = this.props.client;
return paypal.rest.payment.create(env, client, {
transactions: [
{
amount: {
total: amount,
currency: "USD",
details: {
subtotal: amount,
tax: "0.00",
shipping: "0.00"
}
},
description: "This is payment description.",
item_list: {
items:[
{
quantity:"1",
name:"Orders",
price:amount,
sku:"product12345",
currency:"USD"
}
],
},
}],
});
},
commit: false, // Optional: show a 'Pay Now' button in the checkout flow
onAuthorize: function(data, actions) {
console.log(data);
alert('confirmation here');
// Optional: display a confirmation page here
return actions.payment.execute().then(function() {
alert('Success here');
// Show a success page to the buyer
});
},
}, '#paypal-button');
</script><div id="paypal-button" ></div>
To expand on Bluepnume's answer, here is a complete example:
payment: function(data, actions) {
return actions.payment.create({
payment: {
transactions: [
{
amount: { total: '1.00', currency: 'USD' }
}
]
},
experience: {
input_fields: {
no_shipping: 1
}
}
});
},
You can pass an experience options like so:
paypal.rest.payment.create({
// payment options here
}, {
// experience options here
});
This is how it needs to be done in ngx-paypal version 11
application_context:
{
shipping_preference: "NO_SHIPPING"
}
ngx-paypal: "^11.0.0"