Using Paypal REST api in .net - asp.net-core

Question

I am trying to implement PayPal REST API with my .net application. For this I am using the sandbox accounts. By referring the demos/documents below code is written which will first create the order and then will make the payment for the same order.
However, my issue is I am not able to grab the order ID. Though I am getting in res.json() from below code. I need to get the order ID, set it to some variable and use it in the subsequent requests. This below code I have got from the demo link and made some changes as per my requirement.
Also in the OnApprove block I am not getting the data.id.
<div id="paypal-button-container"> </div>
<script>
// Render the PayPal button into #paypal-button-container
paypal.Buttons({
// Set up the transaction
createOrder: function (data, actions) {
return fetch('https://api.sandbox.paypal.com/v2/checkout/orders', {
method: 'post',
headers: {
'content-type': 'application/json',
'Authorization': 'Bearer <My Access Token>'
},
body: JSON.stringify({
"intent": "CAPTURE",
"purchase_units": [
{
"amount": {
"currency_code": "USD",
"value": "100.00"
}
}
]
})
}).then(function (res) {
return res.json();
}).then(function (data) {
return data.id;
});
},
// Finalize the transaction
onApprove: function (data, actions) {
return fetch('https://api.sandbox.paypal.com/v2/checkout/orders/' + data.id + '/capture/', {
method: 'post',
headers: {
'content-type': 'application/json',
'Authorization': 'Bearer <My Access Token>'
},
}).then(function (res) {
return res.json();
}).then(function (details) {
console.log(details);
// Show a success message to the buyer
alert('Transaction completed');
});
}
}).render('#paypal-button-container');
</script>
Also, Can I execute my own APIs from the PayPal buttons ?
Any help on this appreciated !

Answer 1

Your code seems perfect(almost). You just need to keep in mind the scope of the variables here. As the 'data' variable is restricted to the 'then' block, you will need to create a new variable to hold the value of 'data.id' and use it in the onApprove block.
I've added a new variable called 'orderID' in the code below and this seems to be working.
<script>
var orderID; //Declared a variable
// Render the PayPal button into #paypal-button-container
paypal.Buttons({
// Set up the transaction
createOrder: function (data, actions) {
return fetch('https://api.sandbox.paypal.com/v2/checkout/orders', {
method: 'post',
headers: {
'content-type': 'application/json',
'Authorization': 'Bearer <My Access Token>'
},
body: JSON.stringify({
"intent": "CAPTURE",
"purchase_units": [
{
"amount": {
"currency_code": "USD",
"value": "100.00"
}
}
]
})
}).then(function (res) {
return res.json();
}).then(function (data) {
orderID = data.id; //storing the id in our variable
return data.id;
});
},
// Finalize the transaction
onApprove: function (data, actions) {
//using the id stored in our variable
return fetch('https://api.sandbox.paypal.com/v2/checkout/orders/' + orderID + '/capture/', {
method: 'post',
headers: {
'content-type': 'application/json',
'Authorization': 'Bearer <My Access Token>'
},
}).then(function (res) {
return res.json();
}).then(function (details) {
console.log(details);
// Show a success message to the buyer
alert('Transaction completed');
});
}
}).render('#paypal-button-container');
</script>
The implementation you are doing is ideally used for cases when there is a server side component involved, and the API call to the PayPal servers is done via the server.
If you implementation does not require a server side then I will highly recommend to follow the Smart Payment Buttons implementation - https://developer.paypal.com/docs/checkout/integrate/#