Accepter un paiement PayNow

Acceptez des paiements avec PayNow, un service de transfert de fonds largement répandu à Singapour.

PayNow est un moyen de paiement à usage unique. Le client utilise son application préférée d’une banque participante ou institution financière non bancaire participante pour scanner le code QR qui lui est présenté dans le tunnel de paiement, puis finalise sa commande.

Configurer Stripe

Pour commencer, vous devez créer un compte Stripe.

Utilisez nos bibliothèques officielles pour accéder à l’API Stripe à partir de votre application :

Créer un PaymentIntent
Côté serveur

Un PaymentIntent est un objet qui représente votre intention d’encaisser le paiement émis par un client et suit le cycle de vie du processus de paiement étape par étape. Pour commencer, créez un PaymentIntent sur votre serveur et précisez le montant à encaisser ainsi que la devise. Si vous avez déjà créé une intégration à l’aide de l’API Payment Intents, ajoutez paynow à la liste des types de moyens de paiement pour votre PaymentIntent.

Récupérer la clé secrète du client

Le PaymentIntent contient une clé secrète à utiliser côté client pour finaliser le processus de paiement en toute sécurité. Vous pouvez adopter différentes approches pour transmettre cette clé secrète côté client.

Récupérez la clé secrète du client à partir d’un endpoint sur votre serveur, à l’aide de la fonction fetch du navigateur. Cette approche est recommandée si votre côté client est une application d’une seule page, en particulier si elle repose sur un framework front-end moderne tel que React. Créez l’endpoint de serveur qui gère la clé secrète du client :

Récupérez ensuite la clé secrète du client à l’aide JavaScript côté client :

(async () => {
  const response = await fetch('/secret');
  const {client_secret: clientSecret} = await response.json();
  // Render the form using the clientSecret
})();

Afficher le code QR de PayNow
Côté client

Au cours de cette étape, vous effectuerez les paiements PayNow côté client avec Stripe.js. Intégrez le script Stripe.js à votre page de paiement en l’ajoutant entre les balises head de votre fichier HTML.

checkout.html
HTML
<head>
  <title>Checkout</title>
  <script src="https://js.stripe.com/basil/stripe.js"></script>
</head>

Créez une instance de Stripe.js avec le code JavaScript suivant sur votre page de paiement.

client.js
JavaScript
// Set your publishable key. Remember to change this to your live publishable key in production.
// See your keys here: https://dashboard.stripe.com/apikeys
var stripe = Stripe('pk_test_TYooMQauvdEDq54NiTphI7jx'
);

Utilisez stripe.confirmPayNowPayment pour confirmer le paiement côté client.

client.js
JavaScript
var form = document.getElementById('payment-form');

form.addEventListener('submit', function(event) {
  event.preventDefault();

  // Set the clientSecret here you got in Step 2
  stripe.confirmPayNowPayment(
    clientSecret,
  ).then((res) => {
    if(res.paymentIntent.status === 'succeeded') {
      // The user scanned the QR code
    } else {
      // The user closed the modal, cancelling payment
    }
  });
});

Une fois que vous avez appelé confirmPayNowPayment, un code QR s’affiche sur la page web. Vos clients peuvent utiliser ce code QR et authentifier le paiement en utilisant leur application bancaire ou de paiement préférée. Vous devez rester sur la page avec le code QR jusqu’à ce que Stripe exécute la commande et que vous connaissiez le résultat du paiement.

Traiter la commande
Côté serveur

Utilisez une méthode telle que les webhooks pour gérer la réalisation de la commande plutôt que d’attendre que votre client revienne sur la page de l’état du paiement. Lorsque votre client effectue le paiement, le PaymentIntent bascule sur succeeded et déclenche l’événement webhook payment_intent.succeeded.

Tester votre intégration

Pendant le test, vous pouvez scanner le QR code à l’aide d’une application de lecture de QR code sur votre appareil mobile. La charge utile du code QR contient une URL qui vous redirige vers une page de paiement de test PayNow hébergée par Stripe, sur laquelle vous pouvez autoriser ou refuser le paiement test.

En mode production, vous pouvez scanner le code QR à l’aide de l’application d’une banque participante ou institution financière non bancaire participante.