Chargement du composant...

Chargement

Plus de composants

Voir tout
Une partie de

Update Payment Banner

Oups ! Un problème s'est produit lors de l'envoi du formulaire.
Update Payment Banner
{"type":"@webflow/XscpData","payload":{"nodes":[{"_id":"ebebde6a-22da-605d-65c4-20a3f6d37f63","type":"Link","tag":"a","classes":["5e88e703-5ec0-477c-f14e-bc207508dfbd"],"children":["ebebde6a-22da-605d-65c4-20a3f6d37f64","ebebde6a-22da-605d-65c4-20a3f6d37f65"],"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":"ebebde6a-22da-605d-65c4-20a3f6d37f64","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":"ebebde6a-22da-605d-65c4-20a3f6d37f65","type":"Block","tag":"div","classes":[],"children":["ebebde6a-22da-605d-65c4-20a3f6d37f66","ebebde6a-22da-605d-65c4-20a3f6d37f67"],"data":{"search":{"exclude":false},"xattr":[],"text":true,"displayName":"","devlink":{"runtimeProps":{},"slot":""},"attr":{"id":""},"visibility":{"conditions":[]},"tag":"div"}},{"_id":"ebebde6a-22da-605d-65c4-20a3f6d37f66","text":true,"v":"This is account is currently deactived due to a failed payment. "},{"_id":"ebebde6a-22da-605d-65c4-20a3f6d37f67","type":"Span","tag":"span","classes":["bf91e4eb-7766-8c44-9fda-f331c96544be","ea36f7c9-cc4e-415f-fbbd-11153847c66d"],"children":["ebebde6a-22da-605d-65c4-20a3f6d37f68"],"data":{"displayName":"","attr":{"id":""},"xattr":[],"search":{"exclude":false},"visibility":{"conditions":[]},"devlink":{"runtimeProps":{},"slot":""}}},{"_id":"ebebde6a-22da-605d-65c4-20a3f6d37f68","text":true,"v":"Update Payment Method →"}],"styles":[{"_id":"5e88e703-5ec0-477c-f14e-bc207508dfbd","fake":false,"type":"class","name":"ms-failed-card","namespace":"","comb":"","styleLess":"position: relative; display: flex; min-height: 60px; margin-top: 8px; margin-right: 8px; margin-bottom: 8px; margin-left: 8px; padding-left: 20px; align-items: center; grid-column-gap: 16px; grid-row-gap: 16px; border-top-left-radius: 10px; border-top-right-radius: 10px; border-bottom-left-radius: 10px; border-bottom-right-radius: 10px; background-color: hsla(352.5, 53.33%, 94.12%, 1.00); color: hsla(359.5238095238095, 54.78%, 45.10%, 1.00); 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},{"_id":"ea36f7c9-cc4e-415f-fbbd-11153847c66d","fake":false,"type":"class","name":"is-red","namespace":"","comb":"&","styleLess":"border-bottom-color: hsla(359.5238095238095, 54.78%, 45.10%, 1.00);","variants":{},"children":[],"createdBy":"572e16b6f586648f39f82496","selector":null}],"assets":[],"ix1":[],"ix2":{"interactions":[],"events":[],"actionLists":[]}},"meta":{"unlinkedSymbolCount":0,"droppedLinks":0,"dynBindRemovedCount":0,"dynListBindRemovedCount":0,"paginationRemovedCount":0}}
Cloner dans Webflow
Composant de copie
{"type":"@webflow/XscpData","payload":{"nodes":[{"_id":"ebebde6a-22da-605d-65c4-20a3f6d37f63","type":"Link","tag":"a","classes":["5e88e703-5ec0-477c-f14e-bc207508dfbd"],"children":["ebebde6a-22da-605d-65c4-20a3f6d37f64","ebebde6a-22da-605d-65c4-20a3f6d37f65"],"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":"ebebde6a-22da-605d-65c4-20a3f6d37f64","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":"ebebde6a-22da-605d-65c4-20a3f6d37f65","type":"Block","tag":"div","classes":[],"children":["ebebde6a-22da-605d-65c4-20a3f6d37f66","ebebde6a-22da-605d-65c4-20a3f6d37f67"],"data":{"search":{"exclude":false},"xattr":[],"text":true,"displayName":"","devlink":{"runtimeProps":{},"slot":""},"attr":{"id":""},"visibility":{"conditions":[]},"tag":"div"}},{"_id":"ebebde6a-22da-605d-65c4-20a3f6d37f66","text":true,"v":"This is account is currently deactived due to a failed payment. "},{"_id":"ebebde6a-22da-605d-65c4-20a3f6d37f67","type":"Span","tag":"span","classes":["bf91e4eb-7766-8c44-9fda-f331c96544be","ea36f7c9-cc4e-415f-fbbd-11153847c66d"],"children":["ebebde6a-22da-605d-65c4-20a3f6d37f68"],"data":{"displayName":"","attr":{"id":""},"xattr":[],"search":{"exclude":false},"visibility":{"conditions":[]},"devlink":{"runtimeProps":{},"slot":""}}},{"_id":"ebebde6a-22da-605d-65c4-20a3f6d37f68","text":true,"v":"Update Payment Method →"}],"styles":[{"_id":"5e88e703-5ec0-477c-f14e-bc207508dfbd","fake":false,"type":"class","name":"ms-failed-card","namespace":"","comb":"","styleLess":"position: relative; display: flex; min-height: 60px; margin-top: 8px; margin-right: 8px; margin-bottom: 8px; margin-left: 8px; padding-left: 20px; align-items: center; grid-column-gap: 16px; grid-row-gap: 16px; border-top-left-radius: 10px; border-top-right-radius: 10px; border-bottom-left-radius: 10px; border-bottom-right-radius: 10px; background-color: hsla(352.5, 53.33%, 94.12%, 1.00); color: hsla(359.5238095238095, 54.78%, 45.10%, 1.00); 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},{"_id":"ea36f7c9-cc4e-415f-fbbd-11153847c66d","fake":false,"type":"class","name":"is-red","namespace":"","comb":"&","styleLess":"border-bottom-color: hsla(359.5238095238095, 54.78%, 45.10%, 1.00);","variants":{},"children":[],"createdBy":"572e16b6f586648f39f82496","selector":null}],"assets":[],"ix1":[],"ix2":{"interactions":[],"events":[],"actionLists":[]}},"meta":{"unlinkedSymbolCount":0,"droppedLinks":0,"dynBindRemovedCount":0,"dynListBindRemovedCount":0,"paginationRemovedCount":0}}
Navigateur non pris en charge. Utilisez
CC Chrome ou SS Safari.

A propos de ce composant

Généré par l'IA

Description du composant (générée par l'IA)

The Update Payment Banner is designed to inform users about a failed payment and prompt them to update their payment method. It combines visual elements with a clear call to action.

Caractéristiques principales :

  • Displays a message for users with failed payments
  • Includes an icon for visual emphasis
  • Features a prominent call-to-action link to update payment method
  • Conception adaptée à différents appareils
  • Customizable styles to match branding

Éléments de conception :

  • Flexbox layout for alignment and spacing
  • Soft background color with contrasting text for readability
  • Rounded corners for a modern look
  • Icon embedded within the banner for visual interest

Cas d'utilisation potentiels :

  • E-commerce websites needing to manage customer payments
  • Subscription services that require regular payment updates
  • SaaS platforms that handle user accounts and billing
  • Financial services that need to communicate payment issues
  • Any business that relies on recurring payments and wants to maintain customer engagement

Conclusion: The Update Payment Banner is a versatile component that effectively communicates payment issues while encouraging users to take action, making it an essential tool for businesses focused on customer retention.

Commencer à construire

Commencez à construire vos rêves

Memberstack est 100% gratuit jusqu'à ce que vous soyez prêt à vous lancer - alors, qu'attendez-vous ? Créez votre première application et commencez à construire dès aujourd'hui.