Vraag Evenement of methoden voor de Stripe Checkout Modal


Is er een manier om een ​​gebeurtenis te activeren wanneer de Stripe Checkout-modal is gesloten?

Er is ongeveer 0,5-1 seconde vertraging tussen de tijd dat Stripe's modale sluit en hun antwoord wordt afgeleverd. In die tijd kan een gebruiker van de pagina af klikken enz. Om dit probleem op te lossen, kunnen we iets doen zoals het uitschakelen van alle links of het plaatsen van een overlay ("cover-all") over de pagina die alleen wordt verwijderd wanneer Stripe klaar is met verwerken .

Het probleem is dat er geen manier is om die overlay te sluiten als de persoon besluit om de Stripe-modal te sluiten (in plaats van te proberen een betaling te verwerken). U kunt het modale (bijvoorbeeld $ ('. Stripe-app')) niet targeten vanwege hetzelfde oorsprongsbeleid.

Eventuele alternatieve ideeën?

Mijn code is hieronder, aangepast van 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;
});

10
2018-06-12 22:13


oorsprong


antwoorden:


De beste manier om dit aan te pakken, is om een ​​spinner of iets te laten zien terwijl het wordt verwerkt.

Closed is een optie die wordt geboden door Stripe voor aangepaste integratie. Het wordt gebeld wanneer het formulier wordt verzonden of gesloten door op de X-knop te klikken. Hopelijk kan dit nuttig zijn.
  eg: handler.open({closed : function(){/* some function here*/}})


8
2017-12-24 10:53



Per opmerking van @brian is bevestigd dat de vertraging is opgetreden nadat het Stripe-token is geretourneerd en voordat het formulier is verzonden. Als u het oorspronkelijke probleem wilt oplossen, voegt u overlay- en / of uitschakelen-elementen toe zodra het token is geretourneerd.

// 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;
});

3
2018-06-14 16:14