paymentrequest-api-example/index.html at master · slogsdon/paymentrequest-api-example · 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
<!DOCTYPE html>
<html lang="en">
  <head>
    <title>PaymentRequest API Example</title>
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <link rel="icon" type="image/png" href="https://shane.logsdon.io/paymentrequest-api-example/heartlandlogo.png" />
  </head>
  <body>
    <img src="heartlandlogo.png">

    <h1>PaymentRequest API Example</h1>

    <div><button id="buyButton">Buy</button></div>
    <div><pre id="result"></pre></div>

    <script>
      /**
       * Invokes PaymentRequest for credit cards.
       */
      function createPaymentRequest() {
        var supportedInstruments = [
          {
            supportedMethods: ['basic-card']
          }
          ,
          {
            supportedMethods: [
              'https://google.com/pay'
            ],
            data: {
              merchantName: 'Pay with Google Demo',
              // Place your own Pay with Google merchant ID here. The merchant ID is tied to
              // the origin of the website.
              merchantId: '10490697845843384566',
              // If you do not yet have a merchant ID, uncomment the following line.
              environment: 'TEST',
              apiVersion: 1,
              allowedPaymentMethods: ['CARD', 'TOKENIZED_CARD'],
              paymentMethodTokenizationParameters: {
                tokenizationType: 'PAYMENT_GATEWAY',
                parameters: {
                  'gateway': 'globalpayments',
                  'gatewayMerchantId': 'heartlandgpsandbox'
                }
              },
              cardRequirements: {
                allowedCardNetworks: ['AMEX', 'DISCOVER', 'MASTERCARD', 'VISA'],
                billingAddressRequired: true,
                billingAddressFormat: 'MIN'
              },
              phoneNumberRequired: true,
              emailRequired: true,
              shippingRequired: false
            }
          }
        ];

        var details = {
          total: {label: 'Donation', amount: {currency: 'USD', value: '1.00'}},
          displayItems: [
            {
              label: 'Original donation amount',
              amount: {currency: 'USD', value: '2.00'}
            },
            {
              label: 'Friends and family discount',
              amount: {currency: 'USD', value: '-1.00'}
            }
          ]
        };

        var options = {
          requestShipping: false,
          requestPayerEmail: true,
          requestPayerPhone: true,
          requestPayerName: true
        };

        return new PaymentRequest(supportedInstruments, details, options); // eslint-disable-line no-undef
      }

      function onBuyClicked() {
        createPaymentRequest()
            .show()
            .then(function(response) {
              console.log(response);
              sendPaymentToServer(response);
            })
            .catch(function(err) {
              console.log(err);
            });
      }

      /**
       * Simulates processing the payment data on the server.
       *
       * @param {PaymentResponse} instrumentResponse The payment information to
       * process.
       */
      function sendPaymentToServer(response) {
        // There's no server-side component of these samples. Not transactions are
        // processed and no money exchanged hands. Instantaneous transactions are not
        // realistic. Add a 2 second delay to make it seem more real.
        window.setTimeout(function() {
          response.complete('success')
              .then(function() {
                document.getElementById('result').innerHTML =
                    instrumentToJsonString(response);
              })
              .catch(function(err) {
                console.log(err);
              });
        }, 2000);
      }

      /**
       * Converts the payment instrument into a JSON string.
       *
       * @private
       * @param {PaymentResponse} instrument The instrument to convert.
       * @return {string} The JSON string representation of the instrument.
       */
      function instrumentToJsonString(response) {
        // var details = response.details;
        // details.cardNumber = 'XXXX-XXXX-XXXX-' + details.cardNumber.substr(12);
        // details.cardSecurityCode = '***';

        // PaymentInsrument is an interface, but JSON.stringify works only on
        // dictionaries.
        return JSON.stringify(response.toJSON(), undefined, 2);
      }

      var buyButton = document.getElementById('buyButton');
      if ('PaymentRequest' in window) {
        var request = createPaymentRequest();
        request.canMakePayment()
          .then(function (result) {
            if (result) {
              buyButton.setAttribute('style', 'display: inline;');
              buyButton.addEventListener('click', onBuyClicked);
            } else {
              alert('Issue creating payment request');
            }
          })
          .catch(function (error) {
            alert('cannot check if Google Pay is available');
          });
      } else {
        buyButton.setAttribute('style', 'display: none;');
        alert('This browser does not support web payments');
      }
    </script>
  </body>
</html>