opentelecom.github.io/stripe_checkout_member_subscribe.html at master · OpenTelecom/opentelecom.github.io · 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
---
layout: default
---

<div class="home">

  <!-- Load Stripe.js on your website. -->
<script src="https://js.stripe.com/v3"></script>

<!-- Create a button that your customers click to complete their purchase. Customize the styling to suit your branding. -->
<button
  style="background-color:#6772E5;color:#FFF;padding:8px 12px;border:0;border-radius:4px;font-size:1em"
  id="checkout-button-Silver1to4Emp"
  role="link"
>
 Signup: OTF Silver Member (1-4 Employees)
  </button>

<div id="error-message"></div>

<script>
  var stripe = Stripe('pk_live_p5tdou9B8fTrkpO8UjcwlFOG');

  var checkoutButton = document.getElementById('checkout-button-Silver1to4Emp');
  checkoutButton.addEventListener('click', function () {
    // When the customer clicks on the button, redirect
    // them to Checkout.
    stripe.redirectToCheckout({
      items: [{plan: 'Silver1to4Emp', quantity: 1}],

      // Do not rely on the redirect to the successUrl for fulfilling
      // purchases, customers may not always reach the success_url after
      // a successful payment.
      // Instead use one of the strategies described in
      // https://stripe.com/docs/payments/checkout/fulfillment
      successUrl: 'https://opentelecom.foundation/stripe_checkout_success.html',
      cancelUrl: 'https://opentelecom.foundation/stripe_checkout_cancelled.html',
    })
    .then(function (result) {
      if (result.error) {
        // If `redirectToCheckout` fails due to a browser or network
        // error, display the localized error message to your customer.
        var displayError = document.getElementById('error-message');
        displayError.textContent = result.error.message;
      }
    });
  });
</script>


<br><br><br>

<!-- Load Stripe.js on your website. -->
<script src="https://js.stripe.com/v3"></script>

<!-- Create a button that your customers click to complete their purchase. Customize the styling to suit your branding. -->
<button
  style="background-color:#6772E5;color:#FFF;padding:8px 12px;border:0;border-radius:4px;font-size:1em"
  id="checkout-button-Silver5to19emps"
  role="link"
>
 Signup: OTF Silver Member (5-19 Employees)
</button>

<div id="error-message"></div>

<script>
  var stripe = Stripe('pk_live_p5tdou9B8fTrkpO8UjcwlFOG');
  var checkoutButton = document.getElementById('checkout-button-Silver5to19emps');
  checkoutButton.addEventListener('click', function () {
    // When the customer clicks on the button, redirect
    // them to Checkout.
    stripe.redirectToCheckout({
      items: [{plan: 'Silver5to19emps', quantity: 1}],
      // Do not rely on the redirect to the successUrl for fulfilling
      // purchases, customers may not always reach the success_url after
      // a successful payment.
      // Instead use one of the strategies described in
      // https://stripe.com/docs/payments/checkout/fulfillment
      successUrl: 'https://opentelecom.foundation/stripe_checkout_success.html',
      cancelUrl: 'https://opentelecom.foundation/stripe_checkout_cancelled.html',
    })
    .then(function (result) {
      if (result.error) {
        // If `redirectToCheckout` fails due to a browser or network
        // error, display the localized error message to your customer.
        var displayError = document.getElementById('error-message');
        displayError.textContent = result.error.message;
      }
    });
  });
</script>


<br><br><br>

  <!-- Load Stripe.js on your website. -->
<script src="https://js.stripe.com/v3"></script>

<!-- Create a button that your customers click to complete their purchase. Customize the styling to suit your branding. -->
<button
  style="background-color:#6772E5;color:#FFF;padding:8px 12px;border:0;border-radius:4px;font-size:1em"
  id="checkout-button-plan_FYAYSXnBVpoQnc"
  role="link"
>
   Signup: OTF Silver Member (20-99 Employees)
</button>

<div id="error-message"></div>

<script>
  var stripe = Stripe('pk_live_p5tdou9B8fTrkpO8UjcwlFOG');

  var checkoutButton = document.getElementById('checkout-button-plan_FYAYSXnBVpoQnc');
  checkoutButton.addEventListener('click', function () {
    // When the customer clicks on the button, redirect
    // them to Checkout.
    stripe.redirectToCheckout({
      items: [{plan: 'plan_FYAYSXnBVpoQnc', quantity: 1}],

      // Do not rely on the redirect to the successUrl for fulfilling
      // purchases, customers may not always reach the success_url after
      // a successful payment.
      // Instead use one of the strategies described in
      // https://stripe.com/docs/payments/checkout/fulfillment
      successUrl: 'https://opentelecom.foundation/stripe_checkout_success.html',
      cancelUrl: 'https://opentelecom.foundation/stripe_checkout_cancelled.html',
    })
    .then(function (result) {
      if (result.error) {
        // If `redirectToCheckout` fails due to a browser or network
        // error, display the localized error message to your customer.
        var displayError = document.getElementById('error-message');
        displayError.textContent = result.error.message;
      }
    });
  });
</script>


</div>