从纯javascript访问Vue道具
我在我的应用程序中实现了Stripe，Stripe文档只显示普通的JS，因此我将Stripe API调用放在从纯javascript访问Vue道具,javascript,vue.js,stripe-payments,Javascript,Vue.js,Stripe Payments,我在我的应用程序中实现了Stripe，Stripe文档只显示普通的JS，因此我将Stripe API调用放在script标记中，没有任何Vue方法。到目前为止，一切进展顺利。我正在从父组件向下传递道具，无法从脚本内部访问道具 一些Stripe文档说要在HTML呈现后实现JS，所以我使用mounted方法来实现其中一些。有什么办法让它工作吗 我曾尝试将API调用放在一个方法中，并在表单上的单击事件上调用该方法，但当我这样做时，它不知道Stripe使用的标记是什么 在代码的底部，您可以看到我在哪里尝
scriptmounted单击事件上调用该方法，但当我这样做时，它不知道Stripe使用的标记是什么
在代码的底部，您可以看到我在哪里尝试获取道具中的this.plan
<template>
<form method="post" id="payment-form">
<h4 class="h4Spacing">Billing Information</h4>
<div class="form-group">
<b-form-input type="email" class="form-control" id="email" placeholder="Email Address"/>
</div>
<div class="form-group">
<b-form-input type="text" class="form-control" id="name_on_card" name="name" placeholder="Name on Card"/>
</div>
<div class="form-group">
<b-form-input type="text" class="form-control" id="address" name="address_line1" placeholder="Address"/>
</div>
<div class="form-group">
<b-form-input type="text" class="form-control" id="city" name="address_city" placeholder="City"/>
</div>
<div class="form-group">
<b-form-input type="text" class="form-control" id="state" placeholder="State"/>
</div>
<div class="form-group">
<div id="card-element" class="form-control">
<!-- A Stripe Element will be inserted here. -->
</div>
<div v-if="successful">
<h3 class="title" data-tid="elements_examples.success.title">Payment successful</h3>
<p class="message"><span data-tid="elements_examples.success.message">Thanks for trying Stripe Elements. No money was charged, but we generated a token: </span><span class="token">tok_189gMN2eZvKYlo2CwTBv9KKh</span></p>
<a class="reset" href="#">
<svg width="32px" height="32px" viewBox="0 0 32 32" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<path fill="#000000" d="M15,7.05492878 C10.5000495,7.55237307 7,11.3674463 7,16 C7,20.9705627 11.0294373,25 16,25 C20.9705627,25 25,20.9705627 25,16 C25,15.3627484 24.4834055,14.8461538 23.8461538,14.8461538 C23.2089022,14.8461538 22.6923077,15.3627484 22.6923077,16 C22.6923077,19.6960595 19.6960595,22.6923077 16,22.6923077 C12.3039405,22.6923077 9.30769231,19.6960595 9.30769231,16 C9.30769231,12.3039405 12.3039405,9.30769231 16,9.30769231 L16,12.0841673 C16,12.1800431 16.0275652,12.2738974 16.0794108,12.354546 C16.2287368,12.5868311 16.5380938,12.6540826 16.7703788,12.5047565 L22.3457501,8.92058924 L22.3457501,8.92058924 C22.4060014,8.88185624 22.4572275,8.83063012 22.4959605,8.7703788 C22.6452866,8.53809377 22.5780351,8.22873685 22.3457501,8.07941076 L22.3457501,8.07941076 L16.7703788,4.49524351 C16.6897301,4.44339794 16.5958758,4.41583275 16.5,4.41583275 C16.2238576,4.41583275 16,4.63969037 16,4.91583275 L16,7 L15,7 L15,7.05492878 Z M16,32 C7.163444,32 0,24.836556 0,16 C0,7.163444 7.163444,0 16,0 C24.836556,0 32,7.163444 32,16 C32,24.836556 24.836556,32 16,32 Z"></path>
</svg>
</a>
<div class="caption">
<span data-tid="elements_examples.caption.no_charge" class="no-charge">Your card won't be charged</span>
<a class="source" href="https://github.com/stripe/elements-examples/#example-1">
<svg width="16px" height="10px" viewBox="0 0 16 10" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<path d="M1,8 L12,8 C12.5522847,8 13,8.44771525 13,9 C13,9.55228475 12.5522847,10 12,10 L1,10 C0.44771525,10 6.76353751e-17,9.55228475 0,9 C-6.76353751e-17,8.44771525 0.44771525,8 1,8 L1,8 Z M1,4 L8,4 C8.55228475,4 9,4.44771525 9,5 C9,5.55228475 8.55228475,6 8,6 L1,6 C0.44771525,6 6.76353751e-17,5.55228475 0,5 C-6.76353751e-17,4.44771525 0.44771525,4 1,4 L1,4 Z M1,0 L15,0 C15.5522847,-1.01453063e-16 16,0.44771525 16,1 L16,1 C16,1.55228475 15.5522847,2 15,2 L1,2 C0.44771525,2 6.76353751e-17,1.55228475 0,1 L0,1 L0,1 C-6.76353751e-17,0.44771525 0.44771525,1.01453063e-16 1,0 L1,0 Z" fill="#AAB7C4"></path>
</svg>
<span data-tid="elements_examples.caption.view_source">View source on GitHub</span>
</a>
</div>
</div>
</div>
<!-- <form action="/charge" method="post" id="payment-form">-->
<!-- <div class="form-row">-->
<!-- <label for="name"> Name </label>-->
<!-- <div id="name"></div>-->
<!-- <label for="card-element">-->
<!-- Credit or debit card-->
<!-- </label>-->
<!-- <div id="card-element">-->
<!-- <!– A Stripe Element will be inserted here. –>-->
<!-- </div>-->
<!-- <!– Used to display form errors. –>-->
<!-- <div id="card-errors" role="alert"></div>-->
<!-- </div>-->
<!-- <b-button class="space" id="payment-request-button">Submit Payment</b-button>-->
<!-- </form>-->
<b-button class="space" type="submit" >Submit Payment</b-button>
</form>
</template>
<script>
import registerElements from './stripeMethods'
// Create a Stripe client.
let stripe = Stripe('pk_test_TYooMQauvdEDq54NiTphI7jx');
// Create an instance of Elements.
let elements = stripe.elements();
// 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.)
let style = {
base: {
color: '#32325d',
fontFamily: '"Roboto", Helvetica, sans-serif',
fontSmoothing: 'antialiased',
fontSize: '16px',
},
invalid: {
color: '#fa755a',
iconColor: '#fa755a'
}
};
let card = undefined;
import Vue from 'vue';
import axios from 'axios';
import authService from '../../services/authService';
export default {
props: ['plan'],
data: function() {
return {
successful: false,
monthly: {
id: 'prod_Flp17jVPzNUfFz',
price: 25
},
annual: {
id: 'prod_Flp17jVPzNUfFz',
price: 215
}
}
},
methods: {
submitPayment: function () {
}
},
mounted() {
// Create an instance of the card Element.
let card = elements.create('card', {style: style});
// Add an instance of the card Element into the `card-element` <div>.
card.mount('#card-element');
// Handle real-time validation errors from the card Element.
card.addEventListener('change', function (event) {
let displayError = document.getElementById('card-errors');
if (event.error) {
displayError.textContent = event.error.message;
} else {
displayError.textContent = '';
}
});
// Handle form submission.
let form = document.getElementById('payment-form');
form.addEventListener('submit', function (event) {
console.log(event);
event.preventDefault();
stripe.createToken(card).then(function (result) {
if (result.error) {
// Inform the user if there was an error.
let errorElement = document.getElementById('card-errors');
errorElement.textContent = result.error.message;
} else {
// Send the token to your server.
stripeTokenHandler(result.token);
return result.token
}
}).then(function (result) {
console.log(result);
axios({
method: "POST",
url: '/api/checkout',
headers: {
Authorization: `Bearer ${authService.idToken}`,
},
data: {
subscription: result.id,
plan: this.plan <----------------------------------- not working
},
}).then(function (res) {
// alert("It went through! How? ")
}).catch(function (err) {
console.log(err)
});
});
});
// Submit the form with the token ID.
function stripeTokenHandler(token) {
// Insert the token ID into the form so it gets submitted to the server
let form = document.getElementById('payment-form');
let hiddenInput = document.createElement('input');
hiddenInput.setAttribute('type', 'hidden');
hiddenInput.setAttribute('name', 'stripeToken');
hiddenInput.setAttribute('value', token.id);
form.appendChild(hiddenInput);
}
}
}
</script>
计费信息
付款成功
感谢您尝试条带元素。没有收取任何费用，但我们生成了一个代币：tok_189gMN2eZvKYlo2CwTBv9KKh
您的卡不收费
付款
从“/stripeMethods”导入注册表项
//创建条带客户端。
设stripe=stripe（'pk_test_TYooMQauvdEDq54NiTphI7jx'）；
//创建元素的实例。
let elements=stripe.elements（）；
//创建元素时，可以将自定义样式传递给选项。
//（请注意，此演示使用的样式集比下面的指南更广泛。）
让样式={
基数：{
颜色：“#32325d”，
fontFamily:“Roboto”，Helvetica，无衬线，
fontSmoothing:'抗锯齿'，
fontSize:'16px'，
},
无效：{
颜色：“#fa755a”，
iconColor:“#fa755a”
}
};
let card=未定义；
从“Vue”导入Vue；
从“axios”导入axios；
从“../../services/authService”导入authService；
导出默认值{
道具：[“计划”]，
数据：函数（）{
返回{
成功：错，
每月：{
id:'prod_Flp17jVPzNUfFz'，
价格:25
},
年度：{
id:'prod_Flp17jVPzNUfFz'，
价格：215
}
}
},
方法：{
提交付款：功能（）{
}
},
安装的（）{
//创建卡元素的实例。
让card=elements.create（'card'，{style:style}）；
//将card元素的实例添加到“card元素”中。
卡。挂载（“#卡元素”）；
//处理来自卡元素的实时验证错误。
card.addEventListener（'change'，函数（事件）{
让displayError=document.getElementById（'card-errors'）；
if（event.error）{
displayError.textContent=event.error.message；
}否则{
displayError.textContent=''；
}
});
//处理表格提交。
让form=document.getElementById（'payment-form'）；
表单.addEventListener（'submit'，函数（事件）{
console.log（事件）；
event.preventDefault（）；
stripe.createToken（卡片）.then（函数（结果）{
if（result.error）{
//如果出现错误，请通知用户。
让errorElement=document.getElementById（'card-errors'）；
errorElement.textContent=result.error.message；
}否则{
//将令牌发送到服务器。
stripeTokenHandler（result.token）；
返回result.token
}
}).然后（函数（结果）{
控制台日志（结果）；
axios({
方法：“张贴”，
url:“/api/checkout”，
标题：{
授权：`Bearer${authService.idToken}`，
},
数据：{
订阅：result.id，
计划：this.plan这是一个范围问题，仅此而已。当您尝试访问this.plan
时，this
是对从事件侦听器执行的回调的引用。您需要声明一个分配给Vue实例的变量，以访问方法中任何位置的这些字段：
mounted() {
var vm = this;
// Create an instance of the card Element.
let card = elements.create('card', {style: style});
// Add an instance of the card Element into the `card-element` <div>.
card.mount('#card-element');
// Handle real-time validation errors from the card Element.
card.addEventListener('change', function (event) {
let displayError = document.getElementById('card-errors');
if (event.error) {
displayError.textContent = event.error.message;
} else {
displayError.textContent = '';
}
});
// Handle form submission.
let form = document.getElementById('payment-form');
form.addEventListener('submit', function (event) {
console.log(event);
event.preventDefault();
stripe.createToken(card).then(function (result) {
if (result.error) {
// Inform the user if there was an error.
let errorElement = document.getElementById('card-errors');
errorElement.textContent = result.error.message;
} else {
// Send the token to your server.
stripeTokenHandler(result.token);
return result.token
}
}).then(function (result) {
console.log(result);
axios({
method: "POST",
url: '/api/checkout',
headers: {
Authorization: `Bearer ${authService.idToken}`,
},
data: {
subscription: result.id,
plan: vm.plan <----------------------------------- not working
},
}).then(function (res) {
// alert("It went through! How? ")
}).catch(function (err) {
console.log(err)
});
});
});
mounted（）{
var vm=这个；
//创建卡元素的实例。
让card=elements.create（'card'，{style:style}）；
//将card元素的实例添加到“card元素”中。
卡。挂载（“#卡元素”）；
//处理来自卡元素的实时验证错误。
card.addEventListener（'change'，函数（事件）{
让displayError=document.getElementById（'card-errors'）；
if（event.error）{
displayError.textContent=event.error.message；
}否则{
displayError.textContent=''；
}
});
//处理表格提交。
让form=document.getElementById（'payment-form'）；
表单.addEventListener（'submit'，函数（事件）{
console.log（事件）；
event.preventDefault（）；
stripe.createToken（卡片）.then（函数（结果）{
if（result.error）{
//如果出现错误，请通知用户。
让errorElement=document.getElementById（'card-errors'）；
errorElement.textContent=result.error.message；
}否则{
//将令牌发送到服务器。
stripeTokenHandler（result.token）；
返回result.token
}
}).然后（函数（结果）{
控制台日志（结果）；
axios({
方法：“张贴”，
url:“/api/checkout”，
标题：{
授权：`Bearer${authService.idToken}`，
},
数据：{
订阅：result.id，
plan:vm.plan哦，就是这样吗？这是因为它在函数内部，在挂载的钩子内部吗？javascript处理作用域和内部函数以及其他内容的方式在很多时候隐藏了这一点。对于Vue项目，我会经常这样做，因为如果你