Loading Component...

Loading

More Components

View All
Part of

Failed Payment Banner

Oops! Something went wrong while submitting the form.
Failed Payment Banner
{"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}}
Clone in Webflow
Copy 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 not supported. Use
CC Chrome or SS Safari.

About this component

AI Generated

Component Description (Generated by 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.

Key Features:

  • 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

Design Elements:

  • Bright background color (hsla(10.25, 83.26%, 46.86%, 1.00)) for visibility
  • White text for contrast and readability
  • Icon included to enhance visual communication

Potential Use Cases:

  • 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.

Similar Components

View All