import { AMSCashierPayment } from "@alipay/ams-checkout";
// Step 1: Instantiate the SDK and handle the callback event.
const onEventCallback = function ({ code, result }) {
  switch (code) {
    case "SDK_PAYMENT_SUCCESSFUL":
      // Payment was successful. Redirect users to the payment result page.
      break;
    case "SDK_PAYMENT_PROCESSING":
      console.log("Check the payment result data", result);
      // Payment is being processed. Query the payment status through the server or wait for the payment result notification. At the same time, you can check whether the user has completed the payment. If the payment is not completed, guide the user to pay again.
      break;
    case "SDK_PAYMENT_FAIL":
      console.log("Check the payment result data", result);
      // Payment failed. Please refer to the processing suggestions in the Event codes and guide the user to pay again.
      break;
    case "SDK_PAYMENT_CANCEL":
      // The user exits the payment page without submitting the order. You can re-invoke the SDK with paymentSessionData that is still valid. If it has expired, you need to re-request paymentSessionData.
      break;
    case "SDK_PAYMENT_ERROR":
      console.log("Check the payment result data", result);
      // The payment status is abnormal. Query the payment status through the server or wait for the payment result notification, or guide the user to pay again.
      break;
    case "SDK_END_OF_LOADING":
      // End the custom loading animation.
      break;
    default:
      break;
  }
};
const checkoutApp = new AMSCashierPayment({
  environment: "sandbox",
  locale: "en_US",
  onLog: ({ code, message }) => {},
  onEventCallback: onEventCallback,
});
// Handle payment button events.
document.querySelector("#your form id").addEventListener("submit", handleSubmit);

async function handleSubmit() {
  // Step 2: The server calls createPaymentSession API to obtain paymentSessionData.
  async function getPaymentSessionData() {
    const url = "Fill in the server address";
    const config = {
      // Fill in the request configuration.
    };
    const response = await fetch(url, config);
    // Obtain the value of the paymentSessionData parameter in the response.
    const { paymentSessionData } = await response.json();
    return paymentSessionData;
  }
  const paymentSessionData = await getPaymentSessionData();

  // Step 3: Create rendering components.
  // Best practice
  await checkoutApp.createComponent({
    sessionData: paymentSessionData,
    appearance: {
      showLoading: true, // Set as true by default to enable the default loading pattern.
    },
  });
}

// Step 1: Instantiate the SDK and handle the callback event.
const onEventCallback = function ({ code, result }) {
  switch (code) {
    case "SDK_PAYMENT_SUCCESSFUL":
      // Payment was successful. Redirect users to the payment result page.
      break;
    case "SDK_PAYMENT_PROCESSING":
      console.log("Check the payment result data", result);
      // Payment is being processed. Query the payment status through the server or wait for the payment result notification. At the same time, you can check whether the user has completed the payment. If the payment is not completed, guide the user to pay again.
      break;
    case "SDK_PAYMENT_FAIL":
      console.log("Check the payment result data", result);
      // Payment failed. Please refer to the processing suggestions in the Event codes and guide the user to pay again.
      break;
    case "SDK_PAYMENT_CANCEL":
      // The user exits the payment page without submitting the order. You can re-invoke the SDK with paymentSessionData that is still valid. If it has expired, you need to re-request paymentSessionData.
      break;
    case "SDK_PAYMENT_ERROR":
      console.log("Check the payment result data", result);
      // The payment status is abnormal. Query the payment status through the server or wait for the payment result notification, or guide the user to pay again.
      break;
    case "SDK_END_OF_LOADING":
      // End the custom loading animation.
      break;
    default:
      break;
  }
};
const checkoutApp = new window.AMSCashierPayment({
  environment: "sandbox",
  locale: "en_US",
  onLog: ({ code, message }) => {},
  onEventCallback: onEventCallback,
});
// Handle payment button events.
document.querySelector("#your form id").addEventListener("submit", handleSubmit);

async function handleSubmit() {
  // Step 2: The server calls createPaymentSession API to obtain paymentSessionData.
  async function getPaymentSessionData() {
    const url = "Fill in the server address";
    const config = {
      // Fill in the request configuration.
    };
    const response = await fetch(url, config);
    // Obtain the value of the paymentSessionData parameter in the response.
    const { paymentSessionData } = await response.json();
    return paymentSessionData;
  }
  const paymentSessionData = await getPaymentSessionData();

  // Step 3: Create rendering components.
  // Best practice
  await checkoutApp.createComponent({
    sessionData: paymentSessionData,
    appearance: {
      showLoading: true, // Set as true by default to enable the default loading pattern.
    },
  });
}