Effectuez la mise à niveau du SDK d'extension de l'interface utilisateur de Stripe

Cette page fournit un guide complet pour vous aider à gérer les dernières modifications introduites dans chaque version majeure de @stripe/ui-extension-sdk et souligne les changements nécessaires pour mettre à niveau votre application.

Nous recommandons de mettre à niveau le plugin CLI des applications Stripe en exécutant stripe plugin upgrade apps avant de mettre à jour la version @stripe/ui-extension-sdk. Cela permet de garantir une compatibilité optimale, d’intégrer les dernières fonctionnalités et d’apporter des correctifs de sécurité.

@stripe/ui-extension-sdk v9

Nouveautés de la v9

La version 9 de @stripe/ui-extension-sdk introduit la validation des propriétés pour tous ses composants. Cette version est plus sûre, atténue les bogues et encourage l’adhésion aux bonnes pratiques de codage. Après l’avoir installée, faites attention aux erreurs TypeScript provenant de valeurs de propriétés non valides, car elles peuvent générer des erreurs de validation entraînant le crash de l’application.

Modifications des composants

Nous avons effectué des mises à jour visuelles de plusieurs composants. Après avoir installé la dernière version, examinez votre application pour vérifier que les composants s’affichent comme il se doit.

Journal des modifications

9.0.0

• Ajout d’un hook useStorage.
• Ajoutez isSandbox à userContext.
• Ajout d’un composant OnboardingView.
• Ajoutez les composants PropertyList et PropertyListItem.
• Ajoutez les composants TaskList et TaskListItem.
• Ajout d’un composant PlatformConfigurationView pour activer la configuration des applications intégrées.
• Ajout de la validation des propriétés des composants au moment de l’exécution pour améliorer la sécurité du typage.
• Ajout de la propriété pending au composant Button.
• Ajout d’options de format supplémentaires aux composants BarChart et LineChart :
  • Ajout du style de format decimal.
  • Ajout de l’option nice pour obtenir des limites d’axes plus agréables.
  • Ajout de ticks pour spécifier le nombre de points de repère sur un axe.
  • Ajout de tickFormat pour modifier l’affichage des graduations.
  • Ajout de zero pour contrôler la visibilité de la valeur zéro.
  • Ajout de l’option fractionalDigits aux formats de devises pour contrôler la précision des valeurs numériques.
• Suppression de la propriété tabKey obsolète des composants Tab et TabPanel. Utilisez plutôt la propriété id.
• Suppression de la propriété background obsolète de la propriété css des composants Box et Inline. Utiliser plutôt la propriété backgroundColor.
• Suppression de la propriété className obsolète des composants Button et Link.
• Suppression de la propriété invalid obsolète du composant FormFieldGroup.
• Suppression de la propriété layout obsolète de la propriété css des composants Box et Inline. Utiliser plutôt la propriété stack.
• Suppression de la propriété onClose obsolète du composant FocusView. Utilisez plutôt la propriété setShown.
• Suppression de la propriété onKeyPress obsolète des composants TextArea et TextField.
• La propriété onChange du composant DateField reçoit désormais directement la valeur au lieu de l’événement de changement.
• Les valeurs row et column de la propriété layout dans le composant FormFieldGroup ont été remplacées par horizontal et vertical.

8.10.0

• Ajoutez isSandbox à userContext.

8.9.3

• Corrigez la définition de type pour l’argument de callback onPress de SignInView pour qu’elle corresponde à sa valeur réelle au moment de l’exécution.
• Mettez à jour les dépendances @remote-ui.

8.9.2

• Correction des types de propriétés minTileWidth pour n’accepter que les valeurs compatibles.
• Suppression du type React.RefObject de la propriété trigger du composant Tooltip, car il n’est pas pris en charge lors de l’exécution.
• Ajout de la propriété id aux composants Tab et TabPanel pour remplacer tabKey.
• Suppression de l’avis d’abandon des propriétés de couleur de bordure (borderColor, borderBottomColor, borderLeftColor, borderRightColor, borderTopColor) dans la propriété css des composants Box et Inline.
• Ajout des propriétés de style et de largeur de bordure (borderStyle, borderWidth, borderBottomStyle, borderBottomWidth, borderLeftStyle, borderLeftWidth, borderRightStyle, borderRightWidth, borderTopStyle, borderTopWidth) à la propriété css des composants Box et Inline.
• Ajout des types littéraux à la propriété name du composant Icon.

8.9.1

• Utilisez les versions de dépendance fixes.
• Correction des méthodes de recherche du wrapper de test.

8.9.0

