text: const clientKey = document.getElementById("clientKey").innerHTML;
  const type = document.getElementById("type").innerHTML;
  
  async function initCheckout() {
    try {
      const paymentMethodsResponse = await callServer("/api/getPaymentMethods");
      const configuration = {
        paymentMethodsResponse: filterUnimplemented(paymentMethodsResponse),
        clientKey,
        locale: "de_DE",
        environment: "test",
        showPayButton: true,
        paymentMethodsConfiguration: {
          ideal: {
            showImage: true,
          },
          paypal: {
            environment: "test", // Change this to "live" when you're ready to accept live PayPal payments
            countryCode: "NL", // Only needed for test. This will be automatically retrieved when you are in production
            amount: {
              currency: "EUR",
              value: 1000
            },
            intent: "authorize",
  
            onCancel: (data, dropin) => {
              dropin.setStatus('ready');
              // Sets your prefered status of the Drop-in component when a PayPal payment is cancelled. In this example, return to the initial state.
            }
         },
          card: {
            hasHolderName: true,
            holderNameRequired: true,
            countryCode: "CH",
            name: "Credit or debit card",
            amount: {
              value: 100,
              currency: "CH",
            },
            paymentMethod: {
              type: 'twint'
          },
          },
        },
        onSubmit: (state, component) => {
          if (state.isValid) {
            handleSubmission(state, component, "/api/initiatePayment");
          }
        },
        onAdditionalDetails: (state, component) => {
          handleSubmission(state, component, "/api/submitAdditionalDetails");
        },
      };
  
      const checkout = new AdyenCheckout(configuration);
      checkout.create(type).mount(document.getElementById(type));
    } catch (error) {
      console.error(error);
      alert("Error occurred. Look at console for details");
    }
  }
  
  function filterUnimplemented(pm) {
    pm.paymentMethods = pm.paymentMethods.filter((it) =>
      [
        "scheme",
        "ideal",
        "dotpay",
        "giropay",
        "sepadirectdebit",
        "directEbanking",
        "ach",
        "alipay",
        "klarna_paynow",
        "klarna",
        "klarna_account",
        "boletobancario_santander",
        "twint",
        "paypal",
      ].includes(it.type)
    );
    return pm;
  }
  
  // Event handlers called when the shopper selects the pay button,
  // or when additional information is required to complete the payment
  async function handleSubmission(state, component, url) {
    try {
      const res = await callServer(url, state.data);
      handleServerResponse(res, component);
    } catch (error) {
      console.error(error);
      alert("Error occurred. Look at console for details");
    }
  }
  
  // Calls your server endpoints
  async function callServer(url, data) {
    const res = await fetch(url, {
      method: "POST",
      body: data ? JSON.stringify(data) : "",
      headers: {
        "Content-Type": "application/json",
      },
    });
  
    return await res.json();
  }
  
  // Handles responses sent from your server to the client
  function handleServerResponse(res, component) {
    if (res.action) {
      component.handleAction(res.action);
    } else {
      switch (res.resultCode) {
        case "Authorised":
          window.location.href = "/result/success";
          break;
        case "Pending":
        case "Received":
          window.location.href = "/result/pending";
          break;
        case "Refused":
          window.location.href = "/result/failed";
          break;
        default:
          window.location.href = "/result/error";
          break;
      }
    }
  }
  
  initCheckout();
  