Everything seems to work before I add the onCancel and onError. Adding those two functions make the paypal buttons disappear and the console shows a cgi invalid token error or something like that. The error is related to onCancel and onError because everything is fine when I remove those two, so I'm assuming the way I'm adding those functions is not right.
Does anyone know the correct way to add onCancel and onError?
<script>
paypal.Buttons({
// Sets up the transaction when a payment button is clicked
createOrder: function(data, actions) {
return actions.order.create({
"purchase_units": [{
"amount": {
"currency_code": "USD",
"value": "3.98",
"breakdown": {
"item_total": { /* Required when including the `items` array */
"currency_code": "USD",
"value": "3.98"
}
}
},
"items": [
{
"name": "Mars Attacks", /* Shows within upper-right dropdown during payment approval */
"description": "App: android, ios", /* Item details will also be in the completed paypal.com transaction view */
"unit_amount": {
"currency_code": "USD",
"value": "2.99"
},
"quantity": "1"
},
{
"name": "Renegade Warrior", /* Shows within upper-right dropdown during payment approval */
"description": "App: android, ios.", /* Item details will also be in the completed paypal.com transaction view */
"unit_amount": {
"currency_code": "USD",
"value": "0.99"
},
"quantity": "1"
},
]
}]
});
},
// Finalize the transaction after payer approval
onApprove: function(data, actions) {
return actions.order.capture().then(function(orderData) {
// Successful capture! For dev/demo purposes:
console.log('Capture result', orderData, JSON.stringify(orderData, null, 2));
var transaction = orderData.purchase_units[0].payments.captures[0];
alert('Transaction '+ transaction.status + ': ' + transaction.id + '\n\nSee console for all available details');
document.getElementById('transrecpt_status').innerHTML = "Status: "+transaction.status;
document.getElementById('transrecpt_id').innerHTML = "Order#: "+transaction.id;
document.getElementById('transrecpt_value').innerHTML = "Amount: "+transaction.amount.value;
document.getElementById('transrecpt_currency').innerHTML = "Currency: "+transaction.amount.currency_code;
document.getElementById('trans').value = JSON.stringify(transaction);
procAct('purchase', '');
// When ready to go live, remove the alert and show a success message within this page. For example:
// var element = document.getElementById('paypal-button-container');
// element.innerHTML = '';
// element.innerHTML = '<h3>Thank you for your payment!</h3>';
// Or go to another URL: actions.redirect('thank_you.html');
});
}
onCancel: function (data) {
alert('Sale Cancelled!');
console.log("On cancel fired!");
},
onError: function (err) {
// For example, redirect to a specific error page
alert('An error occured!');
console.log("On error fired!");
},
}).render('#paypal-button-container');
</script>
