vue-stripe-node/index.html at master · infinite-industries/vue-stripe-node · 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
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>Demo Stripe-Vue-Node</title>
    <script src="https://unpkg.com/vue@2.0.1/dist/vue.js"></script>
    <script src="https://unpkg.com/vue-resource@1.0.3/dist/vue-resource.min.js"></script>
    <script src="https://checkout.stripe.com/checkout.js"></script>
  </head>
  <body>
    <div id="app">
      <h1>Test Item 2 Sell</h1>
      <img src="https://unsplash.it/300" />
      <p style="max-width:300px">Magna minim tempor eiusmod reprehenderit cillum adipisicing elit incididunt. Minim ex incididunt anim consequat nisi aute do mollit. Ipsum proident esse consectetur anim ullamco dolor id labore magna incididunt enim occaecat ut aute sit magna.</p>
      <p>${{price / 100}}</p>
      <button @click.prevent="purchaseStuff()">PURCHASE</button>
      <h3>Order Status {{order_status}}</h3>
    </div>

    <script>

      var myApp= new Vue({
        el:'#app',
        data:{
          stripe_token: {},
          price: 999,
          stripe_instance: {},
          order_status: 'READY'
        },
        mounted: function(){
          this.stripe_instance = StripeCheckout.configure({
            key: 'pk_test_AnN5EyTAXijWCz9NbgpDpGX4',    //put your own publishable key here
            image: 'https://stripe.com/img/documentation/checkout/marketplace.png',
            locale: 'auto',
            token: function(token) {
              console.log('got a token. sending data to localhost');
              myApp.stripe_token= token;
              myApp.sendData2Server();
            }
          });
        },
        methods:{
          purchaseStuff: function(){
            this.stripe_instance.open({
              name: 'INFINITE INDUSTRIES',
              description: 'stuff and stuff',
              amount: this.price
            })
            console.log('attempting to get a token');
          },
          sendData2Server: function(){
            console.log(this.stripe_token);
            this.order_status= "PENDING";

            this.$http.post('/process_payment', {token_id: this.stripe_token.id, price: this.price})
              .then((response) => {
                console.log(response.body);
                this.order_status= "SUCCESSFULLY COMPLETED";
              },(response) => {
                // error callback
                console.log(response.body);
                this.order_status= "FAILED";
              });
          }
        }
      })
    </script>
  </body>
</html>