Skip to content

Instantly share code, notes, and snippets.

@Francismori7
Created June 4, 2017 22:38
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save Francismori7/36c1b3271e66d879f1abf876b6bf786a to your computer and use it in GitHub Desktop.
Save Francismori7/36c1b3271e66d879f1abf876b6bf786a to your computer and use it in GitHub Desktop.
Stripe Elements
import Vue from 'vue';
const app = new Vue({
el: '#app',
created() {
window.stripe = Stripe(window.EventManager.stripe.key);
this.mapBillingElements();
},
methods: {
mapBillingElements() {
var elements = stripe.elements();
window.card = elements.create('card');
window.card.mount('#card-element');
},
handleBillingForm(event) {
console.log(event, window.card);
stripe.createToken(window.card);
}
}
});
[...]
<form action="/dashboard/billing" method="post" id="payment-form"
@submit.prevent="handleBillingForm">
{{ csrf_field() }}
{{ method_field('patch') }}
<div class="form-group">
<label for="card-element">
{{ __('Credit Card') }}
</label>
<div id="card-element" class="form-control" ref="card">
<!-- a Stripe Element will be inserted here. -->
</div>
<!-- Used to display form errors -->
<div id="card-errors" class="form-text text-muted" role="alert"></div>
</div>
<input type="submit" class="btn btn-primary" value="{{ __('Save billing details') }}">
</form>
[...]
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment