我正在尝试在客户端使用javascript sdk实现paypal高级信用卡和借记卡支付。我使用下面的例子作为参考https://developer.paypal.com/docs/business/checkout/advanced-card-payments/.
我已经创建了订单，得到了链接作为响应，如何使用批准url链接批准订单，因为用户在执行订单捕获之前使用信用卡详细信息进行支付而没有paypal登录。
我知道这不是这个实现的最佳方法。首先，我想尝试这个例子在贝宝文档中给出。我以后会在服务器端实现它，以避免安全漏洞。
<html>
<head>
<meta charset="utf-8"/>
<!-- Optimal rendering on mobile devices. -->
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Optimal Internet Explorer compatibility -->
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<!-- Sample CSS styles for demo purposes. You can override these styles to match your web page's branding. -->
<link rel="stylesheet" type="text/css" href="https://www.paypalobjects.com/webstatic/en_US/developer/docs/css/cardfields.css"/>
</head>
<body>
<!-- JavaScript SDK -->
<script src="https://www.paypal.com/sdk/js?components=buttons,hosted-fields&client-id=abc"
data-client-token="xyz">
<div align="center"> or </div>
<!-- Advanced credit and debit card payments form -->
<div class="card_container">
<form id="card-form">
<label for="card-number">Card Number</label><div id="card-number" class="card_field"></div>
<div>
<label for="expiration-date">Expiration Date</label>
<div id="expiration-date" class="card_field"></div>
</div>
<div>
<label for="cvv">CVV</label><div id="cvv" class="card_field"></div>
</div>
<label for="card-holder-name">Name on Card</label>
<input type="text" id="card-holder-name" name="card-holder-name" autocomplete="off" placeholder="card holder name"/>
<button value="submit" id="submit" class="btn">Pay</button>
</form>
</div>
<!-- Implementation -->
<script>
let orderId;
// Displays PayPal buttons
paypal.Buttons({
style: {
layout: 'horizontal'
},
createOrder: function(data, actions) {
return actions.order.create({
purchase_units: [{
amount: {
value: "1.00"
}
}]
});
},
onApprove: function(data, actions) {
return actions.order.capture().then(function(details) {
console.log(details)
window.location.href = '/success.html';
});
}
}).render("#paypal-button-container");
// If this returns false or the card fields aren't visible, see Step #1.
if (paypal.HostedFields.isEligible()) {
// Renders card fields
paypal.HostedFields.render({
// Call your server to set up the transaction
createOrder: function () {
return fetch('https://api-m.sandbox.paypal.com/v2/checkout/orders', {
method: 'post',
headers: {
'Accept': 'application/json',
'Content-Type': 'application/json',
'Authorization': 'Bearer wert'
}
}).then(function(res) {
return res.json();
}).then(function(orderData) {
console.log(orderData)
orderId = orderData.id;
fetch('https://api-m.sandbox.paypal.com/v2/checkout/orders/' + orderId + '/capture/', {
method: 'post',
headers: {
'Accept': 'application/json',
'Content-Type': 'application/json',
'Authorization': 'Bearer AGeU7jOKBXFPa0Fe_e9Xv3g',
'PayPal-Request-Id': '7b92603e-77ed-4896-8e78-5dea2050476a'
},
"application_context": {
"return_url": "https://google.com"
}
}).then(function(res) {
console.log(res)
return res.json();
})
// return orderId;
});
},
onApprove: function(data) {
console.log(data)
return fetch('/my-server/capture-paypal-transaction', {
headers: {
'content-type': 'application/json'
},
body: JSON.stringify({
orderID: data.orderID
})
}).then(function(res) {
return res.json();
}).then(function(details) {
alert('Transaction funds captured from ' + details.payer_given_name);
})
},
styles: {
'.valid': {
'color': 'green'
},
'.invalid': {
'color': 'red'
}
},
fields: {
number: {
selector: "#card-number",
placeholder: "4111 1111 1111 1111"
},
cvv: {
selector: "#cvv",
placeholder: "123"
},
expirationDate: {
selector: "#expiration-date",
placeholder: "MM/YY"
}
}
}).then(function (cardFields) {
document.querySelector("#card-form").addEventListener('submit', (event) => {
event.preventDefault();
cardFields.submit({
// Cardholder's first and last name
cardholderName: document.getElementById('card-holder-name').value,
// Billing Address
// billingAddress: {
// // Street address, line 1
// streetAddress: document.getElementById('card-billing-address-street').value,
// // Street address, line 2 (Ex: Unit, Apartment, etc.)
// extendedAddress: document.getElementById('card-billing-address-unit').value,
// // State
// region: document.getElementById('card-billing-address-state').value,
// // City
// locality: document.getElementById('card-billing-address-city').value,
// // Postal Code
// postalCode: document.getElementById('card-billing-address-zip').value,
// // Country Code
// countryCodeAlpha2: document.getElementById('card-billing-address-country').value
// }
}).then(function (data) {
console.log(orderId)
console.log(data);
fetch('https://api-m.sandbox.paypal.com/v2/checkout/orders/' + orderId + '/capture/', {
method: 'post',
headers: {
'Accept': 'application/json',
'Content-Type': 'application/json',
'Authorization': 'Bearer AjOKBXFPa0Fe_e9Xv3g'
},
"application_context": {
"return_url": "https://google.com"
}
}).then(function(res) {
console.log(res)
return res.json();
}).then(function (orderData) {
console.log(orderData)
// Three cases to handle:
// (1) Recoverable INSTRUMENT_DECLINED -> call actions.restart()
// (2) Other non-recoverable errors -> Show a failure message
// (3) Successful transaction -> Show confirmation or thank you
// This example reads a v2/checkout/orders capture response, propagated from the server
// You could use a different API or structure for your 'orderData'
var errorDetail = Array.isArray(orderData.details) && orderData.details[0];
if (errorDetail && errorDetail.issue === 'INSTRUMENT_DECLINED') {
return actions.restart(); // Recoverable state, per:
// https://developer.paypal.com/docs/checkout/integration-features/funding-failure/
}
if (errorDetail) {
var msg = 'Sorry, your transaction could not be processed.';
if (errorDetail.description) msg += 'nn' + errorDetail.description;
if (orderData.debug_id) msg += ' (' + orderData.debug_id + ')';
return alert(msg); // Show a failure message
}
// Show a success message or redirect
alert('Transaction completed!');
})
}).catch(function (err) {
alert('Payment could not be captured! ' + JSON.stringify(err))
});
});
});
} else {
// Hides card fields if the merchant isn't eligible
document.querySelector("#card-form").style = 'display: none';
}
</script>
</body>
</html>在执行上面的代码段之后，得到这个作为响应
{名称:"UNPROCESSABLE_ENTITY"细节:[{问题:"ORDER_NOT_APPROVED";,...}],...}debug_id:"a63fbc3806995"details: [{issue: "ORDER_NOT_APPROVED"，…}]0: {issue: "ORDER_NOT_APPROVED"，…}链接:[{href: "https://developer.paypal.com/docs/api/orders/v2/#error-ORDER_NOT_APPROVED"，...}]0: {href: "https://developer.paypal.com/docs/api/orders/v2/#error-ORDER_NOT_APPROVED"，...}消息:无法执行请求的操作、语义错误或业务验证失败。"名称:"UNPROCESSABLE_ENTITY
如何使用approve url链接批准订单，因为用户在执行订单捕获之前使用信用卡详细信息付款而没有登录paypal。
审批URL链接未与JavaScript SDK一起使用。
使用托管字段时，审批步骤为卡片字段提交，触发cardFields.submit({。
托管字段的使用需要服务器端集成来捕获已批准(提交)的付款。