如何解决如何使用 paypal 的 javascript sdk 从创建订单 api 的响应链接批准订单？
我正在尝试在客户端使用 javascript sdk 实现 paypal 高级信用卡和借记卡付款。我使用以下示例作为参考 https://developer.paypal.com/docs/business/checkout/advanced-card-payments/。
我已创建订单，收到链接作为响应，如何使用批准 url 链接批准订单，因为用户在执行订单捕获之前使用信用卡详细信息进行付款而无需登录贝宝。
我知道这不是此实现的最佳方法。首先我想尝试一下paypal docs中给出的这个例子。我稍后会在服务器端实现它以避免安全漏洞。
<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','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/','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 += '\n\n' + 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>执行上述代码段后，将其作为响应
{name: "UNPROCESSABLE_ENTITY",details: [{issue: "ORDER_NOT_APPROVED",…}],…} debug_id: "a63fbc3806995" 详细信息：[{问题：“ORDER_NOT_APPROVED”，...}] 0：{问题：“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",...} 消息：“无法执行请求的操作、语义不正确或业务验证失败。” name: "UNPROCESSABLE_ENTITY
解决方法
如何使用批准 url 链接批准订单，因为用户在执行订单捕获之前使用信用卡详细信息进行付款而无需登录贝宝。
批准 URL 链接不与 JavaScript SDK 结合使用。
使用托管字段时，审批步骤是卡片字段提交，这会触发 cardFields.submit({。
使用托管字段需要服务器端集成以捕获已批准（提交）的付款。
版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 dio@foxmail.com 举报，一经查实，本站将立刻删除。
