Accéder directement au contenu
Créez un compte ou connecter-vous
Logo de la documentation Stripe
/
Créez un compteConnectez-vous
AperçuAccepter un paiementMettre votre intégration à niveau
Paiements en ligne
PrésentationTrouver votre cas d'usageUtiliser Managed PaymentsPaiements récurrents
Paiements par TPE
Moyens de paiement
Opérations de paiement
Soldes et délai de règlementReçusRemboursements et annulations
Intégrations avancées
Au-delà des paiements

Paiements Cash App Pay

Ajoutez la prise en charge de Cash App Pay à votre intégration.

Utilisez le Payment Element pour intégrer un formulaire de paiement Stripe personnalisé sur votre site Web ou application et proposer des moyens de paiement à vos clients. Pour les configurations et personnalisations avancées, consultez le guide d’intégration Accepter un Paiement.

Déterminer la compatibilité

Une session Checkout doit respecter toutes les conditions suivantes pour prendre en charge les paiements Cash App Pay :

  • Les tarifs de tous les postes doivent être exprimés en USD.

Configurer le serveur
Côté serveur

Utilisez les bibliothèques officielles de Stripe pour accéder à l’API depuis votre application.

Command Line
Ruby
Python
PHP
Java
Node.js
Go
.NET
No results
# Available as a gem
sudo gem install stripe
Gemfile
Ruby
Python
PHP
Java
Node.js
Go
.NET
No results
# If you use bundler, you can add this line to your Gemfile
gem 'stripe'

Créer une session Checkout
Côté serveur

Ajoutez un endpoint à votre serveur qui crée une session Checkout et renvoie la clé secrète du client à votre front-end. Une session Checkout représente la session d’un client lors d’un paiement ponctuel ou d’un abonnement. Les sessions Checkout expirent 24 heures après leur création.

Nous recommandons d’utiliser les moyens de paiement dynamiques afin d’afficher automatiquement les options les plus pertinentes pour chaque client et d’optimiser le taux de conversion. Vous pouvez également répertorier manuellement les moyens de paiement, ce qui désactive les options dynamiques.

server.ts
TypeScript
Node.js
Ruby
PHP
Python
Go
.NET
Java
No results
import express, {Express} from 'express';

const app: Express = express();

app.post('/create-checkout-session', async (req: Express.Request, res: Express.Response) => {
  const session = await stripe.checkout.sessions.create({
    line_items: [
      {
        price_data: {
          currency: 'usd',
          product_data: {
            name: 'T-shirt',
          },
          unit_amount: `1099`,
        },
        quantity: 1,
      },
    ],
    mode: 'payment',
    ui_mode: 'custom',
    return_url: 'https://example.com/return?session_id={CHECKOUT_SESSION_ID}'
  });

  res.json({checkoutSessionClientSecret: session.client_secret});
});

app.listen(3000, () => {
  console.log('Running on port 3000');
});

Configurer le front-end
Côté client

Intégrez le script Stripe.js à votre page de paiement en l’ajoutant dans le head de votre fichier HTML. Chargez toujours Stripe.js directement depuis js.stripe.com afin de rester conforme à PCI. N’incluez pas le script dans un bundle et n’en hébergez pas de copie.

Assurez-vous d’utiliser la dernière version de Stripe.js en incluant la balise de script suivante <script src=“https://js.stripe.com/clover/stripe.js”></script>. En savoir plus sur la gestion des versions de Stripe.js.

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

Remarque

Stripe propose un package npm que vous pouvez utiliser pour charger Stripe.js en tant que module. Consultez le projet sur GitHub. La version 7.0.0 ou ultérieure est requise.

Initialiser stripe.js

checkout.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
const stripe = Stripe(
  
'pk_test_TYooMQauvdEDq54NiTphI7jx'
,
);

Initialiser Checkout
Côté client

Créez soit une promesse clientSecret qui se résout avec la clé secrète du client, soit définissez-le directement comme clé secrète. Appelez initCheckout, en passant clientSecret. initCheckout renvoie une promesse qui se résout en une instance de Checkout.

L’objet paiement constitue la base de votre page de paiement et contient les données de la Session Checkout ainsi que les méthodes permettant de mettre la Session à jour.

L’objet renvoyé par actions.getSession() contient vos informations tarifaires. Nous vous recommandons de lire et d’afficher le total et les lineItems de la session dans votre interface utilisateur.

