平方付款不会在Android上正确格式化iframe

Question

我有一个特殊的问题。我已经构建了一个html5应用程序，并且我使用Square作为支付处理器，并且我已将paymentForm包含在我的网页中。 PaymentForm似乎没有在Android上正确格式化任何元素。例如，如果我在Android上键入cardNumber输入字段，则文本不会分为4个数字＆＃34; **** **** **** ****＆＃34;当输入到expirationDate时，它不会在月份和年份之间创建斜杠＆＃34; mm / yy＆＃34;。奇怪的是它适用于我的电脑上的Chrome，它适用于我的iOS设备和我的iOS设备和我的Mac上的Safari。但是，在Android设备上使用我的Android应用或Chrome时，它无法正常工作。

我创建SqPaymentForm的JavaScript

// Initializes payment form.
var paymentForm = new SqPaymentForm({
    applicationId: applicationId,
    inputClass: 'sq-input',
    inputStyles: [
        {
            fontSize: '16px'
        }
    ],
    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: '*****'
    },
    callbacks: {
        // Called when SqPaymentForm completes a request to generate a card
        // nonce, even if the request failed because of an error.
        cardNonceResponseReceived: function(errors, nonce, cardData){
            if(errors){
                $.mobile.loading("hide");
                var eString = '';
                errors.forEach(function(error){
                    eString += "<p>" + error.message + "</p>";
                });
                $("#paymentErr").html(eString);
                $("#pay").prop("disabled", false);
                $("#back").prop("disabled", false);
                return;
            }
            /*
                Call cloud code to process payment with nonce
            */
            charge(nonce, cardData["billing_postal_code"]);
        },
        unsupportedBrowserDetected: function(){
            $("#paymentErr").text("This browser is currently not supported by Square, our payment processor");
        },
        inputEventReceived: function(inputEvent){
            switch(inputEvent.eventType){
                case 'focusClassAdded':
                    break;
                case 'focusClassRemoved':
                    break;
                case 'errorClassAdded':
                    break;
                case 'errorClassRemoved':
                    break;
                case 'postalCodeChanged':
                    break;
            }
        },
        paymentFormLoaded: function(){
            // Perform actions after payment done loading
        }
    }
});
paymentForm.build();

HTML表单

<form id="payment-form">
    <p class="err" id="paymentErr"></p>
    <div class="saved" id="saved"></div>
    <label>Card Number</label>
    <div id="sq-card-number"></div>
    <label>CVV</label>
    <div id="sq-cvv"></div>
    <label>Expiration Date</label>
    <div id=sq-expiration-date></div>
    <label>Postal Code</label>
    <div id="sq-postal-code"></div>
</form>

screenshot1

screenshot2