蒸气3叶中的Javascript函数-帮助需要

问题描述 投票：2回答：1

我在使用Vapor 3的叶子页中具有Javascript函数，该函数应触发到api的帖子以保存客户卡详细信息并返回代表该卡的令牌。我通常会在我们的蒸气服务器上迅速进行此操作，但是要符合PCI标准，我们不允许将客户的信用卡信息发送到我们的服务器上，他们必须直接联系Sum Up（付款提供商），我没有使用javascript的经验，并且交易之后我想出了这个功能。 

    <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>

我似乎什么都没找回来，但是我不确定我要去哪里错，非常感谢您的帮助。

这里是整个页面。 

<!doctype html>
<html lang="en">
    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">

        <title>Pay for Membership</title>
        <body>
            <div class="card bg-dark text-white h-100">
                <img class="card-img bg-dark img-fluid" src="https://images.unsplash.com/photo-1575151772039-542722abbf63?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format" alt="Card image">
                    <div class="card-img-overlay">
                        <div class="card-deck">
                        <div class="card bg-transparent border-warning align-self-start ">
                        <div class="card-header">
                            <h4 class="card-title text-center">Order Summary</h4>
                        </div>
                        <div class="card-body">
                            <ul>
                                #for(sum in orderSum){
                                    #if(isLast == false){
                                    <li class="list-group-item bg-transparent d-flex justify-content-between align-items-centert">#noam(sum)
                                    <span class="badge badge-info badge-pill text-right align-self-center">#am(sum)</span>
                                    </li>
                                    }
                                }
                            </ul>
                        </div>
                        <div class="card-footer text-center">
                            #for(sum in orderSum){
                                #if(isLast){
                                    <h5>#(sum)</h5>
                                }
                            }
                        </div>
                        </div>
                        <div class="card bg-dark border-warning">
                            <div class="card-header">
                                <h4 class="card-title">Payment Details</h4>
                            </div>
                            <div class="card-body">
                                <form method="post" action="/completedsumupmember" id="paymentForm">
                                <div class="row form-group" hidden>
                                <input type="number" class="form-control" id="amount" name="amount" value =#(amount) hidden>
                                <input type="text" class="form-control" id="currency" name="currency" value =#(currency) hidden>
                                <input type="text" class="form-control" id="orderId" name="orderId" value =#(orderId) hidden>
                                <input type="text" class="form-control" id="desc" name="desc" value =#(desc) hidden>
                                <input type="text" class="form-control" id="type" name="type" value =#(type) hidden>
                                <input type="text" class="form-control" id="orgId" name="orgId" value =#(orgId) hidden>
                                <input type="text" class="form-control" id="payToEmail" name="payToEmail" value =#(payToEmail) hidden>
                                <input type="text" class="form-control" id="auth" name="auth" value =#(auth) hidden>
                                <input type="hidden" class="form-control" id="response" name="response" value ="" hidden>
                                <input type="hidden" class="form-control" id="data_obj" name="data_obj" value ="" hidden>
                                <input type="text" class="form-control" id="customerId" name="customerId" value =#(sumCustId) hidden>
                            </div>
                            <div class="row form-group">
                                <div class = "col-md">
                                    <label for="nameonCard">Name on the Card</label>
                                    <input type="text" class="form-control" id="nameonCard" name="nameonCard" placeholder="John Smith" required>
                                </div>
                            </div>
                            <div class ="row form-group">
                                <div class ="col-lg">
                                    <label for="cardNumber">Card Number</label>
                                    <input type="number" class="form-control" id="cardNumber" name="cardNumber" placeholder="1111 2222 3333 4444" required>
                            </div>
                            </div>
                                <div class = "row form-group">
                                    <div class = "col-md">
                                        <label for="expiryMonth">Expriy Month</label>
                                        <input type="text" class="form-control" id="expiryMonth" name="expiryMonth" placeholder="mm" required>
                                    </div>
                                    <div class = "col-md">
                                        <label for="expiry">Expriy Year</label>
                                        <input type="text" class="form-control" id="expiryYear" name="expiryYear" placeholder="yy" required>
                                    </div>
                                    <div class = "col-md">
                                        <label for="cvc">CVV</label>
                                        <input type="text" class="form-control" id="cvc" name="cvc" placeholder="000" required>
                                    </div>
                                </div>
                                <div class="card-footer text-center">
                                    <button class="btn btn-warning btn-block" type="submit" onclick="savecard()">Pay Now</button>
                                </div>
                                </form>
                            </div>


                        </div>
                    </div>
                    </div>


            <!-- Optional JavaScript -->
            <!-- jQuery first, then Popper.js, then Bootstrap JS -->
            <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
            <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
            <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
            <script>
                function savecard() {

                    console.log('do something ')
                    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>
        </body>
    </html>

我终于设法获得了一个有效的功能，如下所示。 

    <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

似乎是一个简单的错字，但是我一直在看它很久才知道它是什么。

javascript vapor leaf
1个回答
0
投票

最后这成功了。我通过将其放在叶子文件的头部并删除任何叶子标签来解决问题，从而使其变薄。我没有使用叶子标签，而是使用叶子标签设置的值添加了隐藏的表单输入，然后在函数中访问该值。 

<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>

希望对您有所帮助。

最新问题
© www.soinside.com 2019 - 2024. All rights reserved.