Javascript Girl
  1. Javascript Girl
  3. Stripe "Simple" Checkout – détecte si le bouton Fermer est cliqué
Intereting Posts
Comment retourner une propriété de style set javascript à CSS par défaut Créer des tâches à l'aide d'une boucle Annuler la route en utilisant Sammy.js sans affecter l'historique Attendez la méthode jquery .html pour terminer le rendu JQuery: Quelle est la différence entre différé. Toujours () et différé. Alors ()? Citations simples dans json value Héritage dans Javascript Bokeh: passez vars à CustomJS pour Widgets Escape JavaScript in Expression Language Utilisation d'un shader de sommet et de fragment différent pour chaque objet dans webgl Débogage automatique (PAC) javascript avec alert ()? Prévenir la forme de soumettre avec l'entrée vide? Pourquoi n'est-il pas nécessaire de déclarer une variable dans Javascript avant de l'utiliser? Quel est le but de la bibliothèque ngrx / effets? Pourquoi Math.min () renvoie NaN?

Stripe "Simple" Checkout – détecte si le bouton Fermer est cliqué

J'ai intégré Stripe Checkout dans mon site et tout fonctionne bien, sauf pour un aspect. J'utilise le mode de paiement «Simple» où Stripe rend mon bouton de paiement pour moi. Mais je ne vois aucun moyen dans les documents pour détecter si l'utilisateur clique sur le bouton de fermeture (annulant effectivement la transaction – voir l'image).

Entrez la description de l'image ici

Existe-t-il un moyen de détecter cela en mode 'Simple' (par opposition à Custom)?

(Je travaille sur Stripe Checkout)

Le rappel "fermé" n'est disponible que dans l' intégration personnalisée .

Eh bien, vous ne pouvez pas avoir de rappel, mais qu'en est-il si vous créez votre propre rappel lorsque Stripe supprime l'iframe de votre DOM. 

 $(document).on("DOMNodeRemoved",".stripe_checkout_app", close); function close(){ alert("close stripe"); }

Alors, bien qu'il soit vrai que le "closed" callback n'est pas disponible, ce petit hack peut vous aider.

// cet exemple est avec JQuery.

— MODIFIER —

Comme @artfulhacker a commenté, une autre façon de le faire serait d'utiliser la temporisation setInterval et vérifier si la classe .stripe_checkout_app est visible ou non, pourrait être quelque chose comme: 

 setInterval(function(){ if(!$('.stripe_checkout_app').is(":visible")){ alert("Stripe modal is hidden"); } },1000)

La manière la plus simple que j'ai trouvée est juste de définir une variable de soumission qui a été testée. 

  var submittedForm = false; var handler = StripeCheckout.configure({ key: '{{ stripe.public_key }}', allowRememberMe: false, token: function(response, extradata) { var token = response.id; var card = response.card.id; submittedForm = true; $('#submit-text').html('Processing, stand by'); //etc functionality to submit back to your own form } }); //when actually triggering checkout.js handler.open({ name: 'myCompanyName', amount: 1999, closed: function () { if(submittedForm == false) $('#submit-text').html('Start your Trial'); } } });

Cet exemple modifie le texte du bouton Envoyer lors de l'affichage de checkout.js. Si cela fonctionne réellement, nous obtenons un jeton de retour, configuré soumis à vrai. Les tests fermés sont effectués. Si c'est faux, cela signifie qu'ils ont cliqué sur X sans soumettre, alors nous avons réinitialisé le texte de soumission. Si c'est vrai, ignorez que "Traitement" reste alors que notre propre publication ajax ou quoi que ce soit finit.