paystack-inline-sample/index.html at master · yabacon/paystack-inline-sample · 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
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
<!DOCTYPE html>
<html>
<head>
  <title>Provide email and Pay Now</title>
  <link href="https://www.filepicker.io/api/file/Lh5PgMCTrKBCvUNRhSKy" rel="shortcut icon" />
  <link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha/css/bootstrap.css" rel="stylesheet" />
</head>
<body onload="startUp()">
  <div class="container">
    <div class="jumbotron">
      <h1 class="display-3">Paystack inline sample</h1>
      <form class="form" id="pay-form">
        <div id="alert-holder"></div>
        <div class="text-center">
          <p>Please provide your details and click "Pay" to make your payment.</p>
        </div>
        <fieldset class="form-group row">
          <label class="col-sm-3" for="firstname">First Name</label>
          <div class=" col-sm-9">
            <input class="form-control" id="firstname" type="text" placeholder="Your First name (optional)" />
          </div>
        </fieldset>
        <fieldset class="form-group row">
          <label class="col-sm-3" for="lastname">Last Name</label>
          <div class=" col-sm-9">
            <input class="form-control" id="lastname" type="text" placeholder="Your Last name (optional)" />
          </div>
        </fieldset>
        <fieldset class="form-group row">
          <label class="col-sm-3" for="email">Email Address</label>
          <div class=" col-sm-9">
            <input class="form-control" id="email" required="required" type="email" placeholder="Your Email Address" />
          </div>
          <small class="text-muted col-sm-9 col-sm-offset-3">We'll never share your email with anyone else.</small>
        </fieldset>
        <!-- The amount box is not displayed by default. Will stay so unless the GET parameter amountinkobo is a valid integer -->
        <fieldset class="form-group row" id="amountinnaira" style="display:none">
          <label class="col-sm-3" for="amount-in-naira">Amount (in Naira)</label>
          <div class="col-sm-9">
            <div class="input-group">
              <div class="input-group-addon">&#x20a6;</div>
              <input class="form-control" id="amount-in-naira" required="required" type="number" step="100" placeholder="Amount" />
              <div class="input-group-addon">.00</div>
            </div>
          </div>
        </fieldset>
        <p class="text-center" id="static-amount">You are paying: <span id="amountinngn">0</span> naira</p>
        <fieldset class="form-group row">
          <div class="col-sm-offset-3 col-sm-9">
            <button class="btn btn-secondary" type="button" onclick="validateAndPay()"> Pay </button>
          </div>
        </fieldset>

      </form>
    </div>
  </div>
  <script src="https://js.paystack.co/v1/inline.js"></script>
  <script>
    // change this to your public key so you
    // will no more be prompted
    var public_key = '<YOU PUBLIC KEY HERE>';

    /*
     * Start up
     */
    function startUp(){
      checkAmountInKobo();
      promptForPublicKey();
    }

    /*
     * check if the public key set is valid
     *
     * @return bool
     */
    function isValidPublicKey(){
      var publicKeyPattern = new RegExp('^pk_(?:test|live)_','i');
      return publicKeyPattern.test(public_key);
    }

    /*
     * Prompt for and set public key to use
     * If public key set is not valid
     */
    function promptForPublicKey(){
      if(!isValidPublicKey()){
        // get a public key to use
        public_key = prompt("To run this sample, you need to provide a public key.\n"+
                            "Please visit https://dashboard.paystack.co/#/settings/developer to get your "+
                            "public key and enter in the box below:", "pk_xxxx_");
        // check that we got a valid public key
        // (starts with pk_live_ or pk_test_)
        if (!isValidPublicKey()) {
          var error_msg = "You didn't provide a public key. This page will not load.";
          alert(error_msg);
          document.getElementById('pay-form').innerHTML = error_msg;
        }
      }
    }
    /*
     * Validate before opening Paystack popup
     */
    function validateAndPay(){
      var email = document.getElementById('email').value;
      if(!simpleValidEmail(email)){
        alert("Please provide a valid email");
        return;
      }

      var amountinkobo = getAmountInKobo();
      if(!amountinkobo){
        alert("Please provide a valid amount");
        document.getElementById('amountinnaira').style.display="block";
        document.getElementById('static-amount').style.display="none";
        return;
      }

      // We are not validating firstname and lastname
      var firstname = document.getElementById('firstname').value;
      var lastname  = document.getElementById('lastname').value;

      payWithPaystack(email, amountinkobo, firstname, lastname);
    }

    /* Get the query parameters for this window
     *
     * source: http://stackoverflow.com/a/21210643/671568
     */
    function getParams(){
      var queryDict = {};
      location.search
        .substr(1)
        .split("&")
        .forEach(function(item) {
          queryDict[item.split("=")[0]] = item.split("=")[1];
        });
      return queryDict;
    }

    /* Check amount sent by get if it's a valid integer
     * show the amount input box if not
     */
    function checkAmountInKobo(){
      amountinkobo = getParams().amountinkobo;

      if(!simpleValidInt(amountinkobo)){
        // show the amount box since an amount was not specified by GET
        document.getElementById('amountinnaira').style.display="block";
        document.getElementById('static-amount').style.display="none";
      } else {
        document.getElementById('amountinngn').innerHTML = amountinkobo / 100;
      }
    }

    /* Get amount sent by get if it's a valid integer
     * Get the amount entered in input box  multiplied
     *  by 100. Show alert if no valid amountinkobo can be found
     */
    function getAmountInKobo(){
      amountinkobo = getParams().amountinkobo;

      if(!amountinkobo){
        amountinkobo = 100 * +document.getElementById('amount-in-naira').value;
      }

      if(!simpleValidInt(amountinkobo)){
        alert("Please provide an amount to pay");
      }

      return amountinkobo;
    }

    /* Get a random reference number based on the current time
     *
     * gotten from http://stackoverflow.com/a/2117523/671568
     * replaced UUID with REF
     */
    function generateREF(){
      var d = new Date().getTime();
      if(window.performance && typeof window.performance.now === "function"){
        d += performance.now(); //use high-precision timer if available
      }
      var ref = 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, function(c) {
        var r = (d + Math.random()*16)%16 | 0;
        d = Math.floor(d/16);
        return (c=='x' ? r : (r&0x3|0x8)).toString(16);
      });
      return ref;
    }

    /* Validate integer
     *
     * gotten from http://stackoverflow.com/a/25016143/671568
     */
    function simpleValidInt( data ) {
      if (+data===parseInt(data)) {
        return true;
      } else {
        return false;
      }
    };


    /* Validate email address
     * not meant for really secure email validation
     *
     * gotten from http://stackoverflow.com/a/28633540/671568
     * Had to correct Regex, allowing A-Za-z0-9 to repeat
     */
    function simpleValidEmail( email ) {
      return email.length < 256 && /^[^@]+@[^@]+[A-Za-z0-9]{2,}\.[^@]+[A-Za-z0-9]{2,}$/.test(email);
    };

    /* Show the paystack payment popup
     *
     * source: https://developers.paystack.co/docs/paystack-inline
     */
    function payWithPaystack(validatedemail, amountinkobo, firstname, lastname){
      var handler = PaystackPop.setup({
        key:       public_key,
        email:     validatedemail,
        firstname: firstname,
        lastname:  lastname,
        amount:    amountinkobo,
        ref:       generateREF(), // This uses a random transaction reference based
                                  // on the time the "Pay" button was clicked.
        callback:  function(response){
          // payment was received
          // clear away the form, show success message
          var msg = 'Success. The transaction reference is <b>"' + response.trxref + '"</b>';
          document.getElementById('alert-holder').innerHTML = '<div class="alert alert-success">' + msg + '</div>';
          document.getElementById("pay-form").reset();
        },
        onClose:  function(){
          // Visitor cancelled payment
          var msg = 'Cancelled. Please click the \'Pay\' button to try again';
          document.getElementById('alert-holder').innerHTML = '<div class="alert alert-danger">' + msg + '</div>';
        }
      });
      handler.openIframe();
    }
  </script>
</body>
</html>