404 lines
19 KiB
PHP
404 lines
19 KiB
PHP
<?php
|
||
/*
|
||
* Home Page - has Sample Buyer credentials, Camera (Product) Details and Instructiosn for using the code sample
|
||
*/
|
||
// include('apiCallsData.php');
|
||
include('header.php');
|
||
include_once('paypalConfig.php');
|
||
|
||
?>
|
||
<style>
|
||
tr{
|
||
line-height:30px;
|
||
}
|
||
td{
|
||
padding:5px;
|
||
}
|
||
</style>
|
||
<div class="row">
|
||
<div class="col-md-3">
|
||
<div>
|
||
<img src="img/camera.jpg" width="200" height="150"/>
|
||
</div>
|
||
<h3>Digital SLR Camera </h3>
|
||
<br/><br/>
|
||
<table class="table table-striped">
|
||
<tr><td colspan="2"><h4> Sample Sandbox Buyer Credentials:</h4></td></tr>
|
||
<tr><th>Buyer Email</th><th>Password</th></tr>
|
||
<tr><td>emily_doe@buyer.com</td><td>qwer1234</td></tr>
|
||
<tr><td>bill_bong@buyer.com</td><td>qwer1234</td></tr>
|
||
<tr><td>jack_potter@buyer.com</td><td>123456789</td></tr>
|
||
<tr><td>harry_doe@buyer.com</td><td>123456789</td></tr>
|
||
<tr><td>ron_brown@buyer.com</td><td>qwer1234</td></tr>
|
||
<tr><td>bella_brown@buyer.com</td><td>qwer1234</td></tr>
|
||
</table>
|
||
</div>
|
||
|
||
<div class="col-md-4">
|
||
<h3> Pricing Details </h3>
|
||
<form action="startPayment.php" method="POST">
|
||
<input type="text" name="csrf" value="<?php echo($_SESSION['csrf']);?>" hidden readonly/>
|
||
<table>
|
||
<!-- Item Details - Actual values set in apiCallsData.php -->
|
||
<tr><td>Camera </td><td><input class="form-control" type="text" name="camera_amount" value="300" readonly></input></td></tr>
|
||
<tr><td>Tax </td><td><input class="form-control" type="text" id="tax_amt" name="tax" value="5" readonly></input> </td></tr>
|
||
<tr><td>Insurance </td><td><input class="form-control" type="text" name="insurance" id="insurance_fee"value="10" readonly></input> </td></tr>
|
||
<tr><td>Handling Fee </td><td><input class="form-control" type="text" name="handling_fee" id="handling_fee" value="5" readonly></input> </td></tr>
|
||
<tr><td>Estimated Shipping </td><td><input class="form-control" type="text" name="estimated_shipping" value="2" id="shipping_amt" readonly></input> </td></tr>
|
||
<tr><td>Shipping Discount </td><td><input class="form-control" type="text" id="shipping_discount" name="shipping_discount" value="-2" readonly></input> </td></tr>
|
||
<tr><td>Total Amount </td><td><input class="form-control" type="text" name="total_amount" id="total_amt" value="320" readonly></input> </td></tr>
|
||
<tr><td>Currency</td><td>
|
||
<select class="form-control" name="currencyCodeType">
|
||
<option value="AUD">AUD</option>
|
||
<option value="BRL">BRL</option>
|
||
<option value="CAD">CAD</option>
|
||
<option value="CZK">CZK</option>
|
||
<option value="DKK">DKK</option>
|
||
<option value="EUR">EUR</option>
|
||
<option value="HKD">HKD</option>
|
||
<option value="MYR">MYR</option>
|
||
<option value="MXN">MXN</option>
|
||
<option value="NOK">NOK</option>
|
||
<option value="NZD">NZD</option>
|
||
<option value="PHP">PHP</option>
|
||
<option value="PLN">PLN</option>
|
||
<option value="GBP">GBP</option>
|
||
<option value="RUB">RUB</option>
|
||
<option value="SGD">SGD</option>
|
||
<option value="SEK">SEK</option>
|
||
<option value="CHF">CHF</option>
|
||
<option value="THB">THB</option>
|
||
<option value="USD" selected>USD</option>
|
||
</td></tr>
|
||
|
||
</table>
|
||
|
||
<br/>
|
||
<!--Container for Checkout with PayPal button-->
|
||
<div id="myContainer"></div>
|
||
<div id="paypal-end" style="display:none">
|
||
<h2>Your payment is complete</h2>
|
||
<!-- <pre id="paypal-execute-details"></pre> -->
|
||
<div class="hero-unit">
|
||
<!-- Display the Transaction Details-->
|
||
<h4> <span id="paypal-execute-details-first-name""></span>
|
||
<span id="paypal-execute-details-last-name"></span>, Thank you for your Order </h4>
|
||
|
||
<h4> Shipping Details: </h4>
|
||
<span id="paypal-execute-details-recipient-name"></span><br>
|
||
<span id="paypal-execute-details-addressLine1"></span>
|
||
<span id="paypal-execute-details-addressLine2"></span><br>
|
||
<span id="paypal-execute-details-city"></span><br>
|
||
<span id="paypal-execute-details-state"></span> -
|
||
<span id="paypal-execute-details-postal-code"></span></p>
|
||
<p>Transaction ID: <span id="paypal-execute-details-transaction-ID"></span></p>
|
||
<p>Payment Total Amount: <span id="paypal-execute-details-final-amount"></span> </p>
|
||
<p>Currency Code: <span id="paypal-execute-details-currency"></span></p>
|
||
<p>Payment Status: <span id="paypal-execute-details-payment-state"></span></p>
|
||
<p>Payment Type: <span id="paypal-execute-details-transaction-type"></span> </p>
|
||
<h3> Click <a href='index.php'>here </a> to return to Home Page</h3>
|
||
</div>
|
||
</div>
|
||
|
||
<div id="confirm" style="display: none;">
|
||
<div>Ship to:</div>
|
||
<div><span id="recipient"></span>, <span id="line1"></span>, <span id="city"></span></div>
|
||
<div><span id="state"></span>, <span id="zip"></span>, <span id="country"></span> <span id="shipping_amt_updated" hidden></span></div>
|
||
|
||
<button id="confirmButton">Complete Payment</button>
|
||
</div>
|
||
|
||
<br/>
|
||
<span style="margin-left:60px">OR</span>
|
||
<br/><br/>
|
||
<div>
|
||
<button class="btn btn-primary" formaction="shipping.php" role="button">Proceed to Checkout</button>
|
||
</div>
|
||
</form>
|
||
</div>
|
||
<div class="col-md-5" id="instruction">
|
||
<h4> README: </h4>
|
||
<p>
|
||
1) Click on 'PayPal Checkout’ button and see the experience.
|
||
<br>
|
||
2) If you get any Firewall warning, add rule to the Firewall to allow incoming connections for your application.
|
||
<br>
|
||
3) Checkout with PayPal using a buyer sandbox account provided on this page. And you're done!
|
||
<br>
|
||
4) The sample code uses default sandbox REST App credentials which are set in index.php PayPal button section. You can get your own REST app credentials by creating a REST app with the steps outlined <i><a href="https://developer.paypal.com/docs/integration/direct/make-your-first-call/#create-a-paypal-app" target="_blank">here</a></i>.
|
||
<br>
|
||
5) Make following changes in paypal_config.php:<br>
|
||
- If using your own Sandbox seller account, update 'client'->'sandbox' parameter in Checkout.js v4 script (in index.php and shipping.php) with your Sandbox REST app Client ID.<br>
|
||
- env parameter oin Checkout.js v4 script: Kept 'sandbox' for working with Sandbox, it will be 'production' for LIVE.<br>
|
||
</p>
|
||
<h4 id="incontext"> In-Context Checkout integration steps with Checkout.js v4: </h4>
|
||
1) Copy the files and folders under 'Checkout' package to the same location where you have your shopping cart page.
|
||
<br>
|
||
2) Include the following Checkout.js v4 script on your shopping cart page:
|
||
<br><br>
|
||
<pre><code><script type="text/javascript">
|
||
paypal.Button.render({
|
||
|
||
env: 'sandbox', // sandbox | production
|
||
|
||
// PayPal Client IDs - replace with your own
|
||
// Create a PayPal app: https://developer.paypal.com/developer/applications/create
|
||
client: {
|
||
sandbox: '<Sandbox client id>',
|
||
production: '<insert production client id>'
|
||
},
|
||
|
||
// Show the buyer a 'Pay Now' button in the checkout flow
|
||
commit: true,
|
||
|
||
// payment() is called when the button is clicked
|
||
payment: function(data, actions) {
|
||
|
||
// Make a call to the REST api to create the payment
|
||
return actions.payment.create({
|
||
meta: {
|
||
partner_attribution_id: '<?php echo(SBN_CODE)?>'
|
||
},
|
||
payment: {
|
||
transactions: [
|
||
{
|
||
amount: { total: '0.01', currency: 'USD' }
|
||
}
|
||
]
|
||
}
|
||
});
|
||
},
|
||
|
||
// onAuthorize() is called when the buyer approves the payment
|
||
onAuthorize: function(data, actions) {
|
||
|
||
// Make a call to the REST api to execute the payment
|
||
return actions.payment.execute().then(function() {
|
||
window.alert('Payment Complete!');
|
||
});
|
||
}
|
||
|
||
}, '#paypal-button-container');
|
||
</script>
|
||
<script src="//www.paypalobjects.com/api/checkout.js" async></script></code></pre><br>
|
||
3) Open your browser and navigate to your Shopping cart page. Click on 'Checkout with PayPal' button and complete the flow.<br>
|
||
4) You can use the sample Buyer Sandbox credentials provided on index.php/home page. <br/>
|
||
5) Read overview of REST API <a href="https://developer.paypal.com/docs/integration/direct/rest-payments-overview/" target=_blank>here</a> and find the API reference <a href="https://developer.paypal.com/docs/api/" target="_blank">here</a>. You can also try the interactive demo <a href="https://developer.paypal.com/demo/checkout/#/pattern/client" target="_blank">here</a>.<br/><br/>
|
||
<br><br>
|
||
|
||
</div>
|
||
</div>
|
||
<!-- <div id="shipping_amt_updated"> add $2 shipping</div>
|
||
-->
|
||
<script src="//www.paypalobjects.com/api/checkout.js"></script>
|
||
<!-- PayPal In-Context Checkout script -->
|
||
<script type="text/javascript">
|
||
|
||
var client = {
|
||
sandbox: '<?php echo(CLIENT_ID)?>'
|
||
};
|
||
var environment = 'sandbox';
|
||
var transaction = {
|
||
transactions: [
|
||
{
|
||
amount: {
|
||
total: '15.00',
|
||
currency: 'USD'
|
||
}
|
||
}
|
||
]
|
||
};
|
||
|
||
function showDom(id) {
|
||
var arr;
|
||
if (!Array.isArray(id)) {
|
||
arr = [id];
|
||
} else {
|
||
arr = id;
|
||
}
|
||
arr.forEach(function (domid) {
|
||
document.getElementById(domid).style.display = 'initial';
|
||
});
|
||
}
|
||
|
||
function hideDom(id) {
|
||
var arr;
|
||
if (!Array.isArray(id)) {
|
||
arr = [id];
|
||
} else {
|
||
arr = id;
|
||
}
|
||
arr.forEach(function (domid) {
|
||
document.getElementById(domid).style.display = 'none';
|
||
});
|
||
}
|
||
|
||
function handleResponse(result) {
|
||
document.getElementById('confirm').style.display ='none';
|
||
// var resultDOM = document.getElementById('paypal-execute-details').textContent;
|
||
// document.getElementById('paypal-execute-details').textContent = JSON.stringify(result, null, 2);
|
||
|
||
var resultDOM = JSON.stringify(result, null, 2);
|
||
console.log(resultDOM);
|
||
|
||
$json_response = result;
|
||
// console.log($json_response['id']);
|
||
var payID = $json_response['id'];
|
||
|
||
var paymentState = $json_response['state'];
|
||
var finalAmount = $json_response['transactions'][0]['amount']['total'];
|
||
var currency = $json_response['transactions'][0]['amount']['currency'];
|
||
var transactionID= $json_response['transactions'][0]['related_resources'][0]['sale']['id'];
|
||
var payerFirstName = $json_response['payer']['payer_info']['first_name'];
|
||
var payerLastName = $json_response['payer']['payer_info']['last_name'];
|
||
var recipientName= $json_response['payer']['payer_info']['shipping_address']['recipient_name'],FILTER_SANITIZE_SPECIAL_CHARS;
|
||
var addressLine1= $json_response['payer']['payer_info']['shipping_address']['line1'];
|
||
var addressLine2 = $json_response['payer']['payer_info']['shipping_address']['line2'];
|
||
var city= $json_response['payer']['payer_info']['shipping_address']['city'];
|
||
var state= $json_response['payer']['payer_info']['shipping_address']['state'];
|
||
var postalCode =$json_response['payer']['payer_info']['shipping_address']['postal_code'];
|
||
var transactionType = $json_response['intent'];
|
||
// var countryCode= filter_var($json_response['payer']['payer_info']['shipping_address']['country_code'],FILTER_SANITIZE_SPECIAL_CHARS);
|
||
|
||
document.getElementById('paypal-execute-details-postal-code').textContent = postalCode;
|
||
document.getElementById('paypal-execute-details-state').textContent = state;
|
||
document.getElementById('paypal-execute-details-recipient-name').textContent = recipientName;
|
||
document.getElementById('paypal-execute-details-transaction-type').textContent = transactionType;
|
||
document.getElementById('paypal-execute-details-transaction-ID').textContent = transactionID;
|
||
document.getElementById('paypal-execute-details-first-name').textContent = payerFirstName;
|
||
// document.getElementById('paypal-execute-details-last-name').textContent = payerLastName;
|
||
document.getElementById('paypal-execute-details-payment-state').textContent = paymentState;
|
||
document.getElementById('paypal-execute-details-final-amount').textContent = finalAmount;
|
||
document.getElementById('paypal-execute-details-currency').textContent = currency;
|
||
document.getElementById('paypal-execute-details-addressLine1').textContent = addressLine1;
|
||
document.getElementById('paypal-execute-details-addressLine2').textContent = addressLine2;
|
||
document.getElementById('paypal-execute-details-city').textContent = city;
|
||
|
||
|
||
|
||
showDom('paypal-end');
|
||
var button = document.getElementById('myContainer');
|
||
// button.link.style.display = 'none';
|
||
var instructionNode = document.getElementById('instruction');
|
||
instructionNode.style.display= 'none';
|
||
}
|
||
|
||
|
||
paypal.Button.render({
|
||
|
||
// Set your environment
|
||
|
||
env: 'sandbox', // sandbox | production
|
||
|
||
client: {
|
||
sandbox: '<?php echo(CLIENT_ID)?>'
|
||
},
|
||
|
||
|
||
// Wait for the PayPal button to be clicked
|
||
|
||
payment: function(actions) {
|
||
|
||
var tax_amt = document.getElementById('tax_amt').value;
|
||
var shipping_discount = document.getElementById('shipping_discount').value;
|
||
var handling_fee = document.getElementById('handling_fee').value;
|
||
var insurance_fee = document.getElementById('insurance_fee').value;
|
||
// var shippingSel = document.getElementById('shipping_method');
|
||
var shipping_amt = document.getElementById('shipping_amt').value;
|
||
|
||
var total_amt = document.getElementById('total_amt').value;
|
||
|
||
return actions.payment.create({
|
||
meta: {
|
||
partner_attribution_id: '<?php echo(SBN_CODE)?>'
|
||
},
|
||
payment: {
|
||
transactions: [
|
||
{
|
||
amount: {
|
||
total: total_amt ,
|
||
currency: 'USD',
|
||
details:
|
||
{
|
||
subtotal: total_amt - shipping_amt,
|
||
shipping: shipping_amt,
|
||
}
|
||
}
|
||
}
|
||
]
|
||
}
|
||
});
|
||
|
||
|
||
},
|
||
|
||
// Wait for the payment to be authorized by the customer
|
||
|
||
onAuthorize: function(data, actions) {
|
||
|
||
return actions.payment.get().then(function(data) {
|
||
|
||
var currentShippingVal = data.transactions[0].amount.details.shipping;
|
||
var shipping = data.payer.payer_info.shipping_address;
|
||
|
||
var currentTotal = data.transactions[0].amount.total;
|
||
|
||
document.querySelector('#recipient').innerText = shipping.recipient_name;
|
||
document.querySelector('#line1').innerText = shipping.line1;
|
||
document.querySelector('#city').innerText = shipping.city;
|
||
document.querySelector('#state').innerText = shipping.state;
|
||
document.querySelector('#zip').innerText = shipping.postal_code;
|
||
document.querySelector('#country').innerText = shipping.country_code;
|
||
|
||
var updatedShipping = parseInt(currentShippingVal) + parseInt(2);
|
||
document.querySelector('#shipping_amt_updated').innerText = updatedShipping;
|
||
|
||
console.log('Updated Shipping : '+ updatedShipping);
|
||
|
||
//total_amt =+ total_amt + shipping_amt_updated;
|
||
|
||
document.querySelector('#myContainer').style.display = 'none';
|
||
document.querySelector('#confirm').style.display = 'block';
|
||
|
||
// Listen for click on confirm button
|
||
|
||
document.querySelector('#confirmButton').addEventListener('click', function() {
|
||
|
||
// Disable the button and show a loading message
|
||
|
||
document.querySelector('#confirm').innerText = 'Loading...';
|
||
document.querySelector('#confirm').disabled = true;
|
||
|
||
// Execute the payment
|
||
|
||
var totalAmount = currentTotal - parseInt(updatedShipping);
|
||
var subtotal = currentTotal - parseInt(updatedShipping);
|
||
|
||
return actions.payment.execute(
|
||
{
|
||
transactions: [
|
||
{
|
||
amount: {
|
||
total: totalAmount,
|
||
currency: 'USD',
|
||
details:
|
||
{
|
||
subtotal: subtotal,
|
||
shipping: updatedShipping,
|
||
}
|
||
}
|
||
}
|
||
]
|
||
}).then(handleResponse);
|
||
|
||
})
|
||
|
||
// return actions.payment.execute().then(handleResponse);
|
||
})
|
||
}
|
||
|
||
}, '#myContainer');
|
||
</script>
|
||
<?php
|
||
include('footer.php');
|
||
?>
|