Я работаю над API квадрата. И используя библиотеки js для заполнения их формы. Когда я создаю сборку приложения и запускаю его на Android, он работает нормально и заполняет форму, как и ожидалось.
Но на устройствах IOS он не заполняет поля формы. даже объект создается, когда я предупреждаю его
оповещения (JSON.stringify (paymentform));
Аналогичным образом заполняется на IOS и Android.
Мой код.
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
/*
* 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 */
}
}
});
Я думаю, что это должно сработать как для IOS, так и для Android. Но работает только на Android.
Любая помощь будет высоко ценится.
Спасибо