Paypal Smart buttons with Javascript and fetch to a PHP page

Question

I am having an intermittent problem with some Javascript code whch I cannot seem to solve and would appreciate any help with.

I have a campsite booking page which utilizes Paypal smart buttons to effect payment. In part of the Paypal Javascript 'create order' code I extract the entered customer details, populate a form using Javascript and then use fetch to post the info to a server side PHP page which inserts the info into a database.

The problem is this seems to fail 40-50% of the time ie Paypal payment is made sucessfully but the database insert appears to not be triggered.

The Javascript code is below. Any help is appreciated.

Thanks

Neville

 <script> var fname=""; var sname=""; var email=""; var mobile=""; var invoice_id=""; paypal.Buttons({ createOrder: function(data, actions) { // This function sets up the details of the transaction, including the amount and line item details. //1. validate form details, abort if incorrrect if (validateForm()==false) { alert("Incorrect Booking form data provided, aborting payment function.\r\n\r\nPlease recheck Booking form data and resubmit."); //actions.disable(); return false; } //2. extract customer info from webpage try { email = document.forms["bookingform"]["email"].value; invoice_id=document.forms["bookingform"]["invoice_id"].value; fname= document.forms["bookingform"]["fname"].value; sname = document.forms["bookingform"]["sname"].value; mobile = document.forms["bookingform"]["mobile"].value; if (invoice_id=="") { invoice_id= sname.toUpperCase(); invoice_id=invoice_id+" "; invoice_id=invoice_id.substring(0,3)+"-"; invoice_id=invoice_id+(100000 + Math.floor(Math.random() * 900000)); invoice_id=invoice_id.substring(0,10); document.forms["bookingform"]["invoice_id"].value=invoice_id; } var tot_night = document.getElementById('tot_nights').innerHTML; var tot_amt=document.getElementById("tot_amt").innerHTML; tot_amt = tot_amt.replace("$", ""); var date_from = document.forms["bookingform"]["date_from"].value; var date_to = document.forms["bookingform"]["date_to"].value; var vehicle_rego = document.forms["bookingform"]["vehicle_rego"].value; var no_adults = document.forms["bookingform"]["no_adults"].value; var no_children = document.forms["bookingform"]["no_children"].value; var power = document.forms["bookingform"]["power"].checked; var tent_hire = document.forms["bookingform"]["tent_hire"].checked; if (power=='true' || power==true) { power ="Yes"; } else { power="No"; } if (tent_hire=='true' || tent_hire==true) { tent_hire ="Yes"; } else { tent_hire="No"; } var street_address = document.forms["bookingform"]["street_address"].value; var locality = document.forms["bookingform"]["locality"].value; var package_type = document.forms["bookingform"]["package_type"].value var voucher = document.forms["bookingform"]["voucher"].value var notes = document.forms["bookingform"]["notes"].value //$('#ref_fld').val(details.id); $('#ref_fld').val('0'); } catch(err) {} //3. create form, insert data var formdata = new FormData(); if (formdata) { try { formdata.append("post_function","make_booking"); formdata.append("notes", notes); formdata.append("invoice_id", invoice_id); formdata.append("voucher", voucher); formdata.append("package_type", package_type); street_address=street_address.replace('"', ''); street_address=street_address.replace("'", ""); notes=notes.replace('"', ''); notes=notes.replace("'", ""); formdata.append("locality", locality); formdata.append("street_address", street_address); formdata.append("vehicle_rego",vehicle_rego); formdata.append("trans_id",'0'); formdata.append("tot_amt",tot_amt); formdata.append("tot_night",tot_night); formdata.append("tent_hire",tent_hire); formdata.append("power",power); formdata.append("no_children",no_children); formdata.append("no_adults",no_adults); formdata.append("date_to",date_to); formdata.append("date_from",date_from); formdata.append("mobile",mobile); formdata.append("email",email); formdata.append("sname",sname); formdata.append("fname",fname); } catch(err) {} //4. post form const url = '/includes_macas/mysql_functions.php'; fetch(url, { method: 'POST', body: formdata }).catch(function(error) { console.log(error); // Display error if there is one. }) } return actions.order.create({ payer: { name: { given_name: fname, surname: sname }, email_address: email, phone: { phone_type: "MOBILE", phone_number: { national_number: mobile } } }, purchase_units: [{ invoice_id: invoice_id, amount: { value: tot_amt } }], application_context: { shipping_preference: "NO_SHIPPING" } }); }, onClick: function() { //$('#wait').show(); }, onApprove: function(data, actions) {.......

Answer 1

Do not use actions.order.create() /.capture() on the client side and then record to a database, since there is no guarantee of being able to record a successful capture on your server if you do that.

Instead, for a proper server integration, create two routes -- one for 'Create Order' and one for 'Capture Order', as documented here. Your routes should return/output JSON (and only JSON). The capture route should check for success after calling PayPal and do any database writing before returning JSON to the client.

Pair your two routes with the following approval flow: https://developer.paypal.com/demo/checkout/#/pattern/server