PCP-client-javascript-SDK/paypal-demo/index.html at master · PAYONE-GmbH/PCP-client-javascript-SDK · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
<!doctype html>
<html lang="en">
  <head>
    <title>PayPal Demo</title>
    <style>
      header svg {
        width: 100px;
      }

      #paypal-button-container {
        width: 300px;
        margin: 20px 0;
      }

      .message-container {
        margin-top: 20px;
        padding: 10px;
        border: 1px solid #ddd;
        border-radius: 4px;
        min-height: 50px;
      }

      .error {
        color: red;
      }

      .success {
        color: green;
      }
    </style>
  </head>
  <body>
    <header>
      <h1>
        <svg id="payone" viewBox="0 0 100 25">
          <defs>
            <clipPath id="Clip_1">
              <path d="M0,0 L100,0 L100,25 L0,25 z" />
            </clipPath>
          </defs>
          <g clip-path="url(#Clip_1)">
            <path
              d="M8.773,7.492 L8.773,17.526 C8.773,18.217 9.272,18.715 9.963,18.715 C10.672,18.715 11.171,18.217 11.171,17.526 L11.171,14.533 L13.109,14.533 C16.102,14.533 18.078,12.903 18.078,10.427 C18.078,7.972 16.12,6.36 13.147,6.36 L9.885,6.36 C9.234,6.36 8.773,6.821 8.773,7.492 M11.152,8.49 L13.339,8.49 C14.663,8.49 15.545,9.258 15.545,10.427 C15.545,11.617 14.663,12.404 13.339,12.404 L11.152,12.404 z M30.618,16.912 L26.819,7.837 C26.359,6.725 25.88,6.284 24.901,6.284 C23.923,6.284 23.443,6.725 22.982,7.837 L19.164,16.95 C18.743,17.967 19.164,18.715 20.048,18.715 C20.795,18.734 21.122,18.331 21.429,17.545 L21.978,16.196 L27.688,16.196 L28.22,17.526 C28.527,18.331 29.007,18.734 29.697,18.715 C30.599,18.715 31.06,17.967 30.618,16.912 M26.826,14.066 L22.826,14.066 L24.825,9.085 z M41.762,8.029 L37.83,14.571 L37.83,17.526 C37.83,18.217 37.331,18.715 36.64,18.715 C35.93,18.715 35.431,18.217 35.431,17.526 L35.431,14.571 L31.595,8.164 C31.019,7.205 31.556,6.284 32.535,6.284 C33.206,6.284 33.513,6.706 33.781,7.185 L36.679,12.078 L39.498,7.3 C39.883,6.686 40.209,6.284 40.88,6.284 C41.877,6.284 42.281,7.205 41.762,8.029 M60.444,18.898 C56.934,18.898 54.075,16.02 54.075,12.509 C54.075,8.961 56.934,6.101 60.444,6.101 C63.954,6.101 66.814,8.979 66.814,12.528 C66.814,16.039 63.954,18.898 60.444,18.898 M60.444,8.481 C58.353,8.481 56.646,10.284 56.646,12.509 C56.646,14.716 58.353,16.519 60.444,16.519 C62.555,16.519 64.262,14.716 64.262,12.528 C64.262,10.303 62.555,8.481 60.444,8.481 M80.429,7.483 L80.429,17.229 C80.429,18.149 79.911,18.726 79.106,18.726 C78.183,18.726 77.724,18.227 77.148,17.421 L72.103,10.476 L72.103,17.517 C72.103,18.207 71.604,18.705 70.913,18.705 C70.203,18.705 69.704,18.207 69.704,17.517 L69.704,7.79 C69.704,6.83 70.241,6.274 71.105,6.274 C71.93,6.274 72.39,6.735 72.928,7.56 L78.031,14.677 L78.031,7.483 C78.031,6.792 78.529,6.294 79.221,6.294 C79.93,6.294 80.429,6.792 80.429,7.483 M85.165,6.352 L91.016,6.352 C91.688,6.352 92.148,6.812 92.148,7.483 C92.148,8.155 91.688,8.596 91.016,8.596 L86.451,8.596 L86.451,11.32 L90.25,11.32 C90.921,11.32 91.381,11.781 91.381,12.451 C91.381,13.104 90.921,13.584 90.25,13.584 L86.451,13.584 L86.451,16.384 L91.016,16.384 C91.688,16.384 92.148,16.845 92.148,17.536 C92.148,18.188 91.688,18.648 91.016,18.648 L85.165,18.648 C84.514,18.648 84.053,18.169 84.053,17.517 L84.053,7.483 C84.053,6.812 84.514,6.352 85.165,6.352 M97.898,18.999 C97.898,19.647 97.711,22.88 94.001,22.897 L43.204,22.897 C44.327,21.895 45.233,20.597 45.898,19.037 L51.441,6.039 C51.72,5.387 53.296,2.133 57.033,2.102 L94.001,2.102 C94.646,2.102 97.871,2.289 97.898,6 z M37.598,22.897 L6,22.897 C5.354,22.897 2.128,22.709 2.102,18.998 L2.102,6 C2.102,5.355 2.29,2.134 6.007,2.102 L51.608,2.102 C50.548,3.097 49.673,4.395 49.006,5.96 L43.461,18.959 C42.996,20.048 41.036,22.881 37.598,22.897 M99.999,5.992 C99.983,3.766 98.701,0 94,0 L5.993,0 C3.767,0.018 -0,1.303 -0,6 L-0,19.006 C0.016,21.232 1.297,24.999 6,24.999 L94.005,24.999 C96.232,24.989 100,23.713 100,18.998 z"
              fill="var(--cp-icon-highlight, #0096d6)" />
          </g>
        </svg>
        PayPal Demo
      </h1>
    </header>

    <script type="module" src="src/main.ts"></script>

    <div>
      <h2>PayPal Payment Integration</h2>
      <div id="paypal-button-container"></div>

      <div class="message-container">
        <div id="message" class="success"></div>
        <div id="error" class="error"></div>
      </div>
    </div>
  </body>
</html>