dom-examples/payment-request/customize-button-can-make-payment.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
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
<!DOCTYPE html>
<html lang=en>
<head>
  <meta charset="UTF-8">
  <title>Customize the Payment Request Button Depending on Whether User Can Make Payments</title>
  <!--
    Depending on whether the user can make a fast payment or needs to add payment credentials
    first, the title of the checkout button changes between "Fast Checkout with W3C" and
    "Setup W3C Checkout". In both cases, the checkout button calls PaymentRequest.show().
  -->
  <meta name="viewport" content="width=device-width">
  <style>
    #success,
    #legacy {
      display: none;
    }
  </style>
</head>
<body>

  <h1>Customize the Payment Request Button Depending on Whether User Can Make Payments</h1>

  <div id="intro">
    <p>
      In this example, depending on whether the user can make a fast payment or needs to add
      payment credentials first, the title of the checkout button changes between
      "W3C Checkout" and "Fast W3C Checkout". This is determined using
      <code>PaymentRequest.canMakePayment()</code>. In both cases, the checkout button calls
      <code>PaymentRequest.show()</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.
      Here we can proceed with a fallback (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

      var request = new PaymentRequest(buildSupportedPaymentMethodData(),
        buildShoppingCartDetails());

      request.canMakePayment().then(function(canMakeAFastPayment) {
        if (canMakeAFastPayment) {
          checkoutButton.innerText = 'Fast W3C Checkout';
        } else {
          checkoutButton.innerText = 'W3C Checkout';
        }
      }).catch(function(error) {
        // The user may have turned off the querying functionality in their privacy settings.
        // We do not know whether they can make a fast payment, so pick a generic title.
        checkoutButton.innerText = 'W3C Checkout';
      });

      checkoutButton.addEventListener('click', function() {

        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>