Upgrade des Erweiterungs-SDK der Nutzeroberfläche von Stripe

Diese Seite enthält einen umfassenden Leitfaden, der Ihnen bei der Navigation durch die wichtigen Änderungen in jeder Hauptversion von @stripe/ui-extension-sdk hilft. Außerdem sind die notwendigen Änderungen für ein Upgrade Ihrer Anwendung beschrieben.

Wir empfehlen, das Stripe Apps CLI-Plugin zu aktualisieren, indem Sie stripe plugin upgrade apps ausführen, bevor Sie die @stripe/ui-extension-sdk-Version aktualisieren. Dies gewährleistet eine optimale Kompatibilität, die Einbeziehung der neuesten Funktionen und Sicherheitsupdates.

@stripe/ui-extension-sdk v9

Das ändert sich in v9

In der Version 9 von @stripe/ui-extension-sdk wird die Eigenschaftsvalidierung für alle Komponenten eingeführt. Diese Version ist sicherer, Fehler werden reduziert und die Einhaltung von Best Practices bei der Programmierung wird gefördert. Achten Sie nach der Installation auf TypeScript-Fehler, die auf ungültige Eigenschaftswerte zurückzuführen sind, da diese Validierungsfehler verursachen können, die zum Absturz der Anwendung führen.

Änderungen an Komponenten

Wir haben mehrere Komponenten optisch aktualisiert. Nachdem Sie die neueste Version installiert haben, überprüfen Sie Ihre App, um sicherzustellen, dass die Komponenten wie gewünscht aussehen.

Änderungsprotokoll

9.0.0

• Fügen Sie den Hook useStorage hinzu.
• Fügen Sie isSandbox zu userContext hinzu.
• Komponente OnboardingView hinzufügen.
• Fügen Sie die Komponenten PropertyList und PropertyListItem hinzu.
• Fügen Sie die Komponenten TaskList und TaskListItem hinzu.
• Fügen Sie die Komponente PlatformConfigurationView hinzu, um die Einrichtung für eingebettete Apps zu aktivieren.
• Fügen Sie eine Laufzeitkomponenten-Eigenschaftsvalidierung hinzu, um die typsicheren Eigenschaften zu erzwingen.
• Fügen Sie die Eigenschaft pending der Komponente Button hinzu.
• Fügen Sie den Komponenten BarChart and LineChart weitere Formatoptionen hinzu:
  • Fügen Sie den Formatstil decimal hinzu.
  • Fügen Sie die Option nice hinzu, um angenehmere Achsengrenzen zu haben.
  • Fügen Sie ticks hinzu, um die Anzahl der Märkte entlang einer Achse anzugeben.
  • Fügen Sie tickFormat hinzum, um die Anzeige der Häkchenbeschriftungen zu ändern.
  • Fügen Sie zero hinzu, um die Sichtbarkeit des Nullwerts zu steuern.
  • Fügen Sie die Option fractionalDigits den Währungsformaten hinzu, um die Genauigkeit der numerischen Werte zu steuern.
• Entfernen Sie die veraltete Eigenschaft tabKey von den Komponenten Tab und TabPanel Verwenden Sie stattdessen die Eigenschaft id.
• Entfernen Sie die veraltete Eigenschaft background der css-Eigenschaft der Komponenten Box und Inline. Verwenden Sie stattdessen die Eigenschaft backgroundColor.
• Entfernen Sie die veraltete Eigenschaft className von den Komponenten Button und Link.
• Entfernen Sie die veraltete Eigenschaft invalid von der Komponente FormFieldGroup.
• Entfernen Sie die veraltete Eigenschaft layout der css-Eigenschaft der Komponenten Box und Inline. Verwenden Sie stattdessen die Eigenschaft stack.
• Entfernen Sie die veraltete Eigenschaft onClose aus der Komponente FocusView. Verwenden Sie stattdessen die Eigenschaft setShown.
• Entfernen Sie die veraltete Eigenschaft onKeyPress von den Komponenten TextArea und TextField.
• Die Eigenschaft onChange in der Komponente DateField erhält jetzt direkt den Wert anstelle des Änderungsereignisses.
• Die layout-Eigenschaftswerte in der Komponente FormFieldGroup wurden von row und column zu horizontal und vertical geändert.

8.10.0

• Fügen Sie isSandbox zu userContext hinzu.

8.9.3

• Ändern Sie die Typdefinition für das Callback-Argument onPress von SignInView, damit sie mit dem tatsächlichen Laufzeitwert übereinstimmt.
• Aktualisieren Sie die @remote-ui-Abhängigkeiten.

8.9.2

