我在使用 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
似乎这是一个简单的错字，但我一直在看它很久才知道它是什么。