Cela vous permet d’activer de nouvelles fonctionnalités avec un minimum de modifications du code. Par exemple, l’ajout de prix manuels des devises ne nécessite aucune modification de l’interface utilisateur si vous affichez le total.

checkout.html
<div id="checkout-container"></div>
checkout.js
const clientSecret = fetch('/create-checkout-session', {method: 'POST'})
  .then((response) => response.json())
  .then((json) => json.checkoutSessionClientSecret);
const checkout = stripe.initCheckout({clientSecret});
const loadActionsResult = await checkout.loadActions();
if (loadActionsResult.type === 'success') {
  const session = loadActionsResult.actions.getSession();
  const checkoutContainer = document.getElementById('checkout-container');
  checkoutContainer.append(JSON.stringify(session.lineItems, null, 2));
  checkoutContainer.append(document.createElement('br'));
  checkoutContainer.append(`Total: ${session.total.total.amount}`);
}

Collecter les adresses e-mail des clients
Côté client

Créez un champ de saisie de l’adresse pour collecter l’adresse e-mail de votre client. Appelez updateEmail lorsque votre client finalise la saisie pour valider et enregistrer l’adresse e-mail.

En fonction de la conception de votre formulaire de paiement, vous pouvez appeler updateEmail de l’une des manières suivantes :

  • Directement avant l’envoi du paiement. Vous pouvez également appeler updateEmail pour valider plus tôt, par exemple lorsque le focus est retiré de la saisie.
  • Avant de passer à l’étape suivante, par exemple en cliquant sur un bouton Enregistrer, si votre formulaire comprend plusieurs étapes.
checkout.html
<input type="text" id="email" />
<div id="email-errors"></div>
checkout.js
const checkout = stripe.initCheckout({clientSecret});
const loadActionsResult = await checkout.loadActions();

if (loadActionsResult.type === 'success') {
  const {actions} = loadActionsResult;
  const emailInput = document.getElementById('email');
  const emailErrors = document.getElementById('email-errors');

  emailInput.addEventListener('input', () => {
    // Clear any validation errors
    emailErrors.textContent = '';
  });

  emailInput.addEventListener('blur', () => {
    const newEmail = emailInput.value;
    actions.updateEmail(newEmail).then((result) => {
      if (result.error) {
        emailErrors.textContent = result.error.message;
      }
    });
  });
}

Collecter les informations de paiement
Côté client

Collectez les informations de paiement de votre client à l’aide de Payment Element. Payment Element est un composant d’interface utilisateur préconfiguré qui simplifie la collecte des informations pour de nombreux moyens de paiement.

Tout d’abord, créez un élément DOM de conteneur pour monter le composant Payment Element. Créez ensuite une instance du Payment Element à l’aide de checkout.createPaymentElement et montez-la en appelant element.mount et en fournissant soit un sélecteur CSS, soit l’élément DOM du conteneur.

checkout.html
<div id="payment-element"></div>
checkout.js
const paymentElement = checkout.createPaymentElement();
paymentElement.mount('#payment-element');

Consultez la documentation Stripe.js pour connaître les options prises en charge.

Vous pouvez personnaliser l’apparence de tous les Elements en transmettant elementsOptions.appearance lors de l’initialisation de Checkout sur le front-end.

Envoyer le paiement
Côté client

Affichez un bouton Payer qui appelle confirm depuis l’instance Checkout pour soumettre le paiement.

checkout.html
<button id="pay-button">Pay</button>
<div id="confirm-errors"></div>
checkout.js
const checkout = stripe.initCheckout({clientSecret});
const loadActionsResult = await checkout.loadActions();

if (loadActionsResult.type === 'success') {
  const {actions} = loadActionsResult;
  const button = document.getElementById('pay-button');
  const errors = document.getElementById('confirm-errors');
  button.addEventListener('click', () => {
    // Clear any validation errors
    errors.textContent = '';

    actions.confirm().then((result) => {
      if (result.type === 'error') {
        errors.textContent = result.error.message;
      }
    });
  });
}

Tester votre intégration

Pour tester votre intégration, choisissez Cash App Pay comme moyen de paiement et appuyez sur Payer. Pendant le test, vous serez redirigé vers une page de paiement de test où vous pouvez autoriser ou refuser le paiement.

En mode production, le fait d’appuyer sur Payer vous redirige vers l’application mobile Cash App. Vous n’avez pas la possibilité d’approuver ou de refuser le paiement dans l’application Cash. Le paiement est automatiquement approuvé après la redirection.