javascript - 在(Phonegap 应用程序)中构建不填充 IOS 设备上的字段的方形表单构建

Question

我正在开发 square up API。并使用 js 库来填充其表单。当我创建应用程序的构建并在 android 上运行它时，它工作正常并按预期填充表单。

但在 IOS 设备上，它不会填充表单字段。当我提醒它时，甚至该对象也会被创建

alert(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 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 */
        }
    }
});

我认为它应该适用于 IOS 和 Android。但仅适用于 Android。

任何帮助将不胜感激。谢谢

Answer 1

在这里为其他人发布答案:

在你的config.xml文件中，你需要添加

<allow-navigation href="https://*squareup.com/*" /> 

基于 https://medium.com/collaborne-engineering/who-blocks-my-youtube-embed-cordova-phonegap-45a8ec04ff72