Ereignis oder Methoden für das Stripe Checkout Modal

Question

Gibt es eine Möglichkeit, ein Ereignis auszulösen, wenn das Stripe Checkout-Modal geschlossen wird?

Zwischen dem Zeitpunkt, zu dem das modale Stripe-Modul geschlossen und seine Antwort geliefert wird, gibt es etwa 0,5-1 Sekunden Verzögerung. In dieser Zeit könnte ein Benutzer auf die Seite usw. klicken. Um das Problem zu beheben, können wir alle Links deaktivieren oder ein Overlay ("cover-all") auf die Seite setzen, die nur entfernt wird, wenn Stripe verarbeitet wird .

Das Problem besteht darin, dass es keine Möglichkeit gibt, diese Überlagerung zu schließen, wenn die Person beschließt, das Stripe-Modal zu schließen (anstatt zu versuchen, eine Zahlung zu verarbeiten). Sie können das Modal (z. B. $ ('. Stripe-app')) aufgrund der gleichen Ursprungsrichtlinie nicht als Ziel verwenden.

Irgendwelche alternativen Ideen?

Mein Code ist unten, angepasst von https://stripe.com/docs/checkout.

// custom Stripe checkout button with custom overlay to avoid UI confusion during payment processing 
$('.btn-stripe').click(function(){ 

    var token = function(res){ 
    var $input = $('<input type=hidden name=stripeToken />').val(res.id); 
    $('.form-stripe').append($input).submit(); 
    }; 

    StripeCheckout.open({ 
    key:   STRIPE_KEY, 
    address:  false, 
    amount:  STRIPE_AMT, 
    currency: 'usd', 
    name:  'Purchase', 
    description: STRIPE_DESC, 
    panelLabel: 'Checkout', 
    token:  token 
    }); 

    $('.cover-all').show(); 

    return false; 
}); 

Answer 1

Per Kommentar von @ Brian, es wurde bestätigt, dass die Verzögerung aufgetreten, nachdem der Streifen Token und vor dem Formular abgeschickt wird zurückgegeben. Um das ursprüngliche Problem zu lösen, fügen Sie bei Bedarf Overlay- und/oder Deaktivierungselemente hinzu, sobald das Token zurückgegeben wurde.

// custom Stripe checkout button with disabling of links/buttons until form is submitted 
$('.btn-stripe').click(function(){ 

    var token = function(res){ 
    var $input = $('<input type=hidden name=stripeToken />').val(res.id); 

    // show processing message, disable links and buttons until form is submitted and reloads 
    $('a').bind("click", function() { return false; }); 
    $('button').addClass('disabled'); 
    $('.overlay-container').show(); 

    // submit form 
    $('.form-stripe').append($input).submit(); 
    }; 

    StripeCheckout.open({ 
    key:   'key', 
    address:  false, 
    amount:  1000, 
    currency: 'usd', 
    name:  'Purchase', 
    description: 'Description', 
    panelLabel: 'Checkout', 
    token:  token 
    }); 

    return false; 
}); 

Answer 2

Der beste Weg, um dies zu tun, kann sein, ein Spinner oder etwas während der Verarbeitung anzuzeigen.

Closed ist eine Option, die von Stripe für die benutzerdefinierte Integration bereitgestellt wird. Sie wird aufgerufen, wenn das Formular gesendet oder geschlossen wird, indem Sie auf die Schaltfläche X klicken. Hoffentlich kann das nützlich sein.
eg: handler.open({closed : function(){/* some function here*/}})