Квадратная форма оплаты Карта запроса Nonce не работает в версиях сафари - PullRequest
Новая
       84

Квадратная форма оплаты Карта запроса Nonce не работает в версиях сафари

1 голос
/ 02 марта 2020

Кажется, у меня проблема с функцией requestCardNonce () для некоторых пользователей сафари. В моем приложении net MVC используется API Javascript.

Текущая версия I ' Похоже, что тестирование m работает (13.0.4), но пользователи по-прежнему сообщают о невозможности выполнить свои заказы с помощью предыдущих версий Safari. При заполнении их информации они могут видеть диалоговое окно, содержащее поля для имени карты, номера, CVV, почтового кода и даты истечения срока действия, но не может перейти к следующему диалогу. Кажется, что у функции onGetCardNonce (событие) возникают проблемы с выполнением должным образом. Код, который я сейчас выглядел так: 

        if (gateway == "Square Payment Gateway") {
            paymentForm = new SqPaymentForm({
                applicationId: appId,
                inputClass: 'sq-input',
                autoBuild: false,
                cardNumber: {
                    elementId: 'sq-card-number',
                    placeholder: 'Card Number'
                },
                cvv: {
                    elementId: 'sq-cvv',
                    placeholder: 'CVV'
                },
                expirationDate: {
                    elementId: 'sq-expiration-date',
                    placeholder: 'MM/YY'
                },
                postalCode: {
                    elementId: 'sq-postal-code',
                    placeholder: 'Postal'
                },

                // SqPaymentForm callback functions
                callbacks: {
                    cardNonceResponseReceived: function (errors, nonce, cardData) {
                        let errMsg = "";
                        if (errors) {
                            // Log errors from nonce generation to the browser developer console.
                            console.error('Encountered errors:');
                            errors.forEach(function (error) {
                                console.error('  ' + error.message);
                                errMsg += '   ' + error.message;
                            });
                            alert('Encountered errors' + errMsg);
                            return;
                        }
                        $("#CardNumber").val(cardData["last_4"]);
                        $("#squareToken").val(nonce)

                        $("#form-container").dialog("close");
                        var isValid = true;

                        $('#CardName,#CardNumber').each(function () {
                            if ($.trim($(this).val()) == '') {
                                isValid = false;
                                $(this).css({
                                    "border": "",
                                    "background": ""
                                });
                            }
                            else {
                                $(this).css({
                                    "border": "",
                                    "background": ""
                                });
                            }
                        });

                        if ($("#Total").val() == "0.00" || $("#Total").val() == "0")
                            isValid = true;

                        if (isValid == false) {
                            $('#PayCreditCard')[0].disabled = false;
                        }
                        else {
                            var targetUrl = $(this).attr("href");

                            // Open Terms & Conditions
                            $("#dvTermsConditions").dialog("open");
                            $("#dvTermsConditions").dialog({
                                autoOpen: false,
                                modal: true,
                                buttons: {
                                    "Proceed": function () {

                                        if ($('#AgreeToTerms').is(':checked')) {
                                            $(':input[type="submit"]').prop('disabled', true);
                                            $(this).dialog("close");
                                            $("#frmCheckOut").submit();

                                        }
                                        else {
                                            alert("You must agree to the terms & conditions.");
                                        }
                                    },
                                    "Cancel": function () {
                                        $('#PayCreditCard')[0].disabled = false;
                                        $(this).dialog("close");
                                    }
                                }
                            });
                        }
                    }
                }
            });
            paymentForm.build();

            function onGetCardNonce(event) {
                // Don't submit the form until SqPaymentForm returns with a nonce
                event.preventDefault();
                // Request a nonce from the SqPaymentForm object
                paymentForm.requestCardNonce();
            }

            function closeCC() {
                $("#form-container").dialog("close");
            }
        }

Изначально проблема заключалась в том, что форма оплаты не была найдена, поэтому я переместил определение этого слова за пределы оператора if, и это, похоже, прояснило проблему для safari 13.0. 4+

Есть ли у кого-нибудь предложения о том, как заставить квадратную форму оплаты (v2) работать на всех (или, по крайней мере, в последние 3+ года) версий Safari (не на мобильных устройствах)?

...