• Ajout de la propriété value au composant DateField.
• Ajout d’un avis d’abandon de la propriété background à la propriété css des composants Box et Inline. Utiliser plutôt la propriété backgroundColor.
• Ajout d’un avis d’abandon à la propriété className des composants Button et Link.
• Ajout d’un avis d’abandon à la propriété invalid du composant FormFieldGroup.
• Ajout d’un avis d’abandon de la propriété layout à la propriété css des composants Box et Inline. Utiliser plutôt la propriété stack.
• Ajout d’un avis d’abandon à la propriété tabKey des composants Tab et TabPanel.
• Ajout d’un avis d’abandon des propriétés de couleur de bordure (borderColor, borderTopColor, borderRightColor, borderBottomColor, borderLeftColor) à la propriété css des composants Box et Inline. Utiliser plutôt la propriété keyline pour définir le style des bordures.
• Suppression de l’avis d’abandon pour les propriétés value et checked.

8.8.0

• Ajout du composant StripeFileUploader
• Ajout de la propriété platform au contexte d’environnement
• Ajout de appContext au type ExtensionContextValue
• Ajout des types pour AuthorizedPermission et AuthorizedContentSecurityPolicy
• Ajout de fonctions utilitaires pour interagir avec appContext
  • getUserAuthorizedPermissions : permet de recevoir la correspondance entre les autorisations accordées pour l’application et celles de l’utilisateur actuel du Dashboard.
  • isPermissionAuthorized : indique si une autorisation fait partie des autorisations accordées pour l’application.
  • isSourceInAuthorizedCSP : indique si une URL se trouve dans les sources autorisées de l’application pour les connexions ou les images.

8.7.0

• Ajout de roles au compte transmis aux extensions dans la propriété userContext

8.6.0

• Ajout de la propriété secondaryAction à SignInView
• Ajout de target aux propriétés d’action SignInView
• Possibilité d’utiliser href et onPress dans la propriété d’action SignInView

8.5.0

• Ajout de la propriété constants au contexte d’environnement

8.4.1

• Ajout d’un composant SignInView

8.3.0

• Suppression de la propriété contentUses non prise en charge dans le typage TableCell et TableHeaderCell
• Mise à jour de useToast pour renvoyer les méthodes utilitaires show et dismiss

8.2.0

• StripeAppsHttpResponse.prototype.toJSON() renvoie désormais une promesse rejetée si le corps de la réponse HTTP est vide
• Ajout de la prise en charge pour appeler fetchStripeSignature avec des données JSON imbriquées
• Correction de debug pour filtrer les propriétés en fonction de l’option all
• Ajout de tabKey aux composants Tab et TabPanel
• Mise à niveau de la dépendance du package stripe vers ^9.11.0
• Ajout de external à Link
• Ajout de la propriété setShown à FocusView
• Ajout d’une fonction utilitaire showToast pour afficher les notifications toast en bas de l’écran de l’application

8.1.0

• Correction du typage ExtensionContextValue pour indiquer que les valeurs name et objectContext peuvent être null
• Ajout de textAlign à la propriété css du composant Box
• Option onSave rendue facultative pour les composants SettingsView
• Mise à niveau vers @remote-ui/react 4.5.2.
• Ajout d’un composant Sparkline

8.0.0

• Ajout d’un avis d’abandon à la propriété value des composants TextArea, TextField et Select
• Ajout d’un avis d’abandon à la propriété checked des composants Checkbox, Radio et Switch
• Suppression des propriétés outerRef non prises en charge lors de la saisie

7.1.0

• Ajout de brandIcon et brandColor à ContextView

7.0.0

• Suppression du composant Notice ; utiliser plutôt Banner
• Ajout de overflowX et overflowY à la propriété css du composant Box

6.3.1

• Mise à jour interne, pas de changement pour l’utilisateur

6.3.0

• Ajout d’un composant Banner
• Ajout d’un avertissement d’abandon pour le composant Notice
• Ajout de locale à ExtensionContextValue['oauthContext']
• Ajout de overflowWrap et wordBreak aux propriétés css du composant Box
• Ajout de textTransform aux propriétés css des composants Box et Inline
• Ajout des propriétés primaryAction, secondaryAction et footerContent à ContextView.
• Ajout de whiteSpace aux propriétés css du composant Box

6.2.0

• Amélioration deBarChart et LineChart :
  • Mise en forme des axes configurable
  • Mise en forme des valeurs configurable
  • Domaines de canaux configurables
  • Plages de canaux configurables
  • Afficher/masquer les étiquettes des axes et les graduations dans les graphiques
  • Afficher/masquer les lignes quadrillées dans les graphiques
  • Afficher/masquer les infobulles dans les réglages graphiques prédéfinis
  • Afficher/masquer les légendes dans les réglages graphiques prédéfinis

6.1.0

• Ajout d’une boîte de dialogue de confirmation à FocusView
• Ajout des composants Chip et ChipList
• Mise à jour de la fonction getDashboardUserEmail pour retourner directement l’e-mail et rejeter la promesse en cas d’erreur
• Correction des composants React qui ne sont pas acceptés dans la propriété label des éléments de formulaire
• Affichage de text-overflow: ellipsis et word-wrap: normal | break-word dans la propriété css du composant Box
• Ajout de country au compte transmis aux extensions dans la propriété userContext
• Ajout de la prise en charge de l’URL data: pour le composant Img. En savoir plus sur le composant Img.

