dbltoe:
Anyone had a go with the addition of Apple Pay? https://medium.com/square-corner-blo...s-1f85cb6fe433
It appears that the two javascript files used are combined into jscript_square.php file. My attempt at adding the required info resulted in messing up the form.
I changed jscript_square.php to```
<?php/**
- Javascript to prep functionality for Square payment module
- @package square
- @copyright Copyright 2003-2017 Zen Cart Development Team
- @license http://www.zen-cart.com/license/2_0.txt GNU Public License V2.0
- @version $Id: Author: Chris Brown [email protected] New in v1.5.6 $
*/
if (!defined(MODULE_PAYMENT_SQUARE_STATUS) || MODULE_PAYMENT_SQUARE_STATUS != 'True' || (!defined('MODULE_PAYMENT_SQUARE_APPLICATION_ID') || MODULE_PAYMENT_SQUARE_ACCESS_TOKEN == '')) {
return false;
}
?>
<script type="text/javascript" src="https://js.squareup.com/v2/paymentform"></script>
<script type="text/javascript">
var cardNonce;
var paymentForm = new SqPaymentForm({
//
locationId: locationId
//
applicationId: '<?php echo MODULE_PAYMENT_SQUARE_APPLICATION_ID; ?>',
inputClass: 'paymentInput',
inputStyles: [
{
fontSize: '14px',
padding: '7px 12px',
backgroundColor: "white"
}
],
cardNumber: {
elementId: 'square_cc-number',
placeholder: '•••• •••• •••• ••••'
},
cvv: {
elementId: 'square_cc-cvv',
placeholder: 'CVV'
},
expirationDate: {
elementId: 'square_cc-expires',
placeholder: 'MM/YY'
},
postalCode: {
elementId: 'square_cc-postcode',
placeholder: '11111'
},
callbacks: {
cardNonceResponseReceived: function (errors, nonce, cardData) {
if (errors) {
console.error("Encountered errors:");
var error_html = ""
errors.forEach(function (error) {
console.error(' ' + error.message);
error_html += "<li> " + error.message + " </li>";
});
document.getElementById('card-errors').innerHTML = '<ul>' + error_html + '</ul>';
$('#paymentSubmitButton').disabled = false;
} else {
// success
$('#paymentSubmitButton').disabled = true;
$("#card-errors").empty()
document.getElementById('card-nonce').value = nonce;
document.getElementById('card-type').value = cardData.card_brand;
document.getElementById('card-four').value = cardData.last_4;
document.getElementById('card-exp').value = ('0'+cardData.exp_month.toString()).substr(-2) + cardData.exp_year.toString().substr(-2);
document.getElementsByName('checkout_payment')[0].submit();
}
},
unsupportedBrowserDetected: function () {
document.getElementById('card-errors').innerHTML = '<p class="error alert">This browser is not supported for Square Payments. Please contact us to let us know! Meanwhile, please pay using an alternate method; or shop using a different browser such as FireFox or Chrome.</p>';
paymentForm.destroy();
},
inputEventReceived: function (inputEvent) {
switch (inputEvent.eventType) {
case 'focusClassAdded':
methodSelect('pmt-square');
break;
case 'cardBrandChanged':
document.getElementById('sq-card-brand').innerHTML = inputEvent.cardBrand;
break;
}
},
methodsSupported: function (methods) {
if (methods.applePay === true) {
// Show apple pay button
var element = document.getElementById('sq-apple-pay');
element.style.display = 'inline-block';
}
}
paymentFormLoaded: function () {
paymentForm.setPostalCode('<?php echo $order->billing['postcode']; ?>');
}
}
});
createPaymentRequest: function () {
return {
requestShippingAddress: true,
currencyCode: "USD",
countryCode: "US",
total: {
label: "{{ MERCHANT NAME }}",
amount: "100.00",
pending: false,
},
lineItems: [
{
label: "Subtotal",
amount: "80.00",
pending: false,
},
{
label: "Shipping",
amount: "0.00",
pending: true,
},
{
label: "Tax",
amount: "10.00",
pending: false,
}
]
};
};
// ...
$(function () {
$.ajaxSetup({
headers: {"X-CSRFToken": "<?php echo $_SESSION['securityToken']; ?>"}
});
$('form[name="checkout_payment"]').submit(function(e) {
if($('#pmt-square').is(':checked') || this['payment'].value == 'square' || document.getElementById('pmt-square').checked == true) {
e.preventDefault();
paymentForm.requestCardNonce();
}
});
});
</script>
<style>
.paymentInput {display:inline;font-size:1em;margin:0 0.1em 10px 0;height:35px;padding-left:5px;width:50%;}
.paymentInput {background-color: white;border:3px solid #ccc;}
.paymentInput--error {color: red; border-color: red;}
</style>
[COLOR=#3E3E3E]
Has anyone being able to figure out the Apple Pay? I've tried similar approaches as this with no good results. :( :no:
