Komponente laden...
Laden
Ich danke Ihnen! Ich werde
dieses Projekt so schnell wie möglich aktualisieren.
dieses Projekt so schnell wie möglich aktualisieren.
Huch! Beim Absenden des Formulars ist etwas schief gelaufen.
So aktivieren Sie die Google-Authentifizierung
So aktivieren Sie die Facebook-Authentifizierung
So aktivieren Sie die Spotify-Authentifizierung
Wie man die Dribbble-Authentifizierung aktiviert
Wie man die Github-Authentifizierung aktiviert
So aktivieren Sie die LinkedIn-Authentifizierung
So aktivieren Sie passwortlose Anmeldungen
So konfigurieren Sie die Kennwortüberprüfung
Passwort ein-/ausblenden
Wie man mit Profilbildern arbeitet
So fügen Sie einen Fluss für vergessene Passwörter hinzu
Wie man mit Kontrollkästchen arbeitet
Wie man Preistabellen konfiguriert
Über das Stripe-Kundenportal
{"type":"@webflow/XscpData","payload":{"nodes":[{"_id":"da018361-24f2-56f5-ba60-d84905fba45c","type":"Link","tag":"a","classes":["a83da088-0138-44ea-69a5-164330f9a8f2"],"children":["5558da34-9d6e-e6ef-650c-a972c56ee1b1","20c82827-b0bc-3d4b-2c77-9d5859ced745"],"data":{"search":{"exclude":false},"xattr":[{"name":"data-ms-content","value":"has-failed-payment"},{"name":"data-ms-bind:style","value":"display:flex"},{"name":"data-ms-action","value":"customer-portal"}],"block":"inline","displayName":"","devlink":{"runtimeProps":{},"slot":""},"attr":{"id":""},"visibility":{"conditions":[]},"button":false,"link":{"mode":"external","url":"#"}}},{"_id":"5558da34-9d6e-e6ef-650c-a972c56ee1b1","type":"HtmlEmbed","tag":"div","classes":["409172eb-552d-a684-b4a2-40488059d3b0"],"children":[],"v":"<svg xmlns=\"http://www.w3.org/2000/svg\" height=\"32px\" viewBox=\"0 0 24 24\" width=\"32px\" fill=\"currentColor\"><path d=\"M4.47 21h15.06c1.54 0 2.5-1.67 1.73-3L13.73 4.99c-.77-1.33-2.69-1.33-3.46 0L2.74 18c-.77 1.33.19 3 1.73 3zM12 14c-.55 0-1-.45-1-1v-2c0-.55.45-1 1-1s1 .45 1 1v2c0 .55-.45 1-1 1zm1 4h-2v-2h2v2z\"/></svg>","data":{"insideRTE":false,"search":{"exclude":true},"embed":{"meta":{"html":"<svg xmlns=\"http://www.w3.org/2000/svg\" height=\"32px\" viewBox=\"0 0 24 24\" width=\"32px\" fill=\"currentColor\"><path d=\"M4.47 21h15.06c1.54 0 2.5-1.67 1.73-3L13.73 4.99c-.77-1.33-2.69-1.33-3.46 0L2.74 18c-.77 1.33.19 3 1.73 3zM12 14c-.55 0-1-.45-1-1v-2c0-.55.45-1 1-1s1 .45 1 1v2c0 .55-.45 1-1 1zm1 4h-2v-2h2v2z\"/></svg>","div":false,"iframe":false,"script":false,"compilable":false},"type":"html"},"displayName":"","attr":{"id":""},"xattr":[],"visibility":{"conditions":[]},"devlink":{"runtimeProps":{},"slot":""}}},{"_id":"20c82827-b0bc-3d4b-2c77-9d5859ced745","type":"Block","tag":"div","classes":[],"children":["20c82827-b0bc-3d4b-2c77-9d5859ced746","20c82827-b0bc-3d4b-2c77-9d5859ced747"],"data":{"search":{"exclude":false},"xattr":[],"text":true,"displayName":"","devlink":{"runtimeProps":{},"slot":""},"attr":{"id":""},"visibility":{"conditions":[]},"tag":"div"}},{"_id":"20c82827-b0bc-3d4b-2c77-9d5859ced746","text":true,"v":"This is account is currently deactived due to a failed payment. "},{"_id":"20c82827-b0bc-3d4b-2c77-9d5859ced747","type":"Span","tag":"span","classes":["bf91e4eb-7766-8c44-9fda-f331c96544be"],"children":["20c82827-b0bc-3d4b-2c77-9d5859ced748"],"data":{"displayName":"","attr":{"id":""},"xattr":[],"search":{"exclude":false},"visibility":{"conditions":[]},"devlink":{"runtimeProps":{},"slot":""}}},{"_id":"20c82827-b0bc-3d4b-2c77-9d5859ced748","text":true,"v":"Update Payment Method →"}],"styles":[{"_id":"a83da088-0138-44ea-69a5-164330f9a8f2","fake":false,"type":"class","name":"ms-failed-banner","namespace":"","comb":"","styleLess":"position: relative; display: flex; width: 100%; min-height: 60px; padding-left: 20px; align-items: center; grid-column-gap: 16px; grid-row-gap: 16px; background-color: hsla(10.251256281407036, 83.26%, 46.86%, 1.00); color: white; font-weight: 600; text-decoration: none;","variants":{},"children":[],"createdBy":"572e16b6f586648f39f82496","selector":null},{"_id":"409172eb-552d-a684-b4a2-40488059d3b0","fake":false,"type":"class","name":"ms-failed-icon","namespace":"","comb":"","styleLess":"display: flex; overflow: hidden; width: 32px; height: 32px; justify-content: center; align-items: center;","variants":{},"children":["824396c3-c4f0-865f-e2a3-a9c07dff11de","28e58cd1-46e4-e6a1-5ee4-3bc7166e0be6","8abd0348-487b-2137-77a3-686e9fc7a94b","b036014d-6832-dfec-81cf-c0daca3e1d0f"],"createdBy":"572e16b6f586648f39f82496","selector":null},{"_id":"bf91e4eb-7766-8c44-9fda-f331c96544be","fake":false,"type":"class","name":"ms-failed-link","namespace":"","comb":"","styleLess":"border-bottom-style: solid; border-bottom-width: 1px; border-bottom-color: white;","variants":{},"children":["ea36f7c9-cc4e-415f-fbbd-11153847c66d"],"createdBy":"572e16b6f586648f39f82496","selector":null}],"assets":[],"ix1":[],"ix2":{"interactions":[],"events":[],"actionLists":[]}},"meta":{"unlinkedSymbolCount":0,"droppedLinks":0,"dynBindRemovedCount":0,"dynListBindRemovedCount":0,"paginationRemovedCount":0}}
Klonen in Webflow
Komponente kopieren
{"type":"@webflow/XscpData","payload":{"nodes":[{"_id":"da018361-24f2-56f5-ba60-d84905fba45c","type":"Link","tag":"a","classes":["a83da088-0138-44ea-69a5-164330f9a8f2"],"children":["5558da34-9d6e-e6ef-650c-a972c56ee1b1","20c82827-b0bc-3d4b-2c77-9d5859ced745"],"data":{"search":{"exclude":false},"xattr":[{"name":"data-ms-content","value":"has-failed-payment"},{"name":"data-ms-bind:style","value":"display:flex"},{"name":"data-ms-action","value":"customer-portal"}],"block":"inline","displayName":"","devlink":{"runtimeProps":{},"slot":""},"attr":{"id":""},"visibility":{"conditions":[]},"button":false,"link":{"mode":"external","url":"#"}}},{"_id":"5558da34-9d6e-e6ef-650c-a972c56ee1b1","type":"HtmlEmbed","tag":"div","classes":["409172eb-552d-a684-b4a2-40488059d3b0"],"children":[],"v":"<svg xmlns=\"http://www.w3.org/2000/svg\" height=\"32px\" viewBox=\"0 0 24 24\" width=\"32px\" fill=\"currentColor\"><path d=\"M4.47 21h15.06c1.54 0 2.5-1.67 1.73-3L13.73 4.99c-.77-1.33-2.69-1.33-3.46 0L2.74 18c-.77 1.33.19 3 1.73 3zM12 14c-.55 0-1-.45-1-1v-2c0-.55.45-1 1-1s1 .45 1 1v2c0 .55-.45 1-1 1zm1 4h-2v-2h2v2z\"/></svg>","data":{"insideRTE":false,"search":{"exclude":true},"embed":{"meta":{"html":"<svg xmlns=\"http://www.w3.org/2000/svg\" height=\"32px\" viewBox=\"0 0 24 24\" width=\"32px\" fill=\"currentColor\"><path d=\"M4.47 21h15.06c1.54 0 2.5-1.67 1.73-3L13.73 4.99c-.77-1.33-2.69-1.33-3.46 0L2.74 18c-.77 1.33.19 3 1.73 3zM12 14c-.55 0-1-.45-1-1v-2c0-.55.45-1 1-1s1 .45 1 1v2c0 .55-.45 1-1 1zm1 4h-2v-2h2v2z\"/></svg>","div":false,"iframe":false,"script":false,"compilable":false},"type":"html"},"displayName":"","attr":{"id":""},"xattr":[],"visibility":{"conditions":[]},"devlink":{"runtimeProps":{},"slot":""}}},{"_id":"20c82827-b0bc-3d4b-2c77-9d5859ced745","type":"Block","tag":"div","classes":[],"children":["20c82827-b0bc-3d4b-2c77-9d5859ced746","20c82827-b0bc-3d4b-2c77-9d5859ced747"],"data":{"search":{"exclude":false},"xattr":[],"text":true,"displayName":"","devlink":{"runtimeProps":{},"slot":""},"attr":{"id":""},"visibility":{"conditions":[]},"tag":"div"}},{"_id":"20c82827-b0bc-3d4b-2c77-9d5859ced746","text":true,"v":"This is account is currently deactived due to a failed payment. "},{"_id":"20c82827-b0bc-3d4b-2c77-9d5859ced747","type":"Span","tag":"span","classes":["bf91e4eb-7766-8c44-9fda-f331c96544be"],"children":["20c82827-b0bc-3d4b-2c77-9d5859ced748"],"data":{"displayName":"","attr":{"id":""},"xattr":[],"search":{"exclude":false},"visibility":{"conditions":[]},"devlink":{"runtimeProps":{},"slot":""}}},{"_id":"20c82827-b0bc-3d4b-2c77-9d5859ced748","text":true,"v":"Update Payment Method →"}],"styles":[{"_id":"a83da088-0138-44ea-69a5-164330f9a8f2","fake":false,"type":"class","name":"ms-failed-banner","namespace":"","comb":"","styleLess":"position: relative; display: flex; width: 100%; min-height: 60px; padding-left: 20px; align-items: center; grid-column-gap: 16px; grid-row-gap: 16px; background-color: hsla(10.251256281407036, 83.26%, 46.86%, 1.00); color: white; font-weight: 600; text-decoration: none;","variants":{},"children":[],"createdBy":"572e16b6f586648f39f82496","selector":null},{"_id":"409172eb-552d-a684-b4a2-40488059d3b0","fake":false,"type":"class","name":"ms-failed-icon","namespace":"","comb":"","styleLess":"display: flex; overflow: hidden; width: 32px; height: 32px; justify-content: center; align-items: center;","variants":{},"children":["824396c3-c4f0-865f-e2a3-a9c07dff11de","28e58cd1-46e4-e6a1-5ee4-3bc7166e0be6","8abd0348-487b-2137-77a3-686e9fc7a94b","b036014d-6832-dfec-81cf-c0daca3e1d0f"],"createdBy":"572e16b6f586648f39f82496","selector":null},{"_id":"bf91e4eb-7766-8c44-9fda-f331c96544be","fake":false,"type":"class","name":"ms-failed-link","namespace":"","comb":"","styleLess":"border-bottom-style: solid; border-bottom-width: 1px; border-bottom-color: white;","variants":{},"children":["ea36f7c9-cc4e-415f-fbbd-11153847c66d"],"createdBy":"572e16b6f586648f39f82496","selector":null}],"assets":[],"ix1":[],"ix2":{"interactions":[],"events":[],"actionLists":[]}},"meta":{"unlinkedSymbolCount":0,"droppedLinks":0,"dynBindRemovedCount":0,"dynListBindRemovedCount":0,"paginationRemovedCount":0}}
Browser nicht unterstützt. Verwenden Sie
Chrome oder Safari.
Chrome oder Safari.
Über diese Komponente
AI-generiert
Komponentenbeschreibung (von AI generiert)
The Failed Payment Banner is designed to inform users about account deactivation due to failed payment, providing a clear call to action for updating payment methods.
Wesentliche Merkmale:
- Displays a warning message about account status
- Includes a prominent link for updating payment information
- Responsive design suitable for various screen sizes
- Customizable styles to match brand aesthetics
Gestaltungselemente:
- Bright background color
- White text for contrast and readability
- Icon included to enhance visual communication
Potenzielle Anwendungsfälle:
- E-commerce websites notifying customers of payment issues
- Subscription services alerting users about account status
- SaaS platforms requiring immediate action from users
Conclusion: The Failed Payment Banner is an effective component for enhancing user communication regarding payment issues, making it a valuable addition for businesses that rely on recurring payments.
Mit dem Bau beginnen
Bauen Sie Ihre Träume
Memberstack ist 100% kostenlos, bis Sie bereit sind, zu starten - worauf warten Sie also noch? Erstellen Sie Ihre erste App und beginnen Sie noch heute mit der Entwicklung.