<!DOCTYPE html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1"> <!-- Ensures optimal rendering on mobile devices. -->
<meta http-equiv="X-UA-Compatible" content="IE=edge" /> <!-- Optimal Internet Explorer compatibility -->
<script src="https://www.paypal.com/sdk/js?client-id=client_id¤cy=EUR"></script>
</head>
<body>
<div id="paypal-button-container"></div>
<script>
/*
1. client_id 賬號的客戶端ID,需要自己注冊。
2. currency 幣種,默認是USD。
2. paypal.Buttons 參數以及使用。 https://developer.paypal.com/docs/checkout/integration-features/
3. 顯示的按鈕是根據一系列因素自動決定的,包括:買方國家,設備類型,買家選擇查看的資金來源。
4. 要阻止某些按鈕顯示參考 https://developer.paypal.com/docs/checkout/reference/customize-sdk/#disable-funding
*/
let purchase_units_amount = {
currency_code: "EUR",
value: "8.00",
breakdown: {
item_total: {
value: "10.00",
currency_code: "EUR"
},
discount: {
value: "2.00",
currency_code: "EUR"
},
}
}
let purchase_units_item_list = [
{
name: "NeoPhone",
sku: "sku03",
unit_amount: {
value: "5.00",
currency_code: "EUR"
},
quantity: "1"
},
{
name: "Fitness Watch",
sku: "sku04",
unit_amount: {
value: "5.00",
currency_code: "EUR"
},
quantity: "1"
}
]
let purchase_units_shipping_address = {
"address_line_1": "123 Townsend St",
"address_line_2": "Floor 6",
"admin_area_2": "San Francisco",
"admin_area_1": "CA",
"postal_code": "94107",
"country_code": "US"
};
paypal.Buttons({
// 配置付款按鈕 https://developer.paypal.com/docs/checkout/integration-features/customize-button/
style: {
layout: 'vertical', // 布局方式:vertical: 垂直,horizontal:水平,
color: 'gold',
shape: 'rect',
label: 'paypal'
},
//返回顧客在paypal上選擇的地址,具體用法參考 https://developer.paypal.com/docs/checkout/integration-features/shipping-callback/
onShippingChange: (data, actions)=>{
console.log("onShippingChange", data, actions);
},
// 按鈕第一次呈現時調用
onInit: ()=>{
console.log("onInit");
},
// 點擊付款按鈕時調用 通常用於表單驗證
onClick: ()=>{
console.log("onClick");
return true;
},
createOrder: (data, actions)=>{
// 參考鏈接:https://developer.paypal.com/docs/api/orders/v2/#orders_patch
return actions.order.create({
purchase_units: [{
amount: purchase_units_amount,
shipping: {
address: purchase_units_shipping_address
},
items: purchase_units_item_list
}],
application_context: {
brand_name: "LilySilk",
shipping_preference: "SET_PROVIDED_ADDRESS", // GET_FROM_FILE / NO_SHIPPING / SET_PROVIDED_ADDRESS
user_action: "PAY_NOW"
}
});
},
onApprove: (data, actions)=>{
return actions.order.capture().then((details)=>{
console.log("capture", details);
});
},
onCancel: (data)=>{
console.log("onCancel", data);
},
onError: (err)=>{
// 參考資料:https://developer.paypal.com/docs/api/orders/v2/#orders_patch
console.log("onError", err);
}
}).render('#paypal-button-container');
</script>
</body>
原:https://blog.csdn.net/Gx422954766/article/details/103953144