Javascript функция в паре 3 листа - нужна помощь - PullRequest
Новая
       37

Javascript функция в паре 3 листа - нужна помощь

2 голосов
/ 11 января 2020

У меня есть функция Javascript на листовой странице с использованием Vapor 3, функция должна инициировать публикацию в API, чтобы сохранить данные карты клиента и вернуть токен, представляющий эту карту. Обычно я делаю это в кратчайшие сроки на нашем паровом сервере, но для того, чтобы быть совместимым с PCI, нам не разрешено переносить данные кредитной карты клиентов на наш сервер, они должны go напрямую к Sum Up (провайдеру платежей). У меня нет опыта работы с * 1020. * и после долгих поисков, это функция, которую я придумал. 

    <script>
            function savecard() {

                var name = document.getElementById("nameonCard").value
                var cardNo = document.getElementById("cardNumber").value
                var expiry_year = document.getElementById("expiryMonth").value
                var expiry_month = document.getElementById("expiryYear").value
                var cvv = document.getElementById("cvc").value
                var body = `{"type":"card","card":{"name":"${name}","number":"${cardNo}", "expiry_month": "${expiry_month}", "expiry_year": "${expiry_year}","cvv": "${cvv}"}}`
                return fetch("https://api.sumup.com/v0.1/customers/" + #(sumCustId) + "/payment-instruments", {
                  method: "POST"
                  headers: {
                    "Authorization": "Basic " + #(auth),
                    "Content-Type": "application/json"
                  },
                  data: body,
                })
                .then(function(response){
                      document.getElementById("response").value = response.text()
                      return response.text();
                })
                .then(function(data){
                    console.log(data)//text version
                    var data_obj = JSON.parse(data);
                    document.getElementById("data_obj").value = data_obj
                    return data_obj
                })
            }
        </script>

Кажется, я ничего не возвращаю, но я не уверен, в чем дело, любая помощь очень ценится.

Вот вся страница листа.

image

Мне наконец-то удалось получить функцию, которая работает ниже. 

    <script>
        function savecard() {
            let customerId = document.getElementById("customerId").value;
            let url = "https://api.sumup.com/v0.1/customers/" + customerId + "/payment-instruments"
            let auth = " Basic " + document.getElementById("auth").value;
            alert(auth);

            let cardBody = {
                type:"card",
                card: {
                name: document.getElementById("nameonCard").value,
                cardNo: document.getElementById("cardNumber").value,
                expiry_year: document.getElementById("expiryMonth").value,
                expiry_month: document.getElementById("expiryYear").value,
                cvv: document.getElementById("cvc").value
                }
                };
            alert(cardBody.card.name);
            let options = {
                //mode: 'no-cors',
                method: 'POST',
                body: JSON.stringify(cardBody),
                headers: {
                    'Content-Type': 'application/json',
                    'Authorization': auth
                }
            }

            fetch(url, options)
            .then(res => res.json())
            .then(res => alert(res))
            .catch(err => alert(`Error with message: ${err}`));;
        }
    </script>

Однако теперь я получаю сообщение об ошибке в улове

SyntaxError: JSON.parse: unexpected end of data at line 1 column 1 of the JSON data

Похоже, это простая опечатка, но я смотрю на нее долго, чтобы увидеть, что это такое.

1 Ответ

0 голосов
/ 14 января 2020

В конце концов это сработало. Я уменьшил размер, поместив его в верхнюю часть конечного файла и удалив любые листовые теги, чтобы устранить проблемы. Вместо использования конечных тегов я добавил скрытые входные данные формы со значениями, установленными конечным тегом, а затем получил доступ к этому значению в функции. 

<script>
        function savecard() {
            let customerId = document.getElementById("customerId").value; // for testing hard code value in form
            let url = "https://api.sumup.com/v0.1/customers/" + customerId + "/payment-instruments"
            let auth = " Basic " + document.getElementById("auth").value; // for testing hard code value in form


            let cardBody = {
                type:"card",
                card: {
                name: document.getElementById("nameonCard").value,
                cardNo: document.getElementById("cardNumber").value,
                expiry_year: document.getElementById("expiryMonth").value,
                expiry_month: document.getElementById("expiryYear").value,
                cvv: document.getElementById("cvc").value
                }
                };

            let headers = {
                'Authorization': auth,
                'Content-Type': 'application/json'
                 }
            let options = {
                //mode: 'no-cors',
                method: 'POST',
                body: JSON.stringify(cardBody), //
                headers: headers
            }

            fetch(url, options)
            .then(res => res.json())
                var token = res.token
                document.getElementById("token").value = token
                .then(res => console.log(res))
            .catch(err => alert(`Error with message: ${err}`));;

            document.getElementById("paymentForm").submit()
        }
    </script>

Надеюсь, это кому-нибудь поможет.

...