applepay.html

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">

    <style>
      #apple-pay-button-container {
          display: flex;
          justify-content: center;
          width: 100%;
      }
      #apple-pay-button {
          width: 300px; /* Adjust the size as needed */
      }
      @media (max-width: 350px) { /* Adjust the breakpoint as needed */
          #apple-pay-button {
              width: 90%; /* Limits the width to 90% of the container width on small screens */
          }
      }apple-pay-button {
      --apple-pay-button-width: 300px;
      --apple-pay-button-height: 60px;
      --apple-pay-button-border-radius: 5px;
      --apple-pay-button-padding: 5px 0px;
    }
    </style>

    <!-- 👇🏻 Add NoFrixion JavaScript library  -->
    <script src="https://cdn.nofrixion.com/nofrixion-nextgen.js"></script>

  </head>
  <body>

    <h3>Apple Pay Button should be here on iOS and MacOS:</h3>

    <div id="apple-pay-button-container">

      <nofrixion-apple-pay-button 
          paymentRequestID="32befbda-d738-4a88-9a86-f4eb0354b5d4" 
          apiUrl="https://api.nofrixion.com/api/v1" 
          id="apple-pay-button" 
          style="width: 350px">

      </nofrixion-apple-pay-button>
    </div>

  </body>
</html>