Webcake
Vietnamese
Search
K
Links
Comment on page

16. Thanh toán PayPal

1. Tạo app thanh toán tại PayPal

1.1. Tạo app thanh toán

Hướng dẫn tạo app thanh toán PayPal tại: https://developer.paypal.com/reference/production
Dưới đây là 1 app tạo trên môi trường test của PayPal (Sandbox)
người dùng cần phải tạo app ở Production để sử dụng

1.2. Copy mã của app thanh toán

  • Client ID
  • Secret

1.3. Tạo kết nối PayPal payment

Tích hợp -> PayPal Payment

2. Gắn đoạn mã vào trang

2.1. Đoạn mã 1

<script src="https://www.paypal.com/sdk/js?client-id=AReBYTfxnJADmCuu8K6uVLq5JjYQOQe147zCxFX65gljStJpYO1dieQYvV5ZbxP059krV81V-LksyqaY&currency=USD"></script>
Lưu ý
Gắn đoạn mã vào trước thẻ </head>

2.2. Đoạn mã 2

paypal.Buttons({
// Order is created on the server and the order id is returned
createOrder() {
if (!window.order) return
return fetch("/create_paypal_order", {
method: "POST",
headers: {
"Content-Type": "application/json",
},
// use the "body" param to optionally pass additional order information
// like product skus and quantities
body: JSON.stringify({
client_id: "AYgwHtpvX0EDORdjXrnvzMkbds1OXbEadbVgPeU-k_jjo9ilGTHhoKco0Lms1yiwX0_upOwfDGoX5SN1",
currency: window.sync?.currency || window.trackingCurrency || 'USD',
total_price: window.order.total_price
}),
})
.then((response) => response.json())
.then((data) => {
let order = JSON.parse(data.order)
return order.id
});
},
// Finalize the transaction on the server after payer approval
onApprove(data) {
if (!window.order) return
return fetch("/capture_paypal_order", {
method: "POST",
headers: {
"Content-Type": "application/json",
},
body: JSON.stringify({
client_id: "AYgwHtpvX0EDORdjXrnvzMkbds1OXbEadbVgPeU-k_jjo9ilGTHhoKco0Lms1yiwX0_upOwfDGoX5SN1",
orderID: data.orderID
})
})
.then((response) => response.json())
.then((data) => {
// Successful capture! For dev/demo purposes:
let orderData = JSON.parse(data.capture)
console.log('Capture result', orderData, JSON.stringify(orderData, null, 2));
const transaction = orderData.purchase_units[0].payments.captures[0];
// alert(`Transaction ${transaction.status}: ${transaction.id}\n\nSee console for all available details`);
// When ready to go live, remove the alert and show a success message within this page. For example:
// const element = document.getElementById('paypal-button-container');
// element.innerHTML = '<h3>Thank you for your payment!</h3>';
// Or go to another URL: window.location.href = 'thank_you.html';
});
}
}).render('#w-yw4z7lum');
Lưu ý: Cần thay 2 vị trí client_ID app của bạn vào đoạn mã trên.
Bổ sung ID nút bấm để gắn vào .render('') trong đoạn mã trên
Ví dụ ID nút bấm: #w-p3q0d0ym
Gắn đoạn mã vào code JS trong trang

3. Trang xuất bản

3.1. Trang xuất bản

Lưu ý:
  • Cần đặt đơn trước khi thanh toán bằng Paypal để nhận được giá trị đơn hàng từ form
  • Người dùng có thể điều chỉnh kích thước của nút để thiết kế trang gọn hơn
  • Giá trị đơn hàng trong form sẽ lấy là giá trị sản phẩm trong đơn hoặc giá trị theo dõi Facebook điền vào trang

3.2. Giá trị đơn trong form