dom-examples/payment-request/feature-detect-support.html at main · mdn/dom-examples · 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
<!DOCTYPE html>
<html lang=en>
<head>
  <meta charset="UTF-8">
  <title>Feature Detect Support for Payment Request API</title>
  <!--
    If the user's browser supports PaymentRequest, the merchant page updates
    the checkout button to use PaymentRequest instead of using legacy web forms.
  -->
  <meta name="viewport" content="width=device-width">
  <style>
    #success,
    #legacy {
      display: none;
    }
  </style>
</head>
<body>

  <h1>Feature Detect Support for Payment Request API</h1>

  <div id="intro">
    <p>
      This example shows how a legacy checkout form can be replaced by a Payment Request
      - only for browsers that support it - using:
      <code>if (window.PaymentRequest) { ... }</code>.
    </p>
    <p>
      For the purposes of the demo, imagine you have chosen an item and now you need to
      check out. Please note that no payments will be taken, this is just a front-end
      demo. If you would like to try entering card details, you can use dummy data,
      for example the card number <code>4111 1111 1111 1111</code>.
    </p>

    <button id="checkout-button">Checkout</button>
  </div>

  <div id="success">
    <p>
      Payment Request success. Demo complete. No payment has been taken.
    </p>
  </div>

  <div id="legacy">
    <p>
      The Payment Request API is unsupported or was cancelled or failed,
      so here we can proceed with our legacy web form (not implemented for this demo).
    </p>
  </div>

  <script type="text/javascript">

    var checkoutButton = document.getElementById('checkout-button');
    var introPanel = document.getElementById('intro');
    var successPanel = document.getElementById('success');
    var legacyPanel = document.getElementById('legacy');

    // Feature detection
    if (window.PaymentRequest) {

      // Payment Request is supported in this browser, so we can proceed to use it

      checkoutButton.addEventListener('click', function() {
        // Every click on the checkout button should use a new instance of PaymentRequest
        // object, because PaymentRequest.show() can be called only once per instance.
        var request = new PaymentRequest(buildSupportedPaymentMethodData(),
          buildShoppingCartDetails());

        request.show().then(function(paymentResponse) {
          // Here we would process the payment. For this demo, simulate immediate success:
          paymentResponse.complete('success')
          .then(function() {
              // For demo purposes:
              introPanel.style.display = 'none';
              successPanel.style.display = 'block';
            });

        }).catch(function(error) {
          // Handle cancelled or failed payment. For demo purposes:
          introPanel.style.display = 'none';
          legacyPanel.style.display = 'block';

        });
      });
    } else {

      // Payment Request is unsupported
      checkoutButton.addEventListener('click', function() {
        // For demo purposes:
        introPanel.style.display = 'none';
        legacyPanel.style.display = 'block';
      });
    }

    function buildSupportedPaymentMethodData() {
      // Example supported payment methods:
      return [{
        supportedMethods: 'basic-card',
        data: {
          supportedNetworks: ['visa', 'mastercard'],
          supportedTypes: ['debit', 'credit']
        }
      }];
    }

    function buildShoppingCartDetails() {
      // Hardcoded for demo purposes:
      return {
        id: 'order-123',
        displayItems: [
          {
            label: 'Example item',
            amount: {currency: 'USD', value: '1.00'}
          }
        ],
        total: {
          label: 'Total',
          amount: {currency: 'USD', value: '1.00'}
        }
      };
    }
  </script>
</body>
</html>