Question

我在一个页面上有两个表单来处理2个条带订阅（基本和高级）的选择，我在点击按钮时使用javascript来提交每个表单，如下所示：

基本计划：

<form id="payment_form_basic" action="" method="POST">
<input type="hidden" name="subscription_purchase_non_trial" value="subscription_purchase_non_trial_basic" />
<button id="pricing__action_grey">Choose Plan</button>
</form>

<script src="https://checkout.stripe.com/checkout.js"></script>

<script>
// ******************************************
// ****** Basic Plan Form Processor *********
// ******************************************

var handler = StripeCheckout.configure({
key: '<?php echo $stripe['publishable_key']; ?>',
image: 'https://example.com/example.png',
locale: 'auto',
allowRememberMe: 'false',
token: function(token) {
$('#payment_form_basic').append($('<input type="hidden" name="stripeToken" />').val(token.id));
$('#payment_form_basic').append($('<input type="hidden" name="stripeEmail" />').val(token.email));
$("#payment_form_basic").submit();
}
});

document.getElementById('pricing__action_grey').addEventListener('click', function(e) {
// Open Checkout with further options:
handler.open({
name: 'Basic',
description: 'example description',
zipCode: true,
amount: 10
});
e.preventDefault();
});

// Close Checkout on page navigation:
window.addEventListener('popstate', function() {
handler.close();
});
</script>

对于高级计划：

<form id="payment_form_advanced" action="" method="POST">
<input type="hidden" name="subscription_purchase_non_trial" value="subscription_purchase_non_trial_advanced" />
<input type="hidden" name="subscription_type" value="advanced" />
<button id="pricing__action">Choose Plan</button>
</form>

<script>
// ******************************************
// ****** Advanced Plan Form Processor ******
// ******************************************

var handler = StripeCheckout.configure({
key: '<?php echo $stripe['publishable_key']; ?>',
image: 'https://example.com/example.png',
locale: 'auto',
allowRememberMe: 'false',
token: function(token) {
$('#payment_form_advanced').append($('<input type="hidden" name="stripeToken" />').val(token.id));
$('#payment_form_advanced').append($('<input type="hidden" name="stripeEmail" />').val(token.email));
//$('#payment_form_advanced').append($('<input type="hidden" name="subscription_type" value="advanced" />'));
$("#payment_form_advanced").submit();

}
});

document.getElementById('pricing__action').addEventListener('click', function(e) {
// Open Checkout with further options:
handler.open({
name: 'Advanced',
description: 'example descript',
zipCode: true,
amount: 12
});
e.preventDefault();
});

// Close Checkout on page navigation:
window.addEventListener('popstate', function() {
handler.close();
});
</script>

我正在尝试使用高级表单中的subscription_type字段作为切换，当页面发布到自身以确定是否处理基本计划价格或高级计划时，但表单仍然通过“高级”订阅类型发布当提交基本表单时，似乎高级总是覆盖基本表单，在列表中“当我打印收到的帖子变量时会发生什么，这对我来说没有意义。有谁知道为什么会这样？

Answer 1

似乎我需要在点击功能中包装所有脚本（在每个场景中），这样高级设置就不会过度写入stripe的基本设置。希望这是一种强有力的方法。

一页上有两种表单 - 输入类型转移

1 个答案: