Loading Component...

Loading

More Components

View All
Part of

Animated Payment Confirmation

Oops! Something went wrong while submitting the form.
Animated Payment Confirmation
{"type":"@webflow/XscpData","payload":{"nodes":[{"_id":"8477ac5a-6a2a-8532-5d2b-8d14aa659e26","type":"Section","tag":"section","classes":["4f94329b-0296-47f6-871c-5164392342a8"],"children":["71c1de9d-e61b-f8ef-0fba-c201e878289b"],"data":{"grid":{"type":"section"},"search":{"exclude":false},"xattr":[],"displayName":"","devlink":{"runtimeProps":{},"slot":""},"attr":{"id":""},"visibility":{"conditions":[]},"tag":"section"}},{"_id":"71c1de9d-e61b-f8ef-0fba-c201e878289b","type":"Block","tag":"div","classes":["38e58aa7-b5cf-1e1f-0358-d1f1d3aec5f1"],"children":["47f8590d-0d13-49bf-5b9d-a5f01a852157"],"data":{"search":{"exclude":false},"xattr":[],"text":false,"displayName":"","devlink":{"runtimeProps":{},"slot":""},"attr":{"id":""},"visibility":{"conditions":[]},"tag":"div"}},{"_id":"47f8590d-0d13-49bf-5b9d-a5f01a852157","type":"Block","tag":"div","classes":["0a769bf2-7b90-d8cb-1f84-8674723e7d9a"],"children":["e8ff1c30-b6d3-fbd2-fc01-1e0fca5ead72","9a6f56c4-787a-d884-dc63-c77ab47ccf0b"],"data":{"search":{"exclude":false},"xattr":[],"text":false,"displayName":"","devlink":{"runtimeProps":{},"slot":""},"attr":{"id":""},"visibility":{"conditions":[]},"tag":"div"}},{"_id":"e8ff1c30-b6d3-fbd2-fc01-1e0fca5ead72","type":"Animation","tag":"div","classes":["b9b31a3e-b02e-860e-8e6a-13f0d127f7d6"],"children":[],"data":{"tag":"div","animation":{"tag":"lottie","val":{"renderMode":"svg","path":{"src":"https://cdn.prod.website-files.com/647dbea74b8fd164bbf5e671/647dbf0d06246eaceced511c_93181-success.json","origFileName":"93181-success.json","totalDuration":2},"loop":false,"playInReverse":false}},"displayName":"","attr":{"id":""},"xattr":[],"search":{"exclude":false},"visibility":{"conditions":[]}}},{"_id":"9a6f56c4-787a-d884-dc63-c77ab47ccf0b","type":"Block","tag":"div","classes":["3a74e563-1024-cc6c-34ac-e9fb0385d7d6"],"children":["cdb27fd7-c9ab-bd0f-4ff5-2ba6a8231b17","8db846da-f321-86e3-6a08-26a03f3114ac","ed837fb2-838b-807a-f546-5a692cf0ce97"],"data":{"search":{"exclude":false},"xattr":[],"text":false,"displayName":"","devlink":{"runtimeProps":{},"slot":""},"attr":{"id":""},"visibility":{"conditions":[]},"tag":"div"}},{"_id":"cdb27fd7-c9ab-bd0f-4ff5-2ba6a8231b17","type":"Heading","tag":"h1","classes":["ed904434-a901-620a-6769-d52a576b7439"],"children":["cdb27fd7-c9ab-bd0f-4ff5-2ba6a8231b18"],"data":{"search":{"exclude":false},"xattr":[],"displayName":"","devlink":{"runtimeProps":{},"slot":""},"attr":{"id":""},"visibility":{"conditions":[]},"tag":"h1"}},{"_id":"cdb27fd7-c9ab-bd0f-4ff5-2ba6a8231b18","text":true,"v":"Your payment has been received"},{"_id":"8db846da-f321-86e3-6a08-26a03f3114ac","type":"Paragraph","tag":"p","classes":["2198ef9b-b8db-4752-13ed-fba8f85b3f28"],"children":["8db846da-f321-86e3-6a08-26a03f3114ad"],"data":{"displayName":"","attr":{"id":""},"xattr":[],"search":{"exclude":false},"visibility":{"conditions":[]},"devlink":{"runtimeProps":{},"slot":""}}},{"_id":"8db846da-f321-86e3-6a08-26a03f3114ad","text":true,"v":"Thank you for your payment. Your plan has been upgraded to premium! Please check your email for a payment confirmation & invoice."},{"_id":"ed837fb2-838b-807a-f546-5a692cf0ce97","type":"Link","tag":"a","classes":["9d7f33c2-ce80-ad6b-62b8-23de31f8a238"],"children":["ed837fb2-838b-807a-f546-5a692cf0ce98"],"data":{"search":{"exclude":true},"xattr":[],"block":"","displayName":"","devlink":{"runtimeProps":{},"slot":""},"attr":{"id":""},"visibility":{"conditions":[]},"button":true,"link":{"mode":"external","url":"#"}}},{"_id":"ed837fb2-838b-807a-f546-5a692cf0ce98","text":true,"v":"Go to your dashboard"}],"styles":[{"_id":"4f94329b-0296-47f6-871c-5164392342a8","fake":false,"type":"class","name":"section_big","namespace":"","comb":"","styleLess":"position: relative; display: block; width: 100%; min-height: 100vh; padding-top: 20px; padding-right: 20px; padding-bottom: 20px; padding-left: 20px; justify-content: center; align-items: stretch; background-image: linear-gradient(77deg, hsla(256.3636363636363, 60.63%, 49.80%, 1.00), hsla(275.609756097561, 59.42%, 59.41%, 1.00) 32%, hsla(315.1219512195122, 63.73%, 62.16%, 1.00) 66%, hsla(336.3057324840764, 75.85%, 59.41%, 1.00));","variants":{},"children":[],"createdBy":"633c39086cc87120cfb65542","selector":null},{"_id":"38e58aa7-b5cf-1e1f-0358-d1f1d3aec5f1","fake":false,"type":"class","name":"section-inner","namespace":"","comb":"","styleLess":"position: absolute; left: 20px; top: 20px; right: 20px; bottom: 20px; display: flex; justify-content: center; align-items: center; flex-grow: 1; flex-shrink: 1; flex-basis: 0%; border-top-left-radius: 20px; border-top-right-radius: 20px; border-bottom-left-radius: 20px; border-bottom-right-radius: 20px; background-color: hsla(0, 0.00%, 100.00%, 1.00); background-image: @img_647dc4f289842cddfd57637b; background-position: 0px 0px; background-size: 500px; box-shadow: inset 0 2px 20px 0 rgba(0,0,0,0.2);","variants":{},"children":[],"createdBy":"633c39086cc87120cfb65542","selector":null},{"_id":"0a769bf2-7b90-d8cb-1f84-8674723e7d9a","fake":false,"type":"class","name":"container","namespace":"","comb":"","styleLess":"display: flex; width: 100%; max-width: 500px; flex-direction: column; align-items: center;","variants":{},"children":[],"createdBy":"633c39086cc87120cfb65542","selector":null},{"_id":"b9b31a3e-b02e-860e-8e6a-13f0d127f7d6","fake":false,"type":"class","name":"lottie","namespace":"","comb":"","styleLess":"","variants":{},"children":[],"createdBy":"633c39086cc87120cfb65542","selector":null},{"_id":"3a74e563-1024-cc6c-34ac-e9fb0385d7d6","fake":false,"type":"class","name":"center","namespace":"","comb":"","styleLess":"display: flex; overflow: hidden; flex-direction: column; justify-content: flex-end; align-items: center; text-align: center;","variants":{},"children":[],"createdBy":"633c39086cc87120cfb65542","selector":null},{"_id":"ed904434-a901-620a-6769-d52a576b7439","fake":false,"type":"class","name":"h1","namespace":"","comb":"","styleLess":"margin-top: 0px; font-size: 33px; font-weight: 600;","variants":{},"children":[],"createdBy":"633c39086cc87120cfb65542","selector":null},{"_id":"2198ef9b-b8db-4752-13ed-fba8f85b3f28","fake":false,"type":"class","name":"p","namespace":"","comb":"","styleLess":"margin-bottom: 20px; font-size: 16px; line-height: 1.6;","variants":{},"children":[],"createdBy":"633c39086cc87120cfb65542","selector":null},{"_id":"9d7f33c2-ce80-ad6b-62b8-23de31f8a238","fake":false,"type":"class","name":"button","namespace":"","comb":"","styleLess":"padding-top: 13px; padding-right: 25px; padding-bottom: 13px; padding-left: 25px; border-top-left-radius: 10px; border-top-right-radius: 10px; border-bottom-left-radius: 10px; border-bottom-right-radius: 10px; background-image: linear-gradient(49deg, hsla(254, 64.23%, 48.31%, 1.00), hsla(278, 59.70%, 60.29%, 1.00) 33%, hsla(322, 73.58%, 64.68%, 1.00) 70%, hsla(339, 75.85%, 58.60%, 1.00)); font-weight: 500;","variants":{},"children":[],"createdBy":"633c39086cc87120cfb65542","selector":null}],"assets":[{"cdnUrl":"https://cdn.prod.website-files.com/647dbea74b8fd164bbf5e671/647dbf0d06246eaceced511c_93181-success.json","siteId":"647dbea74b8fd164bbf5e671","width":0,"isHD":false,"height":0,"fileName":"647dbf0d06246eaceced511c_93181-success.json","createdOn":"2023-06-05T10:55:09.538Z","origFileName":"93181-success.json","fileHash":"93565979af0f0f9b890030bfc17718b9","variants":[],"mimeType":"application/json","s3Url":"https://s3.amazonaws.com/webflow-prod-assets/647dbea74b8fd164bbf5e671/647dbf0d06246eaceced511c_93181-success.json","_id":"647dbf0d06246eaceced511c","type":"LOTTIE","updatedOn":"2023-06-05T10:55:09.538Z","fileSize":21467},{"cdnUrl":"https://cdn.prod.website-files.com/647dbea74b8fd164bbf5e671/647dc4f289842cddfd57637b_ooorganize%20(4).svg","siteId":"647dbea74b8fd164bbf5e671","width":800,"isHD":false,"height":800,"fileName":"647dc4f289842cddfd57637b_ooorganize (4).svg","createdOn":"2023-06-05T11:20:18.715Z","origFileName":"ooorganize (4).svg","fileHash":"27d446f81acc30870931ba2b836e1dbf","variants":[],"mimeType":"image/svg+xml","s3Url":"https://s3.amazonaws.com/webflow-prod-assets/647dbea74b8fd164bbf5e671/647dc4f289842cddfd57637b_ooorganize%20(4).svg","thumbUrl":"https://cdn.prod.website-files.com/647dbea74b8fd164bbf5e671/647dc4f289842cddfd57637b_ooorganize%20(4).svg","_id":"647dc4f289842cddfd57637b","updatedOn":"2023-06-05T11:20:18.715Z","fileSize":17810}],"ix1":[],"ix2":{"interactions":[{"id":"i","interactionTypeId":"SCROLL_INTO_VIEW_INTERACTION","eventIds":["e","e-2"],"target":"647dbea74b8fd164bbf5e678|e8ff1c30-b6d3-fbd2-fc01-1e0fca5ead72","createdOn":1685962746775},{"id":"i-2","interactionTypeId":"SCROLL_INTO_VIEW_INTERACTION","eventIds":["e-3","e-4"],"target":"647dbea74b8fd164bbf5e678|9a6f56c4-787a-d884-dc63-c77ab47ccf0b","createdOn":1685962913598}],"events":[{"id":"e","name":"","animationType":"custom","eventTypeId":"SCROLL_INTO_VIEW","action":{"id":"","actionTypeId":"GENERAL_START_ACTION","instant":true,"config":{"delay":0,"easing":"","duration":0,"actionListId":"a","affectedElements":{},"playInReverse":false,"autoStopEventId":"e-2"}},"mediaQueries":["main","medium","small","tiny"],"target":{"id":"647dbea74b8fd164bbf5e678|e8ff1c30-b6d3-fbd2-fc01-1e0fca5ead72","appliesTo":"ELEMENT","styleBlockIds":[]},"targets":[{"id":"647dbea74b8fd164bbf5e678|e8ff1c30-b6d3-fbd2-fc01-1e0fca5ead72","appliesTo":"ELEMENT","styleBlockIds":[]}],"config":{"loop":false,"playInReverse":false,"scrollOffsetValue":0,"scrollOffsetUnit":"%","delay":null,"direction":null,"effectIn":null},"createdOn":1685962746775},{"id":"e-2","name":"","animationType":"preset","eventTypeId":"SCROLL_OUT_OF_VIEW","action":null,"mediaQueries":["main","medium","small","tiny"],"target":{"id":"647dbea74b8fd164bbf5e678|e8ff1c30-b6d3-fbd2-fc01-1e0fca5ead72","appliesTo":"ELEMENT","styleBlockIds":[]},"targets":[{"id":"647dbea74b8fd164bbf5e678|e8ff1c30-b6d3-fbd2-fc01-1e0fca5ead72","appliesTo":"ELEMENT","styleBlockIds":[]}],"config":{"loop":false,"playInReverse":false,"scrollOffsetValue":0,"scrollOffsetUnit":"%","delay":null,"direction":null,"effectIn":null},"createdOn":1685962746777},{"id":"e-3","name":"","animationType":"custom","eventTypeId":"SCROLL_INTO_VIEW","action":{"id":"","actionTypeId":"GENERAL_START_ACTION","instant":true,"config":{"delay":0,"easing":"","duration":0,"actionListId":"a-2","affectedElements":{},"playInReverse":false,"autoStopEventId":"e-4"}},"mediaQueries":["main","medium","small","tiny"],"target":{"id":"647dbea74b8fd164bbf5e678|9a6f56c4-787a-d884-dc63-c77ab47ccf0b","appliesTo":"ELEMENT","styleBlockIds":[]},"targets":[{"id":"647dbea74b8fd164bbf5e678|9a6f56c4-787a-d884-dc63-c77ab47ccf0b","appliesTo":"ELEMENT","styleBlockIds":[]}],"config":{"loop":false,"playInReverse":false,"scrollOffsetValue":0,"scrollOffsetUnit":"%","delay":null,"direction":null,"effectIn":null},"createdOn":1685962913598},{"id":"e-4","name":"","animationType":"preset","eventTypeId":"SCROLL_OUT_OF_VIEW","action":null,"mediaQueries":["main","medium","small","tiny"],"target":{"id":"647dbea74b8fd164bbf5e678|9a6f56c4-787a-d884-dc63-c77ab47ccf0b","appliesTo":"ELEMENT","styleBlockIds":[]},"targets":[{"id":"647dbea74b8fd164bbf5e678|9a6f56c4-787a-d884-dc63-c77ab47ccf0b","appliesTo":"ELEMENT","styleBlockIds":[]}],"config":{"loop":false,"playInReverse":false,"scrollOffsetValue":0,"scrollOffsetUnit":"%","delay":null,"direction":null,"effectIn":null},"createdOn":1685962913598}],"actionLists":[{"id":"a","title":"Success Lottie","actionItemGroups":[{"actionItems":[{"id":"a-n","actionTypeId":"PLUGIN_LOTTIE","config":{"delay":0,"easing":"","duration":500,"target":{"nodeId":"647dbea74b8fd164bbf5e678|e8ff1c30-b6d3-fbd2-fc01-1e0fca5ead72","appliesTo":"TRIGGER_ELEMENT","styleBlockIds":[],"boundaryMode":false},"value":0},"instant":false},{"id":"a-n-3","actionTypeId":"STYLE_SIZE","config":{"delay":0,"easing":"","duration":500,"target":{"nodeId":"647dbea74b8fd164bbf5e678|e8ff1c30-b6d3-fbd2-fc01-1e0fca5ead72","appliesTo":"TRIGGER_ELEMENT","styleBlockIds":[],"boundaryMode":false},"widthValue":300,"heightValue":300,"widthUnit":"px","heightUnit":"px","locked":false},"instant":false}]},{"actionItems":[{"id":"a-n-2","actionTypeId":"PLUGIN_LOTTIE","config":{"delay":0,"easing":"","duration":3000,"target":{"nodeId":"647dbea74b8fd164bbf5e678|e8ff1c30-b6d3-fbd2-fc01-1e0fca5ead72","appliesTo":"TRIGGER_ELEMENT","styleBlockIds":[],"boundaryMode":false},"value":100},"instant":false}]},{"actionItems":[{"id":"a-n-4","actionTypeId":"STYLE_SIZE","config":{"delay":0,"easing":"ease","duration":200,"target":{"nodeId":"647dbea74b8fd164bbf5e678|e8ff1c30-b6d3-fbd2-fc01-1e0fca5ead72","appliesTo":"TRIGGER_ELEMENT","styleBlockIds":[],"boundaryMode":false},"widthValue":100,"heightValue":100,"widthUnit":"px","heightUnit":"px","locked":false},"instant":false}]}],"useFirstGroupAsInitialState":true,"createdOn":1685962751676},{"id":"a-2","title":"Success Text","actionItemGroups":[{"actionItems":[{"id":"a-2-n","actionTypeId":"STYLE_SIZE","config":{"delay":0,"easing":"","duration":500,"target":{"nodeId":"647dbea74b8fd164bbf5e678|9a6f56c4-787a-d884-dc63-c77ab47ccf0b","appliesTo":"TRIGGER_ELEMENT","styleBlockIds":["3a74e563-1024-cc6c-34ac-e9fb0385d7d6"],"boundaryMode":false},"heightValue":0,"widthUnit":"PX","heightUnit":"px","locked":false},"instant":false},{"id":"a-2-n-3","actionTypeId":"STYLE_OPACITY","config":{"delay":0,"easing":"","duration":500,"target":{"nodeId":"647dbea74b8fd164bbf5e678|9a6f56c4-787a-d884-dc63-c77ab47ccf0b","appliesTo":"TRIGGER_ELEMENT","styleBlockIds":["3a74e563-1024-cc6c-34ac-e9fb0385d7d6"],"boundaryMode":false},"value":0,"unit":"%"},"instant":false},{"id":"a-2-n-5","actionTypeId":"TRANSFORM_SCALE","config":{"delay":0,"easing":"","duration":500,"target":{"nodeId":"647dbea74b8fd164bbf5e678|9a6f56c4-787a-d884-dc63-c77ab47ccf0b","appliesTo":"TRIGGER_ELEMENT","styleBlockIds":["3a74e563-1024-cc6c-34ac-e9fb0385d7d6"],"boundaryMode":false},"xValue":0,"yValue":0,"locked":true},"instant":false}]},{"actionItems":[{"id":"a-2-n-2","actionTypeId":"STYLE_SIZE","config":{"delay":3000,"easing":"ease","duration":200,"target":{"nodeId":"647dbea74b8fd164bbf5e678|9a6f56c4-787a-d884-dc63-c77ab47ccf0b","appliesTo":"TRIGGER_ELEMENT","styleBlockIds":["3a74e563-1024-cc6c-34ac-e9fb0385d7d6"],"boundaryMode":false},"widthUnit":"PX","heightUnit":"AUTO","locked":false},"instant":false},{"id":"a-2-n-4","actionTypeId":"STYLE_OPACITY","config":{"delay":3000,"easing":"ease","duration":200,"target":{"nodeId":"647dbea74b8fd164bbf5e678|9a6f56c4-787a-d884-dc63-c77ab47ccf0b","appliesTo":"TRIGGER_ELEMENT","styleBlockIds":["3a74e563-1024-cc6c-34ac-e9fb0385d7d6"],"boundaryMode":false},"value":100,"unit":"%"},"instant":false},{"id":"a-2-n-6","actionTypeId":"TRANSFORM_SCALE","config":{"delay":3000,"easing":"ease","duration":200,"target":{"nodeId":"647dbea74b8fd164bbf5e678|9a6f56c4-787a-d884-dc63-c77ab47ccf0b","appliesTo":"TRIGGER_ELEMENT","styleBlockIds":["3a74e563-1024-cc6c-34ac-e9fb0385d7d6"],"boundaryMode":false},"xValue":1,"yValue":1,"locked":true},"instant":false}]}],"useFirstGroupAsInitialState":true,"createdOn":1685962916323}]}},"meta":{"unlinkedSymbolCount":0,"droppedLinks":0,"dynBindRemovedCount":0,"dynListBindRemovedCount":0,"paginationRemovedCount":0}}
Clone in Webflow
Copy Component
{"type":"@webflow/XscpData","payload":{"nodes":[{"_id":"8477ac5a-6a2a-8532-5d2b-8d14aa659e26","type":"Section","tag":"section","classes":["4f94329b-0296-47f6-871c-5164392342a8"],"children":["71c1de9d-e61b-f8ef-0fba-c201e878289b"],"data":{"grid":{"type":"section"},"search":{"exclude":false},"xattr":[],"displayName":"","devlink":{"runtimeProps":{},"slot":""},"attr":{"id":""},"visibility":{"conditions":[]},"tag":"section"}},{"_id":"71c1de9d-e61b-f8ef-0fba-c201e878289b","type":"Block","tag":"div","classes":["38e58aa7-b5cf-1e1f-0358-d1f1d3aec5f1"],"children":["47f8590d-0d13-49bf-5b9d-a5f01a852157"],"data":{"search":{"exclude":false},"xattr":[],"text":false,"displayName":"","devlink":{"runtimeProps":{},"slot":""},"attr":{"id":""},"visibility":{"conditions":[]},"tag":"div"}},{"_id":"47f8590d-0d13-49bf-5b9d-a5f01a852157","type":"Block","tag":"div","classes":["0a769bf2-7b90-d8cb-1f84-8674723e7d9a"],"children":["e8ff1c30-b6d3-fbd2-fc01-1e0fca5ead72","9a6f56c4-787a-d884-dc63-c77ab47ccf0b"],"data":{"search":{"exclude":false},"xattr":[],"text":false,"displayName":"","devlink":{"runtimeProps":{},"slot":""},"attr":{"id":""},"visibility":{"conditions":[]},"tag":"div"}},{"_id":"e8ff1c30-b6d3-fbd2-fc01-1e0fca5ead72","type":"Animation","tag":"div","classes":["b9b31a3e-b02e-860e-8e6a-13f0d127f7d6"],"children":[],"data":{"tag":"div","animation":{"tag":"lottie","val":{"renderMode":"svg","path":{"src":"https://cdn.prod.website-files.com/647dbea74b8fd164bbf5e671/647dbf0d06246eaceced511c_93181-success.json","origFileName":"93181-success.json","totalDuration":2},"loop":false,"playInReverse":false}},"displayName":"","attr":{"id":""},"xattr":[],"search":{"exclude":false},"visibility":{"conditions":[]}}},{"_id":"9a6f56c4-787a-d884-dc63-c77ab47ccf0b","type":"Block","tag":"div","classes":["3a74e563-1024-cc6c-34ac-e9fb0385d7d6"],"children":["cdb27fd7-c9ab-bd0f-4ff5-2ba6a8231b17","8db846da-f321-86e3-6a08-26a03f3114ac","ed837fb2-838b-807a-f546-5a692cf0ce97"],"data":{"search":{"exclude":false},"xattr":[],"text":false,"displayName":"","devlink":{"runtimeProps":{},"slot":""},"attr":{"id":""},"visibility":{"conditions":[]},"tag":"div"}},{"_id":"cdb27fd7-c9ab-bd0f-4ff5-2ba6a8231b17","type":"Heading","tag":"h1","classes":["ed904434-a901-620a-6769-d52a576b7439"],"children":["cdb27fd7-c9ab-bd0f-4ff5-2ba6a8231b18"],"data":{"search":{"exclude":false},"xattr":[],"displayName":"","devlink":{"runtimeProps":{},"slot":""},"attr":{"id":""},"visibility":{"conditions":[]},"tag":"h1"}},{"_id":"cdb27fd7-c9ab-bd0f-4ff5-2ba6a8231b18","text":true,"v":"Your payment has been received"},{"_id":"8db846da-f321-86e3-6a08-26a03f3114ac","type":"Paragraph","tag":"p","classes":["2198ef9b-b8db-4752-13ed-fba8f85b3f28"],"children":["8db846da-f321-86e3-6a08-26a03f3114ad"],"data":{"displayName":"","attr":{"id":""},"xattr":[],"search":{"exclude":false},"visibility":{"conditions":[]},"devlink":{"runtimeProps":{},"slot":""}}},{"_id":"8db846da-f321-86e3-6a08-26a03f3114ad","text":true,"v":"Thank you for your payment. Your plan has been upgraded to premium! Please check your email for a payment confirmation & invoice."},{"_id":"ed837fb2-838b-807a-f546-5a692cf0ce97","type":"Link","tag":"a","classes":["9d7f33c2-ce80-ad6b-62b8-23de31f8a238"],"children":["ed837fb2-838b-807a-f546-5a692cf0ce98"],"data":{"search":{"exclude":true},"xattr":[],"block":"","displayName":"","devlink":{"runtimeProps":{},"slot":""},"attr":{"id":""},"visibility":{"conditions":[]},"button":true,"link":{"mode":"external","url":"#"}}},{"_id":"ed837fb2-838b-807a-f546-5a692cf0ce98","text":true,"v":"Go to your dashboard"}],"styles":[{"_id":"4f94329b-0296-47f6-871c-5164392342a8","fake":false,"type":"class","name":"section_big","namespace":"","comb":"","styleLess":"position: relative; display: block; width: 100%; min-height: 100vh; padding-top: 20px; padding-right: 20px; padding-bottom: 20px; padding-left: 20px; justify-content: center; align-items: stretch; background-image: linear-gradient(77deg, hsla(256.3636363636363, 60.63%, 49.80%, 1.00), hsla(275.609756097561, 59.42%, 59.41%, 1.00) 32%, hsla(315.1219512195122, 63.73%, 62.16%, 1.00) 66%, hsla(336.3057324840764, 75.85%, 59.41%, 1.00));","variants":{},"children":[],"createdBy":"633c39086cc87120cfb65542","selector":null},{"_id":"38e58aa7-b5cf-1e1f-0358-d1f1d3aec5f1","fake":false,"type":"class","name":"section-inner","namespace":"","comb":"","styleLess":"position: absolute; left: 20px; top: 20px; right: 20px; bottom: 20px; display: flex; justify-content: center; align-items: center; flex-grow: 1; flex-shrink: 1; flex-basis: 0%; border-top-left-radius: 20px; border-top-right-radius: 20px; border-bottom-left-radius: 20px; border-bottom-right-radius: 20px; background-color: hsla(0, 0.00%, 100.00%, 1.00); background-image: @img_647dc4f289842cddfd57637b; background-position: 0px 0px; background-size: 500px; box-shadow: inset 0 2px 20px 0 rgba(0,0,0,0.2);","variants":{},"children":[],"createdBy":"633c39086cc87120cfb65542","selector":null},{"_id":"0a769bf2-7b90-d8cb-1f84-8674723e7d9a","fake":false,"type":"class","name":"container","namespace":"","comb":"","styleLess":"display: flex; width: 100%; max-width: 500px; flex-direction: column; align-items: center;","variants":{},"children":[],"createdBy":"633c39086cc87120cfb65542","selector":null},{"_id":"b9b31a3e-b02e-860e-8e6a-13f0d127f7d6","fake":false,"type":"class","name":"lottie","namespace":"","comb":"","styleLess":"","variants":{},"children":[],"createdBy":"633c39086cc87120cfb65542","selector":null},{"_id":"3a74e563-1024-cc6c-34ac-e9fb0385d7d6","fake":false,"type":"class","name":"center","namespace":"","comb":"","styleLess":"display: flex; overflow: hidden; flex-direction: column; justify-content: flex-end; align-items: center; text-align: center;","variants":{},"children":[],"createdBy":"633c39086cc87120cfb65542","selector":null},{"_id":"ed904434-a901-620a-6769-d52a576b7439","fake":false,"type":"class","name":"h1","namespace":"","comb":"","styleLess":"margin-top: 0px; font-size: 33px; font-weight: 600;","variants":{},"children":[],"createdBy":"633c39086cc87120cfb65542","selector":null},{"_id":"2198ef9b-b8db-4752-13ed-fba8f85b3f28","fake":false,"type":"class","name":"p","namespace":"","comb":"","styleLess":"margin-bottom: 20px; font-size: 16px; line-height: 1.6;","variants":{},"children":[],"createdBy":"633c39086cc87120cfb65542","selector":null},{"_id":"9d7f33c2-ce80-ad6b-62b8-23de31f8a238","fake":false,"type":"class","name":"button","namespace":"","comb":"","styleLess":"padding-top: 13px; padding-right: 25px; padding-bottom: 13px; padding-left: 25px; border-top-left-radius: 10px; border-top-right-radius: 10px; border-bottom-left-radius: 10px; border-bottom-right-radius: 10px; background-image: linear-gradient(49deg, hsla(254, 64.23%, 48.31%, 1.00), hsla(278, 59.70%, 60.29%, 1.00) 33%, hsla(322, 73.58%, 64.68%, 1.00) 70%, hsla(339, 75.85%, 58.60%, 1.00)); font-weight: 500;","variants":{},"children":[],"createdBy":"633c39086cc87120cfb65542","selector":null}],"assets":[{"cdnUrl":"https://cdn.prod.website-files.com/647dbea74b8fd164bbf5e671/647dbf0d06246eaceced511c_93181-success.json","siteId":"647dbea74b8fd164bbf5e671","width":0,"isHD":false,"height":0,"fileName":"647dbf0d06246eaceced511c_93181-success.json","createdOn":"2023-06-05T10:55:09.538Z","origFileName":"93181-success.json","fileHash":"93565979af0f0f9b890030bfc17718b9","variants":[],"mimeType":"application/json","s3Url":"https://s3.amazonaws.com/webflow-prod-assets/647dbea74b8fd164bbf5e671/647dbf0d06246eaceced511c_93181-success.json","_id":"647dbf0d06246eaceced511c","type":"LOTTIE","updatedOn":"2023-06-05T10:55:09.538Z","fileSize":21467},{"cdnUrl":"https://cdn.prod.website-files.com/647dbea74b8fd164bbf5e671/647dc4f289842cddfd57637b_ooorganize%20(4).svg","siteId":"647dbea74b8fd164bbf5e671","width":800,"isHD":false,"height":800,"fileName":"647dc4f289842cddfd57637b_ooorganize (4).svg","createdOn":"2023-06-05T11:20:18.715Z","origFileName":"ooorganize (4).svg","fileHash":"27d446f81acc30870931ba2b836e1dbf","variants":[],"mimeType":"image/svg+xml","s3Url":"https://s3.amazonaws.com/webflow-prod-assets/647dbea74b8fd164bbf5e671/647dc4f289842cddfd57637b_ooorganize%20(4).svg","thumbUrl":"https://cdn.prod.website-files.com/647dbea74b8fd164bbf5e671/647dc4f289842cddfd57637b_ooorganize%20(4).svg","_id":"647dc4f289842cddfd57637b","updatedOn":"2023-06-05T11:20:18.715Z","fileSize":17810}],"ix1":[],"ix2":{"interactions":[{"id":"i","interactionTypeId":"SCROLL_INTO_VIEW_INTERACTION","eventIds":["e","e-2"],"target":"647dbea74b8fd164bbf5e678|e8ff1c30-b6d3-fbd2-fc01-1e0fca5ead72","createdOn":1685962746775},{"id":"i-2","interactionTypeId":"SCROLL_INTO_VIEW_INTERACTION","eventIds":["e-3","e-4"],"target":"647dbea74b8fd164bbf5e678|9a6f56c4-787a-d884-dc63-c77ab47ccf0b","createdOn":1685962913598}],"events":[{"id":"e","name":"","animationType":"custom","eventTypeId":"SCROLL_INTO_VIEW","action":{"id":"","actionTypeId":"GENERAL_START_ACTION","instant":true,"config":{"delay":0,"easing":"","duration":0,"actionListId":"a","affectedElements":{},"playInReverse":false,"autoStopEventId":"e-2"}},"mediaQueries":["main","medium","small","tiny"],"target":{"id":"647dbea74b8fd164bbf5e678|e8ff1c30-b6d3-fbd2-fc01-1e0fca5ead72","appliesTo":"ELEMENT","styleBlockIds":[]},"targets":[{"id":"647dbea74b8fd164bbf5e678|e8ff1c30-b6d3-fbd2-fc01-1e0fca5ead72","appliesTo":"ELEMENT","styleBlockIds":[]}],"config":{"loop":false,"playInReverse":false,"scrollOffsetValue":0,"scrollOffsetUnit":"%","delay":null,"direction":null,"effectIn":null},"createdOn":1685962746775},{"id":"e-2","name":"","animationType":"preset","eventTypeId":"SCROLL_OUT_OF_VIEW","action":null,"mediaQueries":["main","medium","small","tiny"],"target":{"id":"647dbea74b8fd164bbf5e678|e8ff1c30-b6d3-fbd2-fc01-1e0fca5ead72","appliesTo":"ELEMENT","styleBlockIds":[]},"targets":[{"id":"647dbea74b8fd164bbf5e678|e8ff1c30-b6d3-fbd2-fc01-1e0fca5ead72","appliesTo":"ELEMENT","styleBlockIds":[]}],"config":{"loop":false,"playInReverse":false,"scrollOffsetValue":0,"scrollOffsetUnit":"%","delay":null,"direction":null,"effectIn":null},"createdOn":1685962746777},{"id":"e-3","name":"","animationType":"custom","eventTypeId":"SCROLL_INTO_VIEW","action":{"id":"","actionTypeId":"GENERAL_START_ACTION","instant":true,"config":{"delay":0,"easing":"","duration":0,"actionListId":"a-2","affectedElements":{},"playInReverse":false,"autoStopEventId":"e-4"}},"mediaQueries":["main","medium","small","tiny"],"target":{"id":"647dbea74b8fd164bbf5e678|9a6f56c4-787a-d884-dc63-c77ab47ccf0b","appliesTo":"ELEMENT","styleBlockIds":[]},"targets":[{"id":"647dbea74b8fd164bbf5e678|9a6f56c4-787a-d884-dc63-c77ab47ccf0b","appliesTo":"ELEMENT","styleBlockIds":[]}],"config":{"loop":false,"playInReverse":false,"scrollOffsetValue":0,"scrollOffsetUnit":"%","delay":null,"direction":null,"effectIn":null},"createdOn":1685962913598},{"id":"e-4","name":"","animationType":"preset","eventTypeId":"SCROLL_OUT_OF_VIEW","action":null,"mediaQueries":["main","medium","small","tiny"],"target":{"id":"647dbea74b8fd164bbf5e678|9a6f56c4-787a-d884-dc63-c77ab47ccf0b","appliesTo":"ELEMENT","styleBlockIds":[]},"targets":[{"id":"647dbea74b8fd164bbf5e678|9a6f56c4-787a-d884-dc63-c77ab47ccf0b","appliesTo":"ELEMENT","styleBlockIds":[]}],"config":{"loop":false,"playInReverse":false,"scrollOffsetValue":0,"scrollOffsetUnit":"%","delay":null,"direction":null,"effectIn":null},"createdOn":1685962913598}],"actionLists":[{"id":"a","title":"Success Lottie","actionItemGroups":[{"actionItems":[{"id":"a-n","actionTypeId":"PLUGIN_LOTTIE","config":{"delay":0,"easing":"","duration":500,"target":{"nodeId":"647dbea74b8fd164bbf5e678|e8ff1c30-b6d3-fbd2-fc01-1e0fca5ead72","appliesTo":"TRIGGER_ELEMENT","styleBlockIds":[],"boundaryMode":false},"value":0},"instant":false},{"id":"a-n-3","actionTypeId":"STYLE_SIZE","config":{"delay":0,"easing":"","duration":500,"target":{"nodeId":"647dbea74b8fd164bbf5e678|e8ff1c30-b6d3-fbd2-fc01-1e0fca5ead72","appliesTo":"TRIGGER_ELEMENT","styleBlockIds":[],"boundaryMode":false},"widthValue":300,"heightValue":300,"widthUnit":"px","heightUnit":"px","locked":false},"instant":false}]},{"actionItems":[{"id":"a-n-2","actionTypeId":"PLUGIN_LOTTIE","config":{"delay":0,"easing":"","duration":3000,"target":{"nodeId":"647dbea74b8fd164bbf5e678|e8ff1c30-b6d3-fbd2-fc01-1e0fca5ead72","appliesTo":"TRIGGER_ELEMENT","styleBlockIds":[],"boundaryMode":false},"value":100},"instant":false}]},{"actionItems":[{"id":"a-n-4","actionTypeId":"STYLE_SIZE","config":{"delay":0,"easing":"ease","duration":200,"target":{"nodeId":"647dbea74b8fd164bbf5e678|e8ff1c30-b6d3-fbd2-fc01-1e0fca5ead72","appliesTo":"TRIGGER_ELEMENT","styleBlockIds":[],"boundaryMode":false},"widthValue":100,"heightValue":100,"widthUnit":"px","heightUnit":"px","locked":false},"instant":false}]}],"useFirstGroupAsInitialState":true,"createdOn":1685962751676},{"id":"a-2","title":"Success Text","actionItemGroups":[{"actionItems":[{"id":"a-2-n","actionTypeId":"STYLE_SIZE","config":{"delay":0,"easing":"","duration":500,"target":{"nodeId":"647dbea74b8fd164bbf5e678|9a6f56c4-787a-d884-dc63-c77ab47ccf0b","appliesTo":"TRIGGER_ELEMENT","styleBlockIds":["3a74e563-1024-cc6c-34ac-e9fb0385d7d6"],"boundaryMode":false},"heightValue":0,"widthUnit":"PX","heightUnit":"px","locked":false},"instant":false},{"id":"a-2-n-3","actionTypeId":"STYLE_OPACITY","config":{"delay":0,"easing":"","duration":500,"target":{"nodeId":"647dbea74b8fd164bbf5e678|9a6f56c4-787a-d884-dc63-c77ab47ccf0b","appliesTo":"TRIGGER_ELEMENT","styleBlockIds":["3a74e563-1024-cc6c-34ac-e9fb0385d7d6"],"boundaryMode":false},"value":0,"unit":"%"},"instant":false},{"id":"a-2-n-5","actionTypeId":"TRANSFORM_SCALE","config":{"delay":0,"easing":"","duration":500,"target":{"nodeId":"647dbea74b8fd164bbf5e678|9a6f56c4-787a-d884-dc63-c77ab47ccf0b","appliesTo":"TRIGGER_ELEMENT","styleBlockIds":["3a74e563-1024-cc6c-34ac-e9fb0385d7d6"],"boundaryMode":false},"xValue":0,"yValue":0,"locked":true},"instant":false}]},{"actionItems":[{"id":"a-2-n-2","actionTypeId":"STYLE_SIZE","config":{"delay":3000,"easing":"ease","duration":200,"target":{"nodeId":"647dbea74b8fd164bbf5e678|9a6f56c4-787a-d884-dc63-c77ab47ccf0b","appliesTo":"TRIGGER_ELEMENT","styleBlockIds":["3a74e563-1024-cc6c-34ac-e9fb0385d7d6"],"boundaryMode":false},"widthUnit":"PX","heightUnit":"AUTO","locked":false},"instant":false},{"id":"a-2-n-4","actionTypeId":"STYLE_OPACITY","config":{"delay":3000,"easing":"ease","duration":200,"target":{"nodeId":"647dbea74b8fd164bbf5e678|9a6f56c4-787a-d884-dc63-c77ab47ccf0b","appliesTo":"TRIGGER_ELEMENT","styleBlockIds":["3a74e563-1024-cc6c-34ac-e9fb0385d7d6"],"boundaryMode":false},"value":100,"unit":"%"},"instant":false},{"id":"a-2-n-6","actionTypeId":"TRANSFORM_SCALE","config":{"delay":3000,"easing":"ease","duration":200,"target":{"nodeId":"647dbea74b8fd164bbf5e678|9a6f56c4-787a-d884-dc63-c77ab47ccf0b","appliesTo":"TRIGGER_ELEMENT","styleBlockIds":["3a74e563-1024-cc6c-34ac-e9fb0385d7d6"],"boundaryMode":false},"xValue":1,"yValue":1,"locked":true},"instant":false}]}],"useFirstGroupAsInitialState":true,"createdOn":1685962916323}]}},"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 Animated Payment Confirmation component provides a visually engaging way to inform users that their payment has been successfully processed, featuring animations and clear messaging.

Key Features:

  • Lottie animation for visual feedback
  • Responsive design suitable for various devices
  • Customizable text and links
  • Includes a call-to-action button directing users to their dashboard
  • Background gradient for enhanced aesthetics

Design Elements:

  • Vibrant gradient background with multiple color transitions
  • Centered layout with rounded corners and shadow effects
  • Clear typography with a prominent heading and supportive text
  • Interactive button styled with a gradient

Potential Use Cases:

  • E-commerce websites confirming order payments
  • Subscription services notifying users of payment upgrades
  • SaaS platforms providing payment confirmation for new plans
  • Event registration sites confirming ticket purchases
  • Donation platforms acknowledging contributions

Conclusion: The Animated Payment Confirmation component is a versatile tool that enhances user experience by providing immediate feedback on payment success, making it ideal for various online businesses.