<html>
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <link rel="apple-touch-icon" href="/assets/logo.png" />
    <style>
      body {
        display: flex;
        justify-content: center;
        align-items: center;
        height: 100vh;
        margin: 0;
      }

      .container {
        display: flex;
        flex-direction: column;
        text-align: center;
        background-color: lightgray;
        max-width: 500px;
        min-height: 15em;
        padding: 20px;
      }

      #applepay-container {
        flex-grow: 1;
      }
    </style>

    <!-- Include Apple SDK Script -->
    <script src="https://applepay.cdn-apple.com/jsapi/v1/apple-pay-sdk.js"></script>
    <!-- Include PayPal SDK Script with components=applepay for Custom Applepay Component-->
    <script
      src="https://www.paypal.com/sdk/js?components=applepay&client-id=AZsMPHqx0TlbCyV_8AY5LlNzzmilpaP8lbfQQQ4iPRpk_WC8hOWFWdvnGMgln4RJAAO2oWd7g1PhhMtu&merchant-id=H6MLL7DW7SMQ6"
      data-client-token="EFZpihetGeQCYOA_zWas7iTQ1Le32fSmBvgZd5tZ01TvonU8hwxEQnbjD6Xjmqzasu4ZtiDHmO4sBaRa" data-partner-attribution-id="APPLEPAY"
    ></script>

    <link
    href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css"
    rel="stylesheet"
    integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3"
    crossorigin="anonymous"
  />

  </head>
  <body>
    <div class="container">
      <h3>Sample Applepay Integration</h3>
      <h6>Basic Integration (no amount breakdown / no shipping)</h6>
      <div id="applepay-container"></div>

      <div><i> You wont be charged any money. Try with Apple Pay Test Cards on Sandbox. You can find them <a target="_blank" href="https://developer.apple.com/apple-pay/sandbox-testing/">here</a></i></div>
    </div>
    <script src="app.js"></script>
  </body>
</html>