• Korrigieren Sie die minTileWidth-Eigenschaftstypen, um nur kompatible Werte zu akzeptieren.
• Entfernen Sie den Typ React.RefObject aus der Eigenschaft trigger der Tooltip-Komponente, da er zur Laufzeit nicht unterstützt wird.
• Fügen Sie den Komponenten Tab und TabPanel die Eigenschaft id hinzu, um tabKey zu ersetzen.
• Entfernen Sie den Hinweis auf die Einstellung aus den Eigenschaften für die Rahmenfarbe (borderColor, borderBottomColor, borderLeftColor, borderRightColor, borderTopColor) in der css-Eigenschaft der Komponenten Box und Inline.
• Fügen Sie die Eigenschaften für Rahmenstil und -breite (borderStyle, borderWidth, borderBottomStyle, borderBottomWidth, borderLeftStyle, borderLeftWidth, borderRightStyle, borderRightWidth, borderTopStyle, borderTopWidth) zur css-Eigenschaft der Komponenten Box und Inline hinzu.
• Fügen Sie der Eigenschaft name der Komponente Icon Literaltypen hinzu.

8.9.1

• Verwenden Sie korrigierte Abhängigkeitsversionen.
• Beheben Sie Probleme mit Test-Wrapper-Suchmethoden.

8.9.0

• Fügen Sie die Eigenschaft value der Komponente DateField hinzu.
• Fügen Sie den Hinweis über die Einstellung der Funktion der Eigenschaft background der css-Eigenschaft der Komponenten Box und Inline hinzu.
• Fügen Sie den Hinweis über die Einstellung der Funktion der Eigenschaft className der Komponenten Button und Link hinzu.
• Fügen Sie den Hinweis über die Einstellung der Funktion zur Eigenschaft invalid der Komponente FormFieldGroup hinzu.
• Fügen Sie den Hinweis über die Einstellung der Funktion stattdessen zur Eigenschaft layout der css-Eigenschaft der Komponenten Box und Inline hinzu.
• Fügen Sie den Hinweis über die Einstellung der Funktion zur Eigenschaft tabKeyder Komponenten Tab und TabPanel hinzu.
• Fügen Sie den Hinweis über die Einstellung der Funktion zu den Rahmenfarben-Eigenschaften (borderColor, borderTopColor, borderRightColor, borderBottomColor, borderLeftColor) der css-Eigenschaft der Komponenten Box und Inline hinzu. Verwenden Sie stattdessen die keyline-Eigenschaft für den Rahmenstil.
• Hinweis auf Einstellung der Funktion aus den Eigenschaften value und checked entfernen.

8.8.0

• Fügen Sie die Komponente StripeFileUploader hinzu.
• Fügen Sie dem Umgebungskontext die Eigenschaft platform hinzu.
• Fügen Sie appContext zum Typ ExtensionContextValue hinzu.
• Fügen Sie Typen für AuthorizedPermission and AuthorizedContentSecurityPolicy hinzu.
• Fügen Sie einige Utility-Funktionen für die Interaktion mit appContext hinzu:
  • getUserAuthorizedPermissions: Ruft den Schnittpunkt zwischen den autorisierten Berechtigungen der App und denen des aktuellen Nutzers/der aktuellen Nutzerin des Dashboards ab.
  • isPermissionAuthorized: Gibt an, ob eine Berechtigung in den autorisierten Berechtigungen der App enthalten ist.
  • isSourceInAuthorizedCSP: Gibt an, ob sich eine URL in den autorisierten Verbindungs- oder Bildquellen der App befindet.

8.7.0

• Fügen Sie dem Konto, das in der Eigenschaft userContext an die Erweiterungen übergeben wird, roles hinzu.

8.6.0

• Fügen Sie die Eigenschaft secondaryAction zu SignInView hinzu.
• Fügen Sie target zu den Aktionseigenschaften von SignInView hinzu.
• Sowohl href als auch onPress bei SignInView-Aktionseigenschaften zulassen.

8.5.0

• Fügen Sie dem Umgebungskontext die Eigenschaft constants hinzu.

8.4.1

• SignInView-Komponente hinzufügen.

8.3.0

• Entfernen Sie nicht unterstützte Eigenschaft contentUses von TableCell- und TableHeaderCell-Typisierung.
• useToast wurde aktualisiert, um die Utility-Methoden show und dismiss zurückzugeben.

8.2.0

• StripeAppsHttpResponse.prototype.toJSON() gibt jetzt ein abgelehntes Promise zurück, wenn der HTTP-Antworttext leer war.
• Fügen Sie Unterstützung für den Aufruf von fetchStripeSignature mit geschachteltem JSON hinzu.
• Korrigieren Sie debug, um Eigenschaften gemäß der Option all zu filtern.
• Fügen Sie tabKey zu Tab und TabPanel hinzu.
• Aktualisieren Sie die stripe-Paketabhängigkeit auf ^9.11.0.
• Fügen Sie external zu Link hinzu.
• Fügen Sie die Eigenschaft setShown zu FocusView hinzu.
• Fügen Sie die Utility-Funktion showToast zur Darstellung von Toast-Benachrichtigungen am unteren Rand der Ansicht einer App hinzu.

