How to pass variable from js to php in PayPal checkout Integration?
Question
I'm creating a shopping site with HTML and PHP. It's my first time doing web development.
I'm trying to add PayPal Checkout to my site. I got the code from paypal developer and it works payments are successful. If the payment is successful I need to insert order data into my database with php.
How do I pass a javascript variable defined by me indicating the payment approval to PHP?
I've seen it done with ajax but I dont know how to implement it.
Here is my code. I added the jquery CDN since it seems to be necessary but I don't know if need anything else.
<!DOCTYPE html> <head> <!-- Add meta tags for mobile and IE --> <meta name="viewport" content="width=device-width, initial-scale=1"> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script> </head> <body> <!-- Set up a container element for the button --> <div id="paypal-button-container"></div> <!-- Include the PayPal JavaScript SDK --> <script src="https://www.paypal.com/sdk/js?client-id=sb¤cy=USD"></script> <script> // Render the PayPal button into #paypal-button-container paypal.Buttons({ style: { layout: 'horizontal', color: 'blue', shape: 'rect' }, // Set up the transaction createOrder: function(data, actions) { return actions.order.create({ purchase_units: [{ amount: { value: '17' } }] }); }, // Finalize the transaction onApprove: function(data, actions) { return actions.order.capture().then(function(details) { // Show a success message to the buyer alert('Transaction completed by ' + details.payer.name.given_name + '!'); //Variable to confirm successful payment on php //? //? }); } }).render('#paypal-button-container'); </script> </body>
1 answers
solution1
0 ACCPTED 2019-09-07 00:28:42
PHP can only be seen on the server. So you should send a value to the server with fetch (recommended) or XMLHTTPRequest .
Create a PHP file in which you can receive a $_GET or $_POST variable and process the rest of the payment. In this example I call the file ajax_file.php , but you can name it whatever you want.
Add the fetch to your onApprove method. We'll be sending with the POST method so that it is a bit easier to send data through the body property. GET can do it too but works a little bit different.
// Finalize the transaction
onApprove: function(data, actions) {
return actions.order.capture().then(function(details) {
// Show a success message to the buyer
alert('Transaction completed by ' + details.payer.name.given_name + '!');
// URL which to send the value to.
const url = 'http://yoursite.com/ajax_file.php';
// Message to send. In this example an object with a state property.
// You can change the properties to whatever you want.
const message = { status: 'success' };
// Send it to the URL with the POST method
// and send the message in JSON format.
fetch(url, {
method: 'POST',
body: JSON.stringify(message)
}).catch(function(error) {
console.log(error); // Display error if there is one.
});
});
}
And in your PHP file, for example ajax_file.php .
There you check the value. See if it's sent and if it's the right value and continue the flow from there.
// Check if status send.
$status = isset( $_POST[ 'status'] ) ? $_POST[ 'status' ] : false;
// Check the value of status
if ( $status === 'succes' ) {
// Status is a success.
// Continue your form flow.
}
It's not clear in your question what should happen next, but I hope you can figure that out from here.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.