# Accepter un paiement PayNow

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

# API Direct


PayNow est un moyen de paiement [à usage unique](https://docs.stripe.com/payments/payment-methods.md#usage). 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.

Ce guide décrit l’utilisation de Paynow dans votre tunnel de paiement en ligne. Pour les paiements en personne avec Stripe Terminal, consulter la rubrique [ Moyens de paiement supplémentaires](https://docs.stripe.com/terminal/payments/additional-payment-methods.md).

## Configurer Stripe

Pour commencer, vous devez [créer un compte](https://dashboard.stripe.com/register) Stripe.

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

#### Ruby

```bash
# Available as a gem
sudo gem install stripe
```

```ruby
# If you use bundler, you can add this line to your Gemfile
gem 'stripe'
```

## Créer un PaymentIntent [Côté serveur]

Un [PaymentIntent](https://docs.stripe.com/api/payment_intents/object.md) est un objet qui représente votre intention de collecter un paiement auprès d’un client et qui suit le cycle de vie du processus de paiement à chaque étape. Tout d’abord, créez un PaymentIntent sur votre serveur et spécifiez le montant à collecter et la devise. [Activez PayNow](https://dashboard.stripe.com/settings/payment_methods) dans votre Dashboard pour utiliser les [moyens de paiement dynamiques](https://docs.stripe.com/payments/payment-methods/dynamic-payment-methods.md).

```curl
curl https://api.stripe.com/v1/payment_intents \
  -u "<<YOUR_SECRET_KEY>>:" \
  -d "automatic_payment_methods[enabled]=true" \
  -d "payment_method_data[type]=paynow" \
  -d amount=1099 \
  -d currency=sgd
```

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

Le PaymentIntent contient une *clé secrète* (The client secret is a unique key returned from Stripe as part of a PaymentIntent. This key lets the client access important fields from the PaymentIntent (status, amount, currency) while hiding sensitive ones (metadata, customer)) à 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.

#### Application monopage

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&nbsp;:

#### Ruby

```ruby
get '/secret' do
  intent = # ... Create or retrieve the PaymentIntent
  {client_secret: intent.client_secret}.to_json
end
```

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

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

#### Rendu côté serveur

Transmettez la clé secrète à votre client depuis votre serveur. Cette approche fonctionne mieux si votre application génère du contenu statique sur le serveur avant de l’envoyer sur le navigateur.

Ajoutez le [client_secret](https://docs.stripe.com/api/payment_intents/object.md#payment_intent_object-client_secret) à votre formulaire de paiement. Dans votre code côté serveur, récupérez la clé secrète du client à partir du PaymentIntent&nbsp;:

#### Ruby

```erb
<form id="payment-form" data-secret="<%= @intent.client_secret %>">
  <button id="submit">Submit</button>
</form>
```

```ruby
get '/checkout' do
  @intent = # ... Fetch or create the PaymentIntent
  erb :checkout
end
```

## 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](https://docs.stripe.com/payments/elements.md). Intégrez le script Stripe.js à votre page de paiement en l’ajoutant entre les balises `head` de votre fichier HTML.

#### HTML

```html
<head>
  <title>Checkout</title>
  <script src="https://js.stripe.com/dahlia/stripe.js"></script>
</head>
```

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

#### JavaScript

```js
// 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('<<YOUR_PUBLISHABLE_KEY>>');
```

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

#### JavaScript

```js
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](https://docs.stripe.com/payments/paynow/accept-a-payment.md#fulfill-order) et que vous connaissiez le résultat du paiement.

## Traiter la commande [Côté serveur]

Utilisez une méthode telle que les [webhooks](https://docs.stripe.com/payments/payment-intents/verifying-status.md#webhooks) pour gérer la *réalisation* (Fulfillment is the process of providing the goods or services purchased by a customer, typically after payment is collected) 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* (A webhook is a real-time push notification sent to your application as a JSON payload through HTTPS requests) [payment_intent.succeeded](https://docs.stripe.com/api/events/types.md#event_types-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.