Component laden...
Laden
Bedankt! Ik zal
dit project zo snel mogelijk bijwerken.
dit project zo snel mogelijk bijwerken.
Oeps! Er ging iets mis bij het verzenden van het formulier.
Hoe Google-verificatie inschakelen
Facebook-verificatie inschakelen
Spotify verificatie inschakelen
Hoe Dribbble verificatie in te schakelen
Hoe de Github-authenticatie in te schakelen
Hoe LinkedIn verificatie inschakelen
Hoe wachtwoordloze aanmeldingen inschakelen
Hoe wachtwoordvalidatie configureren
Hoe wachtwoord tonen/verbergen
Werken met profielafbeeldingen
Hoe een wachtwoord vergeten-flow toevoegen
Werken met selectievakjes
Hoe prijstabellen configureren
Over het Stripe klantenportaal
{"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
Kopieer component
{"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 niet ondersteund. Gebruik
Chrome of Safari.
Chrome of Safari.
Over dit onderdeel
AI-gegenereerd
Beschrijving van onderdeel (gegenereerd door AI)
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.
Belangrijkste kenmerken:
- Displays a warning message about account status
- Includes a prominent link for updating payment information
- Responsive ontwerp geschikt voor verschillende schermformaten
- Customizable styles to match brand aesthetics
Ontwerpelementen:
- Bright background color
- White text for contrast and readability
- Icon included to enhance visual communication
Potentiële gebruikssituaties:
- 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.
Bouwen
Begin met het bouwen van je dromen
Memberstack is 100% gratis totdat u klaar bent om te lanceren - dus waar wacht u nog op? Maak je eerste app en begin vandaag nog.