8.1.0

• Korrigieren Sie die ExtensionContextValue-Typisierung, um name- und objectContext-Werte als möglicherweise null zu markieren.
• Fügen Sie textAlign zu Box css hinzu.
• Machen Sie die Eigenschaft onSave optional für SettingsView-Komponenten.
• Upgrade auf @remote-ui/react 4.5.2.
• Sparkline-Komponente hinzufügen.

8.0.0

• Fügen Sie den Hinweis über die Einstellung der Funktion zur Eigenschaft value der Komponenten TextArea, TextField und Select hinzu.
• Fügen Sie den Hinweis über die Einstellung der Funktion zur Eigenschaft checked der Komponenten Checkbox, Radio und Switch hinzu.
• Nicht unterstützte outerRef-Eigenschaften aus Eingaben entfernen.

7.1.0

• Fügen Sie brandIcon and brandColor zu ContextView hinzu.

7.0.0

• Schaffen Sie die Komponente Notice ab; Verwenden Sie stattdessen Banner.
• Fügen Sie overflowX und overflowY zu Box css hinzu.

6.3.1

• Interne Aktualisierung, keine nutzerorientierten Änderungen.

6.3.0

• Fügen Sie die Komponente Banner hinzu.
• Fügen Sie einen Hinweis über die Einstellung der Funktion für die Komponente Notice hinzu.
• Fügen Sie locale zu ExtensionContextValue['oauthContext'] hinzu.
• Fügen Sie overflowWrap und wordBreak zu den css-Eigenschaften von Box hinzu.
• Fügen Sie textTransform zu den css-Eigenschaften von Box und Inline hinzu.
• Fügen Sie die Eigenschaften primaryAction, secondaryAction und footerContent zu ContextView hinzu.
• Fügen Sie whiteSpace zu den css-Eigenschaften von Box hinzu.

6.2.0

• Verbesserungen bei BarChart und LineChart:
  • Konfigurierbare Achsenformatierung.
  • Konfigurierbare Formatierung von Werten.
  • Konfigurierbare Kanal-Domains.
  • Konfigurierbare Kanalbereiche.
  • Achsenbeschriftungen und Häkchen in Diagrammen ein-/ausblenden.
  • Rasterlinien in Diagrammen ein-/ausblenden.
  • QuickInfos in Diagrammvoreinstellungen ein-/ausblenden.
  • Legenden in Diagrammvoreinstellungen ein-/ausblenden.

6.1.0

• Fügen Sie ein Bestätigungsdialogfeld zu FocusView hinzu.
• Fügen Sie die Komponenten Chip und ChipList hinzu.
• Aktualisieren Sie das Dienstprogramm getDashboardUserEmail, um die E-Mail direkt zurückzugeben und das Promise abzulehnen, wenn ein Fehler auftritt.
• Beheben Sie, dass React-Komponenten in der label-Eigenschaft von Formularelementen nicht akzeptiert werden.
• text-overflow: ellipsis and word-wrap: normal | break-word auf Box css.
• Fügen Sie country zu dem Konto hinzu, das in der Eigenschaft userContext an die Erweiterungen übergeben wird.
• data:-URL-Unterstützung für die Img-Komponente hinzufügen. Erfahren Sie mehr über die Img-Komponente.

6.0.0

• E-Mail im Ansichtskontext wird nicht mehr unterstützt.
• Konsolidierte Dienstprogramme in /utils-Pfad.
• React-Reconciler-Abhängigkeitsproblem bei Unit-Tests behoben.

5.0.1

• Korrektur der Eigenschaftentypen für Switch, Checkbox und Radio.

5.0.0

• Fügt die Komponenten Accordion, Icon, Spinner und Tooltip hinzu.
• Fügt QuickInfos zu BarChart und LineChart hinzu.
• Korrektur der Eigenschaftentypisierung für BarChart und LineChart.
• Die Kontextparameter der Legacy-Ansicht werden nicht mehr unterstützt.
• Ermöglicht die Festlegung der Breite durch css={{ width: .. }} bei Select, TextArea, TextField, Button und Link.
• Ermöglicht die Festlegung der internen horizontalen Ausrichtung durch css={{ alignX: .. }} auf Button und Link.
• Fügt die Funktion clipboardWriteText hinzu.
• Fügt die Funktion getDashboardUserEmail hinzu.

