Accéder directement au contenu
Créez un compte
ou
connecter-vous
Logo de la documentation Stripe
/
Demander à l'assistant IA
Créez un compte
Connectez-vous
Démarrer
Paiements
Revenus
Plateformes et places de marché
Gestion de fonds
Ressources pour les développeurs
Aperçu
Gestion des versions
Journal des modifications
Mettre à niveau votre version de l'API
Actualiser votre version du SDK
Essentials
SDK
API
Tests
CLI Stripe
Exemples de projets
Outils
Workbench
Dashboard des développeurs
Shell Stripe
Stripe pour Visual Studio Code
Fonctionnalités
Workflows
Destinations d'événements
Alertes d'intégrité de StripeChargements de fichiers
Solutions d'IA
Boîte à outils des agents
Model Context Protocol
Sécurité et confidentialité
Sécurité
Confidentialité
Extensions Stripe
Build Stripe apps
    Présentation
    Démarrer
    Créer une application
    Fonctionnement de Stripe Apps
    Exemples d'application
    Créer une application
    Enregistrer des clés secrètes
    Méthodes d'authentification de l'API
    Flux d'autorisation
    Logique côté serveur
    Écouter les événements
    Gérer différents modes
    Activer la prise en charge de l'environnement de test
    Page des paramètres d'application
    Concevoir une interface utilisateur
    Inscription des utilisateurs
    Distribuer votre application
    Options de distribution
    Charger votre application
    Versions
    Tester votre application
    Publier votre application
    Faire la promotion de votre application
    Ajouter des liens profonds
    Créer des liens d'installation
    Assigner des rôles dans les extensions d'interface utilisateur
    Actions post-installation
    Analyses de l'application
    Composants intégrés
    Intégrer des applications tierces conçues pour Stripe
    Migrer vers Stripe Apps
    Migrer ou développer une extension
    Migrer un plugin vers Stripe Apps ou Stripe Connect
    Référence
    Manifeste de l'application
    Interface de ligne de commande
    SDK d'extension
    Autorisations
    Fenêtres d'affichage
    Modèles de conception
    Composants
      Accordéon
      Badge
      Bannière
      BarChart
      Composant box
      Bouton
      ButtonGroup
      Case à cocher
      Puce
      ContextView
      DateField
      Séparateur
      FocusView
      FormFieldGroup
      Icône
      Img
      Inline
      LineChart
      Link
      Liste
      Menu
      PropertyList
      Radio
      Sélectionner
      SettingsView
      SignInView
      Sparkline
      Indicateur de chargement
      Changer
      Table
      Onglets
      Liste des tâches
      TextArea
      TextField
      Message transitoire
      Infobulle
Use apps from Stripe
Partenaires
Partner ecosystem
Certification des partenaires
AccueilRessources pour les développeursBuild Stripe appsComponents

Composant Toast pour les applications StripeDashboard uniquement

Informez les utilisateurs d'un état temporaire.

Pour ajouter le composant Toast à votre application :

import { showToast } from "@stripe/ui-extension-sdk/utils";
const App = () => { React.useEffect(() => { showToast('Changes saved', {type: 'success'}); }, []); };

Affichez un message transitoire en bas de votre vue pour informer l’utilisateur de l’état d’une action, par exemple pour lui signaler la réussite ou de l’échec d’un appel à l’API.

import {showToast} from '@stripe/ui-extension-sdk/utils'; const App = () => { const handleClick = () => { fetch(...) .then((response) => { showToast("Invoice updated", {type: "success"}) return response.json() }) .catch(() => { showToast("Invoice could not be updated", {type: "caution"}) }) } // Use the `handleClick`... }

La fonction showToast() accepte deux arguments : message et options. La fonction est définie comme suit :

type ToastType = "success" | "caution" | "pending" | undefined; type ToastOptions = { type?: ToastType; action?: string; onAction: () => void; } (message: string, options?: ToastOptions) => Promise<{ update: (updateMessage: string, updateOptions?: ToastOptions) => void; dismiss: () => void; }>;

Les messages transitoires ne peuvent pas comporter plus de 30 caractères ni être vides. Si un message est trop long ou vide, la console enregistre une erreur.

Les messages transitoires se ferment automatiquement, sauf s’ils sont de type pending.

En attenteA une actionDélai expiré
falsefalse4s
falsetrue6s
truefalseAucune
truetrueAucune
import {showToast} from '@stripe/ui-extension-sdk/utils'; const App = () => { const handleClick = async () => { const { dismiss, update } = await showToast("Refreshing data", { type: "pending", }); try { await refreshData(); dismiss(); } catch (error) { update("Data could not be refreshed", { type: "caution" }); } } // Use the `handleClick`... }

Les messages transitoires peuvent également inviter l’utilisateur à effectuer une action. Cliquer sur le bouton d’action permet alors de fermer automatiquement le message transitoire.

import {showToast} from '@stripe/ui-extension-sdk/utils'; const App = () => { const handleClick = async () => { let timeout; const { dismiss } = await showToast('Message "sent"', { action: "Undo", onAction: () => { clearTimeout(timeout); showToast('Message "unsent"'); }, }); timeout = setTimeout(() => { sendMessage(); dismiss(); }, 3000); } // Use the `handleClick`... }

Voir aussi

  • Modèles de conception
  • Styliser votre application
  • Tests d’interface utilisateur
Cette page vous a-t-elle été utile ?
OuiNon
Besoin d'aide ? Contactez le service Support.
Rejoignez notre programme d'accès anticipé.
Consultez notre log des modifications.
Des questions ? Contactez l'équipe commerciale.
LLM ? Lire llms.txt.
Propulsé par Markdoc