web-dev-qa-db-fra.com

Pourquoi Stripe paymentRequest.canMakePayment () échouerait-il sur Localhost?

J'obtiens ceci pour fonctionner sur mon serveur de production, mais sur localhost canMakePayment() renvoie null.

J'ai retracé cela à travers le code Stripe minifié mais j'ai heurté un mur avec la fonction ko qui envoie simplement une action appelée CAN_MAKE_PAYMENT à une file d'attente de messages, à quel moment l'exécution devient asynchrone et je ne peux pas suivre plus loin jusqu'à ce que la demande soit résolue avec e.available === false sans autre information.

J'ai vérifié que l'API est bien disponible dans Chrome sur localhost (window.PaymentRequest est disponible). Je cours également sur https local (mais sans vérification verte).

Comment puis-je savoir ce qui fait que Stripe signale que PaymentRequest n'est pas disponible? Chrome rejettera les appels de PaymentRequest si je n'ai pas de vérification SSL verte? Si oui, comment pourrais-je tester cela? Chrome indique simplement si PaymentRequest est disponible, vous pouvez appeler l'API.

Si je sais où la file d'attente de messages est traitée, je pourrais déboguer davantage.

stripe-payments
12
Freewalker

L'équipe de support de Stripe m'a confirmé qu'une vérification SSL verte est requise.

"L'une des conditions préalables pour le bouton de demande de paiement est que la page sur laquelle se trouve la demande de paiement devra être servie de manière sécurisée avec un certificat valide. C'est une exigence pour la production et le développement."

Voici une expérience. Accédez à un site en Chrome où l'URL indique "Secure https:" en vert, comme https://stackoverflow.com . Ouvrez la console du développeur et collez ces commandes ( d'ici ) et appuyez sur Enter:

const supportedPaymentMethods = [
  {
    supportedMethods: 'basic-card',
  }
];
const paymentDetails = {
  total: {
    label: 'Total',
    amount:{
      currency: 'USD',
      value: 0
    }
  }
};
const options = {};
const request = new PaymentRequest(
  supportedPaymentMethods,
  paymentDetails,
  options
);
request.show();

Vous verrez alors apparaître une fenêtre modale de demande de paiement.

Mais si vous accédez à votre propre site local où la barre d'adresse indique rouge "Non sécurisé" (et "https" est barré), et si vous essayez d'exécuter ce même code dans la console, aucun modal de demande de paiement n'apparaîtra (même si vous avez ajouté une exception de sécurité pour le domaine).

Donc, apparemment Chrome (et probablement d'autres navigateurs) empêche Stripe (et d'autres outils comme Stripe) d'accéder à cette fonctionnalité de navigateur lorsque la connexion n'est pas entièrement sécurisée .

MISE À JOUR de Stripe:

Alors que Chrome iOS inclut une implémentation PaymentRequest, il ne permet pas d'utiliser PaymentRequest à partir d'un iframe qui empêche l'élément de bouton de demande de paiement de Stripe de fonctionner. Nous travaillons avec le Chrome team pour résoudre ce problème dans une prochaine version.

Pour que Apple Pay puisse fonctionner dans le simulateur iOS ou sur un appareil de test, le domaine doit être accessible au public et enregistré via le tableau de bord Stripe ( https: //dashboard.stripe. com/account/Apple_pay ) ou API. https://stripe.com/docs/stripe-js/elements/payment-request-button#verifying-your-domain-with-Apple-pay Nous vous recommandons d'utiliser un outil comme ngrok (ngrok.com) pour créer un domaine accessible au public avec un certificat HTTPS valide qui tunnelise vers votre environnement local.

7
Ryan

En contournant Stripe, j'ai pu vérifier que Chrome signale que le mode de paiement "carte de base" n'est pas pris en charge.

Cela a nécessité la mise en place d'un PaymentRequest selon la documentation de Google et la tentative d'une commande request.show().

Je suppose que cela a à voir avec le fait de ne pas avoir de vérification SSL verte, je vais essayer de résoudre ce problème.

0
Luke Williams

Vous devez activer SSL dans Visual Studio pour utiliser paymentRequest.

Activer SSL dans Visual Studio

0
Hakan