モバイルブラウザでストライプトークンを取得する前にフォームを提出する

Question

サブスクリプションフォームはラップトップ/デスクトップブラウザから完全に正常に送信されますが、モバイルブラウザから送信しようとすると機能しません。 Pythonコードブロック。私はevent.preventDefault（）; event.stopPropagation（）; event.stopImmediatePropagation（）;を使用して試してみましたが、falseを返しますが、何も望みの動作にならないようです。私はそれがstripe_tokenの問題だと思うが、わからない。誰かが私がここで間違ったことを教えてもらえますか？

FORMのHTML：

<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>

FORMのJS：

<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>

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"ボタンの機能（私はここで間違っている可能性がある）のために発射したいと思っています。

まず、submitボタンをフォーム要素に追加します。
第2に、ボタンのクリックで実際にこのロジックに興味がないので、代わりにボタンの代わりにフォームのonSubmitイベントに移動します。これにより、誰かがクリックを回避できなくなりますフォーム提出の一環として 第3に、pythonの問題ではないことを確認するためにstripe_tokenとemailをpythonの応答に追加することは価値があるかもしれませんが、私はこれがJSの問題だと思います。