Menu
On my webpage I'm trying to implement a PayPal checkout using JavaScript following the manual: https://developer.paypal.com/docs/checkout/
Everything works great with the standard options. For example this works just fine:
paypal.Buttons({
createOrder: function(data, actions) {
return actions.order.create({
purchase_units: [{
amount: {
currency_code: 'EUR',
value: '120.16'
},
description: 'Purchase Unit test description',
custom_id: '64735',
}]
})
},
onApprove: function(data, actions) {
return actions.order.capture().then(function(details) {
alert('Transaction completed by ' +
details.payer.name.given_name)
// Call your server to save the transaction
return fetch('/api/paypal-transaction-complete', {
method: 'post',
headers: {
'content-type': 'application/json'
},
body: JSON.stringify({
orderID: data.orderID
})
})
})
}
}).render('#paypal-button-container')
But when I try to be more specific about the order details it gives me an error:
Error: "Order Api response error:
{
"name": "INVALID_REQUEST",
"message": "Request is not well-formed, syntactically incorrect, or violates schema.",
"debug_id": "1ed03d18530c1",
"details": [
{
"location": "body",
"issue": "INVALID_SYNTAX",
"description": "Cannot deserialize instance of `com.paypal.api.platform.checkout.orders.v2.model.AmountBreakdown` out of START_ARRAY token line: 1, column: 82"
}
],
"links": [
{
"href": "https://developer.paypal.com/docs/api/orders/v2/#error-INVALID_SYNTAX", "rel": "information_link", "encType": "application/json"
}
]
}"
}
This is my code:
paypal.Buttons({
createOrder: function(data, actions) {
return actions.order.create({
purchase_units: [{
amount: {
currency_code: 'EUR',
value: '120.16',
breakdown: [{
item_total: {
unit_amount: 7,
currency_code: 'EUR',
value: '120.16'
}
}]
},
description: 'Purchase Unit test description',
custom_id: '64735',
items: [{
name: 'Test item 1',
unit_amount: {
currency_code: 'EUR',
value: '60.12'
},
quantity: 2,
description: 'Uaua item 1 description'
}, {
name: 'Test item 2',
unit_amount: {
currency_code: 'EUR',
value: '60.00'
},
quantity: 5,
description: 'Test item 2 description'
}]
}]
})
},
onApprove: function(data, actions) {
return actions.order.capture().then(function(details) {
alert('Transaction completed by ' +
details.payer.name.given_name)
// Call your server to save the transaction
return fetch('/api/paypal-transaction-complete', {
method: 'post',
headers: {
'content-type': 'application/json'
},
body: JSON.stringify({
orderID: data.orderID
})
})
})
}
}).render('#paypal-button-container')
Does anyone know where the problem is? The PayPal documentation is not very informative...
930
Smart Payment Buttons by PayPal are designed to improve the checkout experience and improve checkout conversions. With this integration, you can give customers the option to pay with PayPal, Venmo, and major credit cards and debit cards - on almost any device - when they checkout with PayPal.
After some more digging I have found the correct format:
paypal.Buttons({
createOrder: function(data, actions) {
return actions.order.create({
purchase_units: [
{
reference_id: "PUHF",
description: "Some description",
custom_id: "Something7364",
soft_descriptor: "Great description 1",
amount: {
currency_code: "EUR",
value: "200.00",
breakdown: {
item_total: {
currency_code: "EUR",
value: "200.00"
}
}
},
items: [
{
name: "Item 1",
description: "The best item ever",
sku: "xyz-2654",
unit_amount: {
currency_code: "EUR",
value: "100.00"
},
quantity: "1"
},
{
name: "Item 2",
description: "Not bad too",
sku: "zdc-3942",
unit_amount: {
currency_code: "EUR",
value: "50.00"
},
quantity: "2"
}
],
}
]
});
},
onApprove: function(data, actions) {
return actions.order.capture().then(function(details) {
alert('Transaction completed by ' + details.payer.name.given_name);
// Call your server to save the transaction
return fetch('/api/paypal-transaction-complete', {
method: 'post',
headers: {
'content-type': 'application/json'
},
body: JSON.stringify({
orderID: data.orderID
})
});
});
}
}).render('#paypal-button-container');
This is an example of complete set of options:
paypal.Buttons({
createOrder: function(data, actions) {
return actions.order.create({
purchase_units: [{
reference_id: "PUHF",
description: "Sporting Goods",
custom_id: "CUST-HighFashions",
soft_descriptor: "HighFashions",
amount: {
currency_code: "USD",
value: "230.00",
breakdown: {
item_total: {
currency_code: "USD",
value: "180.00"
},
shipping: {
currency_code: "USD",
value: "30.00"
},
handling: {
currency_code: "USD",
value: "10.00"
},
tax_total: {
currency_code: "USD",
value: "20.00"
},
shipping_discount: {
currency_code: "USD",
value: "10"
}
}
},
items: [{
name: "T-Shirt",
description: "Green XL",
sku: "sku01",
unit_amount: {
currency_code: "USD",
value: "90.00"
},
tax: {
currency_code: "USD",
value: "10.00"
},
quantity: "1",
category: "PHYSICAL_GOODS"
},
{
name: "Shoes",
description: "Running, Size 10.5",
sku: "sku02",
unit_amount: {
currency_code: "USD",
value: "45.00"
},
tax: {
currency_code: "USD",
value: "5.00"
},
quantity: "2",
category: "PHYSICAL_GOODS"
}
],
shipping: {
method: "United States Postal Service",
address: {
name: {
full_name: "John",
surname: "Doe"
},
address_line_1: "123 Townsend St",
address_line_2: "Floor 6",
admin_area_2: "San Francisco",
admin_area_1: "CA",
postal_code: "94107",
country_code: "US"
}
}
}]
})
},
onApprove: function(data, actions) {
return actions.order.capture().then(function(details) {
alert('Transaction completed by ' + details.payer.name.given_name)
// Call your server to save the transaction
return fetch('/api/paypal-transaction-complete', {
method: 'post',
headers: {
'content-type': 'application/json'
},
body: JSON.stringify({
orderID: data.orderID
})
})
})
}
}).render('#paypal-button-container')
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With