Process a Payment

1
  runner.tokenize((res) => {
2
    
3
    // Collect transaction parameters from your payment form
4
    var extraDetails = {
5
      mid: 1234567890, // Your Sandbox MID
6
      amount: 10000,
7
      name: 'John Doe',
8
      email: 'noreply@runpayments.io',
9
      phone: '5555555555',
10
      address1: '101 Independence Mall W',
11
      address2: '',
12
      city: 'Philadelphia',
13
      region: 'PA',
14
      country: 'US',
15
      account_zip: '19106',
16
      address_country: 'USA',
17
      capture: 'Y', // Y - auth and charge ‘N’ - just auth
18
      vault: 'Y', // Y - return vault_id in successful response - stores customer and card info in a vault object; N - does not store card/customer data
19
      com_ind: 'E',
20
      cvn: 000,
21
      currency: 'USD'
22
    }
23
24
    // Convert payment object params to JSON object
25
    var params = JSON.stringify({
26
      ...extraDetails,
27
      account_token: res.account_token, // card number tokenized
28
      expiration: res.expiry,           // expiration
29
    });
30
  }
31
      

1
  runner.tokenize((res) => {
2
    // Construct the call to your backend with Payments API data.
3
    var xhr = new XMLHttpRequest();
4
    xhr.open(”POST”, “https://example.com/charge”, true); // Your backend endpoint
5
    xhr.setRequestHeader('Content-Type', 'application/json');
6
7
    xhr.onerror = function (err) {
8
      // Error handling for Payments API call
9
      errorElement.textContent = typeof err === 'object' ? (err && err.error) || Object.keys(err).map((k) => err[k].join(' ')).join(' ') : JSON.stringify(err);
10
      errorElement.classList.add('visible');
11
      loaderElement.classList.remove('visible');
12
    };
13
14
    // Collect transaction parameters from your payment form
15
    var extraDetails = {
16
      mid: 1234567890, // Your Sandbox MID
17
      amount: 10000,
18
      name: 'John Doe',
19
      email: 'noreply@runpayments.io',
20
      phone: '5555555555',
21
      address1: '101 Independence Mall W',
22
      address2: '',
23
      city: 'Philadelphia',
24
      region: 'PA',
25
      country: 'US',
26
      account_zip: '19106',
27
      address_country: 'USA',
28
      capture: 'Y', // Y - auth and charge ‘N’ - just auth
29
      vault: 'Y', // Y - return vault_id in successful response - stores customer and card info in a vault object; N - does not store card/customer data
30
      com_ind: 'E',
31
      cvn: 000,
32
      currency: 'USD'
33
    }
34
35
    // Convert all payment object params to JSON object
36
    var params = JSON.stringify({
37
      ...extraDetails,
38
      account_token: res.account_token, // card number tokenized
39
      expiration: res.expiry,           // expiration
40
    });
41
42
    // Parse the transaction response details
43
    xhr.onreadystatechange = function() {
44
      if (xhr.readyState == XMLHttpRequest.DONE) {
45
        var resp = JSON.parse(xhr.responseText);
46
47
        if (resp['trans_id']) { // successful resp returns trans_id identifier
48
          successElement.querySelector('.token').textContent = resp['trans_id'];
49
        } else {
50
        // Failed transaction error-handling here...
51
        }
52
      }
53
    }
54
55
    // Send transaction to Payments API
56
    xhr.send(params);
57
58
  })};
59