223 lines
6.8 KiB
PHP
223 lines
6.8 KiB
PHP
<?php
|
|
// Include the configuration file
|
|
ini_set('display_errors', 1);
|
|
ini_set('display_startup_errors', 1);
|
|
error_reporting(E_ALL);
|
|
|
|
require_once 'config.php';
|
|
|
|
include_once 'dbConnect.php';
|
|
$product_data2 = array(
|
|
'item_number' =>"test",
|
|
'item_name' => "test",
|
|
'price' => "test",
|
|
'currency' => "cad",
|
|
);
|
|
$product_data = array(
|
|
"intent" => "CAPTURE", array( "purchase_units" => array(
|
|
array(
|
|
"reference_id" => "ms1testreference_id",
|
|
"custom_id" => $product_data2['item_number'],
|
|
"description" => $product_data2['item_name'],
|
|
"amount" => array(
|
|
"currency_code" => $product_data2['currency'],
|
|
"value" => $product_data2['price']
|
|
),
|
|
"shipping" => array(
|
|
"name" => array(
|
|
"full_name" => "stephan leith test"),
|
|
"address" => array(
|
|
"address_line_1" => "123 Townsend St",
|
|
"address_line_2" => "Floor 6",
|
|
"admin_area_2" => "San Francisco",
|
|
"admin_area_1" => "CA",
|
|
"postal_code" => "94107",
|
|
"country_code" => "US"
|
|
|
|
|
|
)
|
|
)
|
|
|
|
)
|
|
)
|
|
));
|
|
print "<pre>";
|
|
print_r($product_data);
|
|
print "</pre>";
|
|
|
|
?>
|
|
|
|
<!DOCTYPE html>
|
|
<html lang="en-US">
|
|
<head>
|
|
<title>Integrate PayPal Advanced Checkout with PHP by CodexWorld</title>
|
|
<meta charset="utf-8">
|
|
|
|
<!-- Stylesheet file -->
|
|
<link rel="stylesheet" href="css/style.css">
|
|
|
|
<!-- Card field's styles, to be replaced with your own stylesheet -->
|
|
<link
|
|
rel="stylesheet"
|
|
type="text/css"
|
|
href="https://www.paypalobjects.com/webstatic/en_US/developer/docs/css/cardfields.css"
|
|
/>
|
|
<!-- PayPal JavaScript SDK -->
|
|
<script src="https://www.paypal.com/sdk/js?components=card-fields&client-id=<?php echo PAYPAL_SANDBOX?PAYPAL_SANDBOX_CLIENT_ID:PAYPAL_PROD_CLIENT_ID; ?>"></script>
|
|
</head>
|
|
<body>
|
|
<div class="container">
|
|
<h1>PayPal Advanced Checkout Integration</h1>
|
|
<div class="panel">
|
|
<div class="overlay hidden"><div class="overlay-content"><img src="css/loading.gif" alt="Processing..."/></div></div>
|
|
|
|
<div class="panel-heading">
|
|
<h3 class="panel-title">Charge <?php echo '$'.$itemPrice; ?> with PayPal</h3>
|
|
|
|
<!-- Product Info -->
|
|
<p><b>Item Name:</b> <?php echo $itemName; ?></p>
|
|
<p><b>Price:</b> <?php echo '$'.$itemPrice.' '.$currency; ?></p>
|
|
</div>
|
|
<div class="panel-body">
|
|
<!-- Display status message -->
|
|
<div id="paymentResponse" class="hidden"></div>
|
|
|
|
<!-- Set up a container element for the button -->
|
|
<div id="checkout-form">
|
|
<div id="card-name-field-container"></div>
|
|
<div id="card-number-field-container"></div>
|
|
<div id="card-expiry-field-container"></div>
|
|
<div id="card-cvv-field-container"></div>
|
|
<button id="card-field-submit-button" type="button">
|
|
Pay Now
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<script>
|
|
// Create the Card Fields Component and define callbacks
|
|
const cardField = paypal.CardFields({
|
|
createOrder: function (data) {
|
|
setProcessing(true);
|
|
console.log("createOrder 1");
|
|
var postData = {request_type: 'create_order', payment_source: data.paymentSource};
|
|
return fetch("paypal_checkout_init.php", {
|
|
method: "POST",
|
|
headers: {'Accept': 'application/json'},
|
|
body: encodeFormData(postData)
|
|
})
|
|
.then((res) => {
|
|
console.log("createOrder 2");
|
|
return res.json();
|
|
})
|
|
.then((result) => {
|
|
setProcessing(false);
|
|
console.log("createOrder 3");
|
|
if(result.status == 1){
|
|
console.log("createOrder 4");
|
|
return result.data.id;
|
|
}else{
|
|
console.log("createOrder 5");
|
|
resultMessage(result.msg);
|
|
return false;
|
|
}
|
|
});
|
|
},
|
|
onApprove: function (data) {
|
|
setProcessing(true);
|
|
console.log("onApprove 1");
|
|
const { orderID } = data;
|
|
var postData = {request_type: 'capture_order', order_id: orderID};
|
|
return fetch('paypal_checkout_init.php', {
|
|
method: "POST",
|
|
headers: {'Accept': 'application/json'},
|
|
body: encodeFormData(postData)
|
|
})
|
|
.then((res) => {
|
|
console.log("onApprove 2");
|
|
return res.json();
|
|
})
|
|
.then((result) => {
|
|
// Redirect to success page
|
|
if(result.status == 1){
|
|
console.log("onApprove 3");
|
|
window.location.href = "payment-status.php?checkout_ref_id="+result.ref_id;
|
|
}else{
|
|
console.log("onApprove 4");
|
|
resultMessage(result.msg);
|
|
}
|
|
setProcessing(false);
|
|
});
|
|
},
|
|
onError: function (error) {
|
|
// Do something with the error from the SDK
|
|
},
|
|
});
|
|
|
|
// Render each field after checking for eligibility
|
|
if (cardField.isEligible()) {
|
|
const nameField = cardField.NameField();
|
|
nameField.render("#card-name-field-container");
|
|
|
|
const numberField = cardField.NumberField();
|
|
numberField.render("#card-number-field-container");
|
|
|
|
const cvvField = cardField.CVVField();
|
|
cvvField.render("#card-cvv-field-container");
|
|
|
|
const expiryField = cardField.ExpiryField();
|
|
expiryField.render("#card-expiry-field-container");
|
|
|
|
// Add click listener to submit button and call the submit function on the CardField component
|
|
document
|
|
.getElementById("card-field-submit-button")
|
|
.addEventListener("click", () => {
|
|
cardField.submit().then(() => {
|
|
alert(JSON.stringify(cardField));
|
|
})
|
|
.catch((error) => {
|
|
console.log("erreur avant start");
|
|
resultMessage(`Sorry, your transaction could not be processed... >>> ${error}`);
|
|
});
|
|
});
|
|
} else {
|
|
// Hides card fields if the merchant isn't eligible
|
|
document.querySelector("#checkout-form").style = "display: none";
|
|
}
|
|
|
|
const encodeFormData = (data) => {
|
|
var form_data = new FormData();
|
|
|
|
for ( var key in data ) {
|
|
form_data.append(key, data[key]);
|
|
}
|
|
return form_data;
|
|
}
|
|
|
|
// Show a loader on payment form processing
|
|
const setProcessing = (isProcessing) => {
|
|
if (isProcessing) {
|
|
document.querySelector(".overlay").classList.remove("hidden");
|
|
} else {
|
|
document.querySelector(".overlay").classList.add("hidden");
|
|
}
|
|
|
|
}
|
|
|
|
// Display status message
|
|
const resultMessage = (msg_txt) => {
|
|
const messageContainer = document.querySelector("#paymentResponse");
|
|
|
|
messageContainer.classList.remove("hidden");
|
|
messageContainer.textContent = msg_txt;
|
|
|
|
setTimeout(function () {
|
|
messageContainer.classList.add("hidden");
|
|
messageContainer.textContent = "";
|
|
}, 5000);
|
|
}
|
|
</script>
|
|
</body>
|
|
</html>
|