4.0.0

• Die Eigenschaft slot wird abgeschafft.

3.2.0

• Fügt die Funktion createOAuthState hinzu.
• Fügt dem Typ ExtensionContextValue oauthContext hinzu.

3.1.0

• Fügt die Komponente Img hinzu.

3.0.0

• Fügt Unterstützung für die Komponenten Notice, Charts und Tabs hinzu.
• Wichtige Änderungen:
  • ListItem: Zuvor waren Inhalte, die als untergeordnete Elemente übergeben wurden, die primären Inhalte, die in der Komponente gerendert wurden. Nun wird der Hauptinhalt an die Eigenschaft title übergeben. Der Slot description wurde auch einer Eigenschaft secondaryTitle neu zugewiesen.
  • MenuTrigger: Diese Komponente wurde zugunsten der Eigenschaft trigger für die Komponente Menu eingestellt. Die Nutzung der Slot API wurde ebenfalls entfernt.
• Berechtigungen, die an den Nutzerkontext übergeben wurden, wurden entfernt.

2.2.1

• docs.json-Dateien in dist angeben.

2.2.0

• Fügen Sie die Eigenschaft actions zu ContextView hinzu.

2.1.0

• Führt die Komponente ButtonGroup ein.
• Entfernt den margin-bottom von Formularsteuerelementen.
• Gibt standardmäßig die Schaltfläche white-space: nowrap und alignY: center an.
• Bei Schaltflächendesigns wird jetzt eine min-height für alle Größenvarianten festgelegt.
• Verkleinert Link und Button, um ihren Inhalt anzupassen.
• Gibt das Attribut defaultValue für TextField und TextArea an.
• Ermöglicht das Ausblenden von error und description in Formularsteuerelementen über die Eigenschaft hiddenElements.
• Gibt die Eigenschaften invalid und size für Select und TextArea an.
• Gibt das Attribut defaultChecked für Radio an.
• Gibt die Eigenschaften resizeable und rows für TextArea an.
• Behebt ungültigen Status von Kontrollkomponenten.
• Behebt ein Problem mit der zweimaligen Auslösung von Chip onDropdown.
• Behebt Probleme mit dem Divider-Rendering.

2.0.3

• Gibt ein Promise von useRefreshDashboardData zurück, das nach dem Aktualisieren der Dashboard-Daten aufgelöst wird.
• Fügt die fetchStripeSignature-Methode hinzu, die optional zusätzliche Anfrage-Nutzlast akzeptiert. Die Signatur kann verwendet werden, um eine authentifizierte Anfrage an das Backend Ihrer App zu stellen.
• Es wurde ein Problem behoben, bei dem die Testelement-Prüfmethode .is eine Komponente manchmal nicht ermitteln konnte.

2.0.2

• Behebt ein Problem mit dem testing-Paket, bei dem Komponenten mit Fragment-Eigenschaften nicht mit wrapper.find() gefunden werden konnten.

2.0.1

• Ruft eine aktualisierte Abhängigkeit ab, die #55 und #161. behebt.

2.0.0

• Behebt einen Renderfehler mit SettingsView.
• Aktualisiert die SettingsView-Typen, damit sie mit den verfügbaren Komponenten-Eigenschaften übereinstimmen.
• Fügt einen getMockContextProps-Helper für Tests hinzu. Erfahren Sie mehr über Kontexteigenschaften.
• Die Listenkomponente akzeptiert jetzt React.ReactNode als gültigen Typ der Eigenschaft value, statt nur eine string.
• Fügt den Hover-Status zu ListItem-Komponenten hinzu.
• Aktualisiert die ListItem-Komponente so, dass der Hover-Status nur sichtbar ist, wenn eine Aktion zugeordnet ist.
• Korrigieren Sie das Rendern der Auswahl, wenn mehrere „true“ ist.
• Beheben Sie die zweifache Auslösung von Checkbox onChange.

1.1.7

• Fügt ein „Testing“-Modul hinzu, das Hilfsmittel zum Erstellen von Jest-Tests für Apps enthält. Erfahren Sie mehr über Nutzeroberflächen-Tests.
• Korrigiert einige Komponenten, die React-Knoten als Eigenschaften verwenden:
  • MenuGroup unterstützt jetzt die Eigenschaft title.
  • FocusView unterstützt jetzt die Eigenschaft footerContent.
  • SettingsView unterstützt jetzt die Eigenschaft headerActions.
• Einige Korrekturen und Grammatik-Updates.

1.1.6

• Hinzugefügte Typen für FocusView, SettingsView und ContextView.
• Exportieren einer neuen Konstante STRIPE_API_KEY von http_client, die beim Initialisieren des Stripe-API-Clients verwendet werden soll.