Question

所以我的订阅表单从我的笔记本电脑/桌面浏览器提交完全正常，但是当我尝试从移动浏览器提交它时，它不起作用，我转到python代码块中的else语句。我尝试过使用event.preventDefault（）;，event.stopPropagation（）;，event.stopImmediatePropagation（）;,并返回false但似乎没有任何结果导致所需的行为。我认为这与stripe_token有关，但我不确定。有人可以告诉我这里我做错了吗？

FORM HTML：

＆＃13;

<form data-ajax="false" method="POST" action="{{request.path}}" id="subForm">
          {% csrf_token %}
          {% for message in messages %}
              <div class="form-group ">
                 <div class="alert alert-{% if message.tags == 'error' %}danger{% else %}{{ message.tags }}{% endif %}">
                    <strong> {{ message|safe }} </strong>
                 </div>
              </div>
          {% endfor %}
          <div class="form-group" id="startAddPhone">
              <label>Email</label><br/>
              <input name="email" type="text" required placeholder="Email">
          </div>
          <div class="form-group" id="startAddPhone">
              <label>Card Number</label><br/>
              <input name="card_number" type="tel" autocomplete="cc-number" required placeholder="•••• •••• •••• ••••">
          </div>
          <div class="form-group" id="startAddPhone">
              <label>CVC</label><br/>
              <input name="cvc" type="tel" required placeholder="••••" autocomplete="cc-exp">
          </div>
          <div class="form-group" id="startAddPhone">
              <label>Expiry</label><br/>
              <input name="cc-expired" type="text" required placeholder="MM/YY">
          </div>
           
      </form>
          <button class="btn btn-primary" id="getStartedBtn" form="subForm">Submit</button>

＆＃13;

FORM JS：

＆＃13;

<script type="text/javascript">
    $(function(){
        function stripeResponseHandler(status, response) {
            var $form = $('form');

            if (response.error) { // Problem!
                // Show the errors on the form
                alert(response.error.message);
                return false;
            } else { // Token was created!

                // Get the token ID:
                var token = response.id;

                // Insert the token into the form so it gets submitted to the server:
                $form.append($('<input type="hidden" name="stripeToken" />').val(token));
                $form.submit()
            }
        }


        Stripe.setPublishableKey('{{token}}');
        $('input[name="card_number"]').payment('formatCardNumber');
        $('input[name="cvc"').payment('formatCardCVC');
        $('input[name="cc-expired"').payment('formatCardExpiry');

        $(document).on('click tap', '#getStartedBtn', function(event){
            event.preventDefault();
            event.stopPropagation();
            var expiry = $('input[name="cc-expired"').val().replace(" ", "").replace('/', ' ');
            Stripe.card.createToken({
               number: $('input[name="card_number"]').val(),
               cvc: $('input[name="cvc"').val(),
               exp: expiry
            }, stripeResponseHandler)
        });

        $('form').submit(function(event){
            var stripeToken = $('input[name="stripeToken"]').val();
            if (!stripeToken){
                alert('Invalid Payment details');
                event.preventDefault();
                return false;
            }
        })
    });
</script>

＆＃13;

FORM Python：

def subscription(request, unique_code):
user = get_object_or_404(User, access_url=unique_code)

if request.POST:
    stripe_token = request.POST.get('stripeToken')
    email = request.POST.get('email')

    if all([stripe_token, email]):
        try:

            customer = Customer.objects.filter(user=user).first()
            if customer:
                if subscriptions.has_active_subscription(customer):
                    messages.error(
                        request, 'You already have active subscription')

                    return redirect(request.META.get('HTTP_REFERER'))

            # Create stripe customers
            setattr(user, 'email', email)
            customers.create(
                user=user,
                card=stripe_token,
                charge_immediately=False
            )

            customer = Customer.objects.filter(user=user).first()
            subscription = Subscription.objects.filter(
                customer=customer).first()

            stripe_subscription = subscriptions.retrieve(
                customer, subscription.stripe_id)

            subscriptions.sync_subscription_from_stripe_data(
                customer, stripe_subscription)

            # Set default timer
            user_timezone = user.school.timezone
            if not user_timezone:
                user_timezone = 'UTC'

            current_time = timezone.now().astimezone(pytz.timezone(user_timezone))
            expired_at = '9:00 AM'
            if current_time.hour < 22 and current_time.hour > 9:
                expired_at = current_time + timedelta(hours=2)
                expired_at = datetime.strftime(expired_at, '%-I:%M %p')

            timer = Timer.objects.create(user=user, expired_at=expired_at)

            protocol = 'https://' if request.is_secure() else 'http://'

            access_url = protocol + request.get_host() + \
                reverse('badger_snooze', args=[user.access_url])

            message = client.messages.create(body="Check your LMS! {}".format(
                access_url), to=user.username, from_=settings.TWILIO_NUMBER)

            user.is_active = True
            user.save()

            if request.session.get('user'):
                del request.session['user']

            messages.success(request, 'Thanks for signing up for Badger!')
            return redirect(reverse('badger_finished'))

        except IntegrityError:
            messages.error(request, 'You already processed subscription')

        except Exception, err:
            messages.error(request, err)

    else:
        messages.error(request, 'PLEASE PROVIDE PAYMENT DETAILS')

return render(request, 'subscription.html', {'token': settings.PINAX_STRIPE_PUBLIC_KEY})

Answer 1

我相信你遇到这个问题的原因是因为你的提交按钮不在您的表单元素中。因此在iOS上我认为，由于“go”按钮的功能（我可能在这里错了），它在没有你想要触发的事件处理程序的情况下提交。

首先，我将提交按钮添加到表单元素中其次，由于你实际上对按钮点击时发生的这种逻辑不感兴趣，我会将它移动到表单的onSubmit事件而不是按钮，这将确保某人无法绕过点击作为部分表格提交。第三，可能值得将stripe_token和email添加到python响应中以验证它不是python问题，但我猜这是一个JS问题

在移动浏览器上获取条带令牌之前提交表单

1 个答案: