Composant SettingsView pour les applications Stripe

Autorisez les utilisateurs à configurer le fonctionnement de l'application avec leur compte.

Version du SDK

Vous pouvez définir une vue des paramètres spéciale pour permettre aux utilisateurs de modifier des détails spécifiques sur le fonctionnement de l’application avec leur compte. Par exemple, une application qui a recours à une API tierce (comme Zendesk) peut utiliser une SettingsView pour autoriser les utilisateurs à se connecter avec leur compte Zendesk. Pour en savoir plus, consultez la page consacrée à l’ajout d’une page de paramètres pour votre application.

Apparence d’une SettingsView

SettingsView est un composant racine de vue, comme ContextView, qui contient d’autres éléments d’interface utilisateur. C’est la seule vue qui n’est pas liée à un objet spécifique, mais à la fenêtre d’affichage settings, laquelle mappe vers des emplacements prédéfinis dans le Dashboard en dehors du volet d’applications.

SettingsView s’affiche sur la page des paramètres de l’application dans le Dashboard une fois que vous avez chargé une application. Lors de la prévisualisation de votre application en local, vous pouvez afficher un aperçu de SettingsView dans le Dashboard à l’adresse suivante : https://dashboard.stripe.com/apps/settings-preview.

Pour utiliser une SettingsView, vous devez ajouter une vue avec la fenêtre settings à votre manifeste d’application. Un manifeste d’application avec une vue « settings » présenterait un champ ui_extension similaire à ceci :

{
  ...,
  "ui_extension": {
    "views": [
      ...,
      {
        "viewport": "settings",
        "component": "AppSettings"
      }
    ],
  }
}

Propriétés de la SettingsView

Propriété Type

Propriété	Type
`children`	Obligatoire `React.ReactNode` Le contenu du composant.
`onSave`	Facultatif `((values: { [x: string]: string; }) => void) \| undefined` S’il est fourni, un `Button` « Enregistrer » sera affiché avec la `SettingsView`. Ce rappel sera appelé lors du clic sur le `Button`.
`statusMessage`	Facultatif `string \| undefined` Chaîne permettant d’afficher un état tel que « Enregistré » ou « Erreur » dans l’en-tête de la vue.

children

Obligatoire

React.ReactNode

Le contenu du composant.

onSave

Facultatif

((values: { [x: string]: string; }) => void) | undefined

S’il est fourni, un Button « Enregistrer » sera affiché avec la SettingsView. Ce rappel sera appelé lors du clic sur le Button.

statusMessage

Facultatif

string | undefined

Chaîne permettant d’afficher un état tel que « Enregistré » ou « Erreur » dans l’en-tête de la vue.

Exemple

Cet exemple illustre comment récupérer des paramètres depuis une API externe, les afficher et enregistrer les modifications.

import React from 'react';
import {ExtensionContextValue} from '@stripe/ui-extension-sdk/context';
import {Box, SettingsView, TextField} from '@stripe/ui-extension-sdk/ui';

type FormStatus = 'initial' | 'saving' | 'saved' | 'error';

const AppSettings = ({userContext}: ExtensionContextValue) => {
  const [storedValue, setStoredValue] = React.useState<string>('');
  const [status, setStatus] = React.useState<FormStatus>('initial');

  // use the current user id to retrieve the stored value from an external api
  const key = userContext.id;

  React.useEffect(() => {
    if (!key) {
      return;
    }

    const fetchSetting = async (key: string) => {
      try {
        const response = await fetch(`https://www.my-api.com/${key}`);
        const storedSettingValue = await response.text();
        if (storedSettingValue) {
          setStoredValue(storedSettingValue);
        }
      } catch (error) {
        console.log('Error fetching setting: ', error);
      }
    };
    fetchSetting(key);
  }, [key]);

  const saveSettings = React.useCallback(async (values) => {
    setStatus('saving');
    try {
      const {greeting} = values;
      const result = await fetch('https://www.my-api.com/', {
        method: 'POST',
        body: JSON.stringify(values),
      });
      await result.text();
      setStatus('saved');
      setStoredValue(greeting);
    } catch (error) {
      console.error(error);
      setStatus('error');
    }
  }, []);

  const getStatusLabel = React.useCallback(() => {
    switch (status) {
      case 'saving':
        return 'Saving...';
      case 'saved':
        return 'Saved!';
      case 'error':
        return 'Error: There was an error saving your settings.';
      case 'initial':
      default:
        return '';
    }
  }, [status]);
  const statusLabel = getStatusLabel();

  return (
    <SettingsView onSave={saveSettings} statusMessage={statusLabel}>
      <Box
        css={{
          padding: 'medium',
          backgroundColor: 'container',
        }}
      >
        <Box
          css={{
            font: 'lead',
          }}
        >
          Please enter a greeting
        </Box>
        <Box
          css={{
            marginBottom: 'medium',
            font: 'caption',
          }}
        >
          Saved value: {storedValue || 'None'}
        </Box>
        <TextField
          name="greeting"
          type="text"
          label="Greeting:"
          size="medium"
        />
      </Box>
    </SettingsView>
  );
};

Composant SettingsView pour les applications Stripe

Autorisez les utilisateurs à configurer le fonctionnement de l'application avec leur compte.

Propriétés de la SettingsView

Exemple

Voir aussi