paymentjs-integration-nodejs/index.html at master · GBSEcom/paymentjs-integration-nodejs · 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
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>pjs2basic</title>
  <link href="/styles.css" rel="stylesheet">
</head>
<body>
  <div class="container">
    <div class="status">&nbsp;</div>

    <!-- Note: no action needed here since it's setup via javascript -->
    <!-- Note: no input fields shown in this block because they are injected by the client library -->
    <form id="form">
      <div>
        <!-- Note: this is the label for the card number field -->
        <label for="cc-card" class="control-label">Card Number</label>

        <!-- Note: the card number iframe will be injected inside here -->
        <div class="form-controls payment-fields disabled empty" id="cc-card" data-cc-card></div>
      </div>

      <div>
        <!-- Note: this is the label for the cardholder name field -->
        <label for="cc-name" class="control-label">Card Holder Name</label>

        <!-- Note: the cardholder name iframe will be injected inside here -->
        <div class="form-controls payment-fields disabled" id="cc-name" data-cc-name></div>
      </div>

      <div class="col1">
        <!-- Note: this is the label for the card expiration date field-->
        <label for="cc-exp" class="control-label">Exp Date</label>

        <!-- Note: the expiration date iframe will be injected inside here -->
        <div class="form-controls payment-fields disabled empty" id="cc-exp" data-cc-exp></div>
      </div>

      <div class="col2">
        <!-- Note: this is the label for the card security code field-->
        <label for="cc-cvv" class="control-label">CVV</label>

        <!-- Note: the security code iframe will be injected inside here -->
        <div class="form-controls payment-fields disabled empty" id="cc-cvv" data-cc-cvv></div>
      </div>

      <!-- Note: this will trigger the submission flow -->
      <button id="submit" class="btn--primary disabled-bkg" data-submit-btn disabled>
        <!-- Note: this is for the loading animation -->
        <span class="btn__loader" style="display:none;">loading...</span>Pay <span data-card-type></span>
      </button>
    </form>
  </div>

  <!-- Note: client library attached here -->
  <script src="https://lib.paymentjs.firstdata.com/uat/client-2.0.0.js"></script>

  <!-- Note: implementation specific javascript file attached here -->
  <script type="text/javascript" src="/client.js"></script>
</body>
</html>