6.0.0

• Email obsolète dans le contexte de vue
• Regroupement des fonctions utilitaires à l’emplacement /utils
• Correction d’un problème lié à la dépendance react-reconciler affectant les tests unitaires

5.0.1

• Correction des types de propriétés pour Switch, Checkbox et Radio

5.0.0

• Ajout des composants Accordion, Icon, Spinner et Tooltip
• Ajout d’infobulles à BarChart et LineChart
• Correction du typage des propriétés pour BarChart et LineChart
• Abandon des anciens paramètres de contexte de vue
• Permet de définir la largeur par css={{ width: .. }} sur les composants Select, TextArea, TextField, Button et Link
• Permet de définir l’alignement horizontal interne par css={{ alignX: .. }} sur les composants Button et Link
• Ajout de la fonction clipboardWriteText
• Ajout de la fonction getDashboardUserEmail

4.0.0

• Rend obsolète la propriété slot

3.2.0

• Ajout de la fonction createOAuthState
• Ajout de oauthContext au type ExtensionContextValue

3.1.0

• Ajout du composant Img

3.0.0

• Ajout de la prise en charge des composants Notice, Charts et Tabs
• Derniers changements :
  • ListItem : auparavant, le contenu transmis en tant qu’enfant était le contenu principal affiché dans le composant. Désormais, le contenu principal est transmis à la propriété title. La propriété description a également été remplacée par la propriété secondaryTitle.
  • MenuTrigger : ce composant a été abandonné au profit d’une propriété trigger dans le composant Menu. L’utilisation de l’API Slot a également été supprimée.
• Suppression de la transmission des autorisations dans le contexte utilisateur.

2.2.1

• Affichage des fichiers docs.json dans le composant dist

2.2.0

• Ajout d’une propriété actions à ContextView.

2.1.0

• Introduit le composant ButtonGroup.
• Supprime la margin-bottom des vérifications de formulaires.
• Définit les boutons white-space : nowrap et alignY : center comme valeurs par défaut.
• Les thèmes des boutons incluent désormais une propriété min-height pour toutes les variantes de taille.
• Rétrécit les composants Link et Button pour qu’ils s’adaptent à leur contenu.
• Affichage de l’attribut defaultValue dans TextField et TextArea.
• Possibilité de masquer error et description sur les contrôles de formulaire grâce à la propriété hiddenElements.
• Affichage des propriétés invalid et size des composants Select et TextArea.
• Affichage de l’attribut defaultChecked dans Radio.
• Affichage des propriétés resizeable and rows dans TextArea.
• Correction de l’état invalide des composants de contrôle.
• Correction du double déclenchement de la propriété Chip du composant onDropdown.
• Correction de l’affichage du composant Divider.

2.0.3

• Renvoie une promesse de useRefreshDashboardData qui se résout après l’actualisation des données du Dashboard.
• Ajout de la méthode fetchStripeSignature qui permet de spécifier une charge utile de requête supplémentaire de manière optionnelle. Une signature peut être utilisée pour effectuer une requête authentifiée au back-end de votre application.
• Correction d’un problème lors duquel la méthode de vérification d’élément de test .is ne parvenait pas à identifier un composant.

2.0.2

• Correction d’un problème avec le package testing dans lequel les composants avec des propriétés de type fragment étaient introuvables à l’aide de la méthode wrapper.find()

2.0.1

• Introduction d’une dépendance mise à jour qui corrige les problèmes #55 et #161

2.0.0

• Correction d’une erreur d’affichage avec SettingsView
• Mise à jour des types de SettingsView pour qu’ils correspondent aux propriétés disponibles pour ce composant
• Ajout d’un assistant getMockContextProps pour les tests. En savoir plus sur les propriétés de contexte.
• Le composant List accepte désormais React.ReactNode comme type valide pour la propriété value, et non plus uniquement string.
• Ajout d’un état de survol aux composants ListItem
• Mise à jour du composant ListItem de manière à ce que l’état de survol ne soit visible que lorsqu’une action est associée
• Correction de l’affichage de la sélection lorsque le paramètre « multiple » est défini sur « true »
• Correction du double déclenchement de la propriété Checkbox du composant onChange

1.1.7

• Ajout d’un module « de test », qui comprend des assistants pour créer des tests Jest pour les applications. En savoir plus sur les tests d’interface utilisateur.
• Correction de certains composants qui acceptent les nœuds React en tant que propriété :
  • MenuGroup prend désormais en charge la propriété title
  • FocusView prend désormais en charge la propriété footerContent
  • SettingsView prend désormais en charge la propriété headerActions
• Quelques corrections typographiques et mises à jour grammaticales.

1.1.6

• Ajout de types pour FocusView, SettingsView et ContextView
• Exportation d’une nouvelle constante STRIPE_API_KEY de http_client à utiliser lors de l’initialisation du client de l’API Stripe.