web stripe.js demo - qingqinggit/- GitHub Wiki
1.首先在index.html中加入
<script src="https://js.stripe.com/v3/"></script>2.初始化
getStripe(){
var temp = this;
// Create a Stripe client.
if(typeof(this.$refs.cardElement)=='undefined')return;
this.stripe = Stripe('pk_test_g6do5S237ekq10r65BnxO6S0');
// Create an instance of Elements.
var elements = this.stripe.elements({locale:'en'});
// Custom styling can be passed to options when creating an Element.
// (Note that this demo uses a wider set of styles than the guide below.)
var style = {
base: {
color: '#32325d',
lineHeight: '18px',
fontFamily: '"Helvetica Neue", Helvetica, sans-serif',
fontSmoothing: 'antialiased',
fontSize: '16px',
'::placeholder': {
color: '#aab7c4'
}
},
invalid: {
color: '#fa755a',
iconColor: '#fa755a'
}
};
// Create an instance of the card Element.
this.stripcard = elements.create('card', {hidePostalCode:true,style: style});
// Add an instance of the card Element into the card-element
this.stripcard.mount('#card-element');
//card.mount(cardElement);
// Handle real-time validation errors from the card Element.
this.stripcard.addEventListener('change', function(event) {
temp.card.stripeComplete = event.complete ;
var displayError = document.getElementById('card-errors');
if (event.error) {
displayError.textContent = event.error.message;
temp.canFlag = true ;
} else {
displayError.textContent = '';
}
});
},
3.调用获取tocken值
function getResult(){
this.stripe.createToken(this.stripcard).then(function(result) {
if (result.error) {
var errorElement = document.getElementById('card-errors');
errorElement.textContent = result.error.message;
temp.canFlag= true;
return ;
} else {
params.stripe_token = result.token.id;
params.card_number = result.token.card.last4;
params.card_type = result.token.card.brand;
params.expire_date = result.token.card.exp_month+'/'+String(result.token.card.exp_year).substring(2);
}
});
}