Sử dụng Payment Request API

const request = new PaymentRequest(
  buildSupportedPaymentMethodData(),
  buildShoppingCartDetails(),
);

function buildSupportedPaymentMethodData() {
  // Ví dụ các phương thức thanh toán được hỗ trợ:
  return [{ supportedMethods: "https://example.com/pay" }];
}

function buildShoppingCartDetails() {
  // Gán cứng cho mục đích demo:
  return {
    id: "order-123",
    displayItems: [
      {
        label: "Example item",
        amount: { currency: "USD", value: "1.00" },
      },
    ],
    total: {
      label: "Total",
      amount: { currency: "USD", value: "1.00" },
    },
  };
}

request.show().then((paymentResponse) => {
  // Ở đây chúng ta sẽ xử lý thanh toán. Trong demo này, mô phỏng thành công ngay lập tức:
  paymentResponse.complete("success").then(() => {
    // Chỉ dùng cho mục đích demo:
    introPanel.style.display = "none";
    successPanel.style.display = "block";
  });
});

// Payment request giả để kiểm tra xem có thể thanh toán hay không
new PaymentRequest(buildSupportedPaymentMethodData(), {
  total: { label: "Stub", amount: { currency: "USD", value: "0.01" } },
})
  .canMakePayment()
  .then((result) => {
    if (result) {
      // Payment request thật
      const request = new PaymentRequest(
        buildSupportedPaymentMethodData(),
        checkoutObject,
      );
      request.show().then((paymentResponse) => {
        // Ở đây chúng ta sẽ xử lý thanh toán.
        paymentResponse.complete("success").then(() => {
          // Hoàn tất xử lý thanh toán
        });
      });
    }
  });

const checkoutButton = document.getElementById("checkout-button");
if (window.PaymentRequest) {
  let request = new PaymentRequest(
    buildSupportedPaymentMethodNames(),
    buildShoppingCartDetails(),
  );
  checkoutButton.addEventListener("click", () => {
    request
      .show()
      .then((paymentResponse) => {
        // Xử lý thanh toán thành công
      })
      .catch((error) => {
        // Xử lý thanh toán bị hủy hoặc thất bại. Ví dụ, chuyển hướng tới
        // quy trình thanh toán bằng biểu mẫu web cũ:
        window.location.href = "/legacy-web-form-checkout";
      });

    // Mỗi lần nhấp vào nút thanh toán phải dùng một thể hiện mới của
    // đối tượng PaymentRequest, vì PaymentRequest.show() chỉ có thể
    // được gọi một lần cho mỗi thể hiện.
    request = new PaymentRequest(
      buildSupportedPaymentMethodNames(),
      buildShoppingCartDetails(),
    );
  });
}

const checkoutButton = document.getElementById("checkout-button");
checkoutButton.innerText = "Loading…";
if (window.PaymentRequest) {
  const request = new PaymentRequest(
    buildSupportedPaymentMethodNames(),
    buildShoppingCartDetails(),
  );
  request
    .canMakePayment()
    .then((canMakeAFastPayment) => {
      checkoutButton.textContent = canMakeAFastPayment
        ? "Fast Checkout with W3C"
        : "Setup W3C Checkout";
    })
    .catch((error) => {
      // Người dùng có thể đã tắt chức năng truy vấn trong cài đặt riêng tư.
      // Website không biết họ có thể thanh toán nhanh hay không, nên chọn
      // một tiêu đề chung.
      checkoutButton.textContent = "Checkout with W3C";
    });
}

// Trang đã tải xong. Trang có nên dùng PaymentRequest không?
// Nếu PaymentRequest thất bại, trang có nên quay về thanh toán thủ công
// bằng biểu mẫu web không?
const supportedPaymentMethods = [
  /* supported methods */
];

