【发布时间】：2020-05-21 17:44:17
【问题描述】：
我目前在我的网站上有一个定价页面，它使用 <select> 和 <option> html 元素让用户选择定价计划。
这是计划选择下拉菜单的代码：
<select name="plan" class="form-control" id="subscription-plan">
@foreach ($plans as $key => $plan)
<option value="{{ $key }}">{{ $plan }}</option>
@endforeach
</select>
这是表单的样子：
我想添加 2 张包含用户可以选择的计划信息的卡片，并以与下拉菜单相同的方式操作，除非它不是下拉菜单。 id="subscription-plan" 很重要，因为它将用户选择的相应计划发送到 Stripe API，后者根据 Stripe 中设置的金额向用户的信用卡收取费用。有谁知道我如何做到这一点？
我想做这样的事情（但没有下拉样式）：
<select name="plan" class="form-control" id="subscription-plan">
@foreach ($plans as $key => $plan)
<option value="{{ $key }}">
<div class="card mb-5 mb-lg-0">
<div class="card-body">
<h5 class="card-title text-muted text-uppercase text-center">Monthly</h5>
<h6 class="card-price text-center">$8.44<span class="period">/month</span></h6>
</div>
</div>
</option>
@endforeach
</select>
更新： 我试过这个：
@foreach ($plans as $key => $plan)
<div class="col-6">
<label>
<input type="radio" name="plan" value="{{ $key }}" class="card-input-element" id="subscription-plan">
<div class="panel panel-default card-input">
<div class="panel-heading">{{ $plan }}</div>
<div class="panel-body">2 Memorials</div>
</div>
</label>
</div>
@endforeach
此代码有效，并为我提供了具有可选卡的预期效果，但即使用户在选择“年度”计划后提交了他们的信用卡详细信息，Stripe API 现在也只接收“月度”计划。这是因为现在两个输入都有id="subscription-plan"。
条带化 JavaScript：
const stripe = Stripe('{{ env('STRIPE_KEY') }}');
const elements = stripe.elements();
const cardElement = elements.create('card');
cardElement.mount('#card-element');
const cardHolderName = document.getElementById('card-holder-name');
const cardButton = document.getElementById('card-button');
const clientSecret = cardButton.dataset.secret;
const plan = document.getElementById('subscription-plan').value;
cardButton.addEventListener('click', async (e) => {
const { setupIntent, error } = await stripe.handleCardSetup(
clientSecret, cardElement, {
payment_method_data: {
billing_details: { name: cardHolderName.value }
}
}
);
if (error) {
// Display "error.message" to the user...
} else {
// The card has been verified successfully...
console.log('handling success', setupIntent.payment_method);
axios.post('subscribe',{
payment_method: setupIntent.payment_method,
plan : plan
}).then((data)=>{
location.replace(data.data.success_url)
});
}
});
更新 2：
我已将const plan = document.getElementById('subscription-plan').value; 替换为var plan = document.querySelector('input[name="plan"]:checked').value;。现在，当我尝试提交时，我在控制台中收到Uncaught TypeError: Cannot read property 'value' of null。
【问题讨论】：
-
您是否设置了默认的
checked项目？可能什么都没有设置。还要确保在用户单击单选按钮时更新plan的值，或者在提交请求之前重新收集它。 -
是的，我试过了，但还是不行。
标签： javascript html laravel forms stripe-payments