I am working on the square up API. And using the js libraries to populate their form. When I create the build of my application and run it on android it's working fine and populating the form as expected.
But on IOS devices it's not populating the form fields. even the object is created when I alert it
alert(JSON.stringify(paymentform));
Populating in the same way on IOS and Android.
My code is.
HTML
<script type="text/javascript" src="https://js.squareup.com/v2/paymentform"></script>
<script type="text/javascript" src="sqpaymentform.js"></script>
<div id="pay_now_cc_dialog" style="display: none;">
<b>Recipient</b>: Please fill out your credit card information below:<br><br>
<form id="nonce-form" novalidate method="post">
<div class="form-group">
<input type="text" style="height: 38px !important;" name="cc_number"
id="sq-card-number"/>
<small>Credit Card Number</small>
</div>
<div class="form-group">
<input type="text" style="height: 38px !important;" name="cc_expiration"
id="sq-expiration-date"/>
<small>Expiration Date</small>
</div>
<div class="form-group">
<input type="text" style="height: 38px !important;" name="cc_cvv" id="sq-cvv"/>
<small>CVV Code</small>
</div>
<div class="form-group">
<input type="text" style="height: 38px !important;" name="cc_zip"
id="sq-postal-code"/>
<small>ZIP Code</small>
</div>
<button id="sq-creditcard" class="button-credit-card" onclick="requestCardNonce(event)">
Charge Card
</button>
<!--
After a nonce is generated it will be assigned to this hidden input field.
-->
<input type="hidden" id="card-nonce" name="nonce">
</form>
</div>
JS Code
/*
* function: requestCardNonce
*
* requestCardNonce is triggered when the "Pay with credit card" button is
* clicked
*
* Modifying this function is not required, but can be customized if you
* wish to take additional action when the form button is clicked.
*/
function requestCardNonce(event) {
// Don't submit the form until SqPaymentForm returns with a nonce
event.preventDefault();
// Request a nonce from the SqPaymentForm object
paymentForm.requestCardNonce();
}
// Create and initialize a payment form object
var paymentForm = new SqPaymentForm({
// Initialize the payment form elements
applicationId: applicationId,
locationId: locationId,
inputClass: 'sq-input',
// Customize the CSS for SqPaymentForm iframe elements
inputStyles: [{
fontSize: '.9em'
}],
// Initialize the credit card placeholders
cardNumber: {
elementId: 'sq-card-number',
placeholder: '•••• •••• •••• ••••'
},
cvv: {
elementId: 'sq-cvv',
placeholder: 'CVV'
},
expirationDate: {
elementId: 'sq-expiration-date',
placeholder: 'MM/YY'
},
postalCode: {
elementId: 'sq-postal-code',
placeholder: '-----'
},
// SqPaymentForm callback functions
callbacks: {
/*
* callback function: methodsSupported
* Triggered when: the page is loaded.
*/
methodsSupported: function (methods) {
var applePayBtn = document.getElementById('sq-apple-pay');
var applePayLabel = document.getElementById('sq-apple-pay-label');
var masterpassBtn = document.getElementById('sq-masterpass');
var masterpassLabel = document.getElementById('sq-masterpass-label');
// Only show the button if Apple Pay for Web is enabled
// Otherwise, display the wallet not enabled message.
if (methods.applePay === true) {
applePayBtn.style.display = 'inline-block';
applePayLabel.style.display = 'none';
}
// Only show the button if Masterpass is enabled
// Otherwise, display the wallet not enabled message.
if (methods.masterpass === true) {
masterpassBtn.style.display = 'inline-block';
masterpassLabel.style.display = 'none';
}
},
/*
* callback function: createPaymentRequest
* Triggered when: a digital wallet payment button is clicked.
*/
createPaymentRequest: function () {
var paymentRequestJson;
/* ADD CODE TO SET/CREATE paymentRequestJson */
return paymentRequestJson;
},
/*
* callback function: cardNonceResponseReceived
* Triggered when: SqPaymentForm completes a card nonce request
*/
cardNonceResponseReceived: function (errors, nonce, cardData) {
if (errors) {
// Log errors from nonce generation to the Javascript console
console.log("Encountered errors:");
var message_string = "";
errors.forEach(function (error) {
message_string = message_string + error.message + ".<br>";
});
swal({
type: "error",
title: "Error Charging Card",
html: true,
text: message_string,
confirmButtonClass: "btn-danger",
});
return;
}
// Assign the nonce value to the hidden form field
console.log(nonce);
document.getElementById('card-nonce').value = nonce;
//alert(nonce);
// POST the nonce form to the payment processing page
// document.getElementById('nonce-form').submit();
test_cc();
},
/*
* callback function: unsupportedBrowserDetected
* Triggered when: the page loads and an unsupported browser is detected
*/
unsupportedBrowserDetected: function () {
/* PROVIDE FEEDBACK TO SITE VISITORS */
},
/*
* callback function: inputEventReceived
* Triggered when: visitors interact with SqPaymentForm iframe elements.
*/
inputEventReceived: function (inputEvent) {
switch (inputEvent.eventType) {
case 'focusClassAdded':
/* HANDLE AS DESIRED */
break;
case 'focusClassRemoved':
/* HANDLE AS DESIRED */
break;
case 'errorClassAdded':
/* HANDLE AS DESIRED */
break;
case 'errorClassRemoved':
/* HANDLE AS DESIRED */
break;
case 'cardBrandChanged':
/* HANDLE AS DESIRED */
break;
case 'postalCodeChanged':
/* HANDLE AS DESIRED */
break;
}
},
/*
* callback function: paymentFormLoaded
* Triggered when: SqPaymentForm is fully loaded
*/
paymentFormLoaded: function () {
console.log("Square loaded");
/* HANDLE AS DESIRED */
}
}
});
I think it should work out for both IOS and Android. But only working on Android.
Any help would be much appreciated. Thanks
Posting answer over here for everyone else:
In your config.xml file, you need to add
<allow-navigation href="https://*squareup.com/*" />
Based from https://medium.com/collaborne-engineering/who-blocks-my-youtube-embed-cordova-phonegap-45a8ec04ff72