<!doctype html>
<head>
  <style>#qp-embedded-container { border: 1px solid black; }</style>
  <link rel="stylesheet" href="https://app.qualpay.com/hosted/embedded/css/qp-embedded.css">
</head>
<body>
  <script src="https://app.qualpay.com/hosted/embedded/js/qp-embedded-sdk.min.js"></script>

  <form id="my-payment-form" method="post" action="/">
    <div id="qp-embedded-container" align="center"></div>
    <script>
      qpEmbeddedForm.loadFrame({{merchant_id}},                // merchant ID
        {
          formId: "my-payment-form",
          mode: "test",                                     // change mode between "test" and "prod"
          transientKey: "{{transient_key}}", // transient key
          tokenize: true,                                   // set to true to make card_id permanent
          onSuccess: (data) => {
            const { card_id, card_number } = data;
            console.log(data);
            alert( "card id is "+ card_id +", card number is "+ card_number );
            // Make payment from server using the token
          },
          onError: (error) => {
            if( error.detail ) {
              for( let key in error.detail ) {
                console.log(error.detail[key]);
              }
            }
          },
          cardConfig: {
            enabled: true,
          },
          achConfig: {
            enabled: true,
            onPaymentTypeChange: function (data) {
              console.log("Display ", data);
            },
          },
          formFields: {
            cvv2: {
              required: true
            }
          },
          font: 'Titillium Web',
          style:
            "#root { min-width: 260px; }" +
            ".content {" +
            "  background-color: #35F;" +
            "  font-family: 'Titillium Web';" +
            "}",
        });
    </script>
    <input type="submit" name="submit" value="Pay Now"></input>
  </form>
</body>
</html>