let shouldCallPaymentRequest = true;
let fallbackToLegacyOnPaymentRequestFailure = false;
new PaymentRequest(supportedPaymentMethods, {
  total: { label: "Stub", amount: { currency: "USD", value: "0.01" } },
})
  .canMakePayment()
  .then((result) => {
    shouldCallPaymentRequest = result;
  })
  .catch((error) => {
    console.error(error);

    // Người dùng có thể đã tắt khả năng truy vấn trong cài đặt riêng tư.
    // Hãy dùng PaymentRequest theo mặc định và quay về thanh toán dựa trên
    // biểu mẫu web cũ nếu cần.
    shouldCallPaymentRequest = true;
    fallbackToLegacyOnPaymentRequestFailure = true;
  });

// Người dùng đã nhấp vào nút thanh toán. Chúng ta biết
// trong giỏ hàng có gì, nhưng chưa có đối tượng `Checkout`.
function onCheckoutButtonClicked(lineItems) {
  callServerToRetrieveCheckoutDetails(lineItems);
}

// Máy chủ đã tạo đối tượng `Checkout`. Bây giờ chúng ta biết
// toàn bộ giá và các tùy chọn giao hàng.
function onServerCheckoutDetailsRetrieved(checkoutObject) {
  if (shouldCallPaymentRequest) {
    const request = new PaymentRequest(supportedPaymentMethods, checkoutObject);
    request
      .show()
      .then((paymentResponse) => {
        // Gửi kết quả lên máy chủ và gọi `paymentResponse.complete()`.
      })
      .catch((error) => {
        console.error(error);
        if (fallbackToLegacyOnPaymentRequestFailure) {
          window.location.href = "/legacy-web-form-checkout";
        } else {
          showCheckoutErrorToUser();
        }
      });
  } else {
    window.location.href = "/legacy-web-form-checkout";
  }
}

checkoutButton.addEventListener("click", () => {
  const request = new PaymentRequest(
    buildSupportedPaymentMethodData(),
    buildShoppingCartDetails(),
  );
  request
    .show()
    .then((paymentResponse) => {
      // Ở đây chúng ta sẽ xử lý thanh toán. Trong demo này, mô phỏng thành công ngay lập tức:
      paymentResponse.complete("success").then(() => {
        // Chỉ dùng cho mục đích demo:
        introPanel.style.display = "none";
        successPanel.style.display = "block";
      });
    })
    .catch((error) => {
      if (error.name === "NotSupportedError") {
        window.location.href = "https://bobbucks.dev/#download";
      } else {
        // Các loại lỗi khác; thanh toán bị hủy hoặc thất bại. Chỉ dùng cho mục đích demo:
        introPanel.style.display = "none";
        legacyPanel.style.display = "block";
      }
    });
});

request
  .show()
  .then((paymentResponse) => paymentResponse.complete("success"))
  .then(() => {
    // Xử lý thanh toán ở đây.
    // Đóng giao diện:
    // Yêu cầu thêm chi tiết địa chỉ giao hàng.
    const additionalDetailsContainer = document.getElementById(
      "additional-details-container",
    );
    additionalDetailsContainer.style.display = "block";
    window.scrollTo(additionalDetailsContainer.getBoundingClientRect().x, 0);
  })
  .catch((error) => {
    // Xử lý lỗi.
  });

const paymentRequest = new PaymentRequest(
  [{ supportedMethods: "https://example.com/preauth" }],
  details,
);

// Gửi sự kiện `CanMakePayment` tới payment handler.
paymentRequest
  .canMakePayment()
  .then((res) => {
    if (res) {
      // Payment handler đã ủy quyền trước một giao dịch
      // với một số tiền tĩnh, ví dụ USD $1.00.
    } else {
      // Ủy quyền trước thất bại hoặc payment handler chưa được cài đặt.
    }
  })
  .catch((err) => {
    // Đã xảy ra lỗi không mong muốn.
  });

self.addEventListener("canmakepayment", (evt) => {
  // Ủy quyền trước tại đây.
  const preAuthSuccess = true;
  evt.respondWith(preAuthSuccess);
});