Every time I run this code and click the Paypal button, I encounter the following error:
Error: "TypeError: Cannot read property 'map'
Do you have any clue why this is happening? I am pretty sure that I formatted it correctly. (I replaced MY_CLIENT_ID with my actual client ID).
I am assuming that no server-side code is required to support this.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="https://www.paypal.com/sdk/js?currency=GBP&client-id=MY_CLIENT_ID"></script>
</head>
<body>
<div id="paypal-button-container"></div>
<!-- Add the checkout buttons, set up the order and approve the order -->
<script>
paypal.Buttons({
createOrder: function(data, actions) {
return actions.order.create([{
"purchase_units":{
"reference_id":"HOP_6rN2fD3oyM",
"description":"Hop Music Lesson Purchase",
"custom_id":"HOP_6rN2fD3oyM",
"soft_descriptor":"HOP_6rN2fD3oyM",
"amount":{
"currency_code":"GBP",
"value":"36",
"breakdown":{
"item_total":{"currency_code":"GBP",
"value":"36"}}
},
"items":[{
"name":"Single Lesson, In-Person: 45 mins",
"description":"Single Lesson, In-Person: 45 mins",
"sku":"45MIN_SINGLE_INPERSON",
"unit_amount":{
"currency_code":"GBP",
"value":"36"},
"quantity":"1",
"category":"DIGITAL_GOODS"
}]
}}]);
},
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
</script>
</body>
</html>