3d:I[34497,["/_next/static/chunks/0tu8jl-0gdkol.js","/_next/static/chunks/0889ceypgv2r_.js","/_next/static/chunks/2x4k_7igcqc-v.js","/_next/static/chunks/2ljgbhaav050p.js","/_next/static/chunks/2wf3hsfuksev1.js","/_next/static/chunks/05dq98u_tbdjc.js","/_next/static/chunks/1ecomw76lb5y7.js"],"default"] 3e:I[89151,["/_next/static/chunks/0tu8jl-0gdkol.js","/_next/static/chunks/0889ceypgv2r_.js","/_next/static/chunks/2x4k_7igcqc-v.js","/_next/static/chunks/2ljgbhaav050p.js","/_next/static/chunks/2wf3hsfuksev1.js","/_next/static/chunks/05dq98u_tbdjc.js","/_next/static/chunks/1ecomw76lb5y7.js"],"default"] 3a:["$","g",null,{"children":[["$","circle",null,{"cx":"34.36","cy":"27.5","r":"5.95"}],["$","path",null,{"d":"M11.59,67.21c-1.97-.1-3.81-1.27-4.66-3.19-1.21-2.72,.02-5.9,2.74-7.11l7.07-3.14c2.72-1.2,5.9,.02,7.11,2.74,1.21,2.72-.02,5.9-2.74,7.11l-7.07,3.14c-.8,.35-1.63,.5-2.45,.46Z"}],["$","path",null,{"d":"M51.76,26.66c-.24-.01-.48-.04-.71-.08-2.93-.54-4.86-3.35-4.33-6.27l2.75-14.99c.54-2.93,3.35-4.86,6.27-4.33,2.93,.54,4.86,3.35,4.33,6.27l-2.75,14.99c-.49,2.69-2.9,4.54-5.56,4.41Z"}],["$","path",null,{"d":"M22.83,46.63c-.58-.03-1.17-.15-1.74-.38L3.38,39.15c-2.76-1.11-4.1-4.24-3-7,1.11-2.76,4.24-4.1,7-3l17.71,7.1c2.76,1.11,4.1,4.24,3,7-.88,2.19-3.03,3.49-5.27,3.38Z"}],["$","path",null,{"d":"M24.16,19.76c-1.6-.08-3.15-.87-4.14-2.28l-6.33-8.99c-1.71-2.43-1.13-5.79,1.31-7.51,2.43-1.71,5.79-1.13,7.51,1.31l6.33,8.99c1.71,2.43,1.13,5.79-1.31,7.51-1.02,.72-2.2,1.03-3.36,.98Z"}]]}] 3b:["$","g",null,{"children":[["$","path",null,{"d":"M77.74,156.13h-5.04v22.8h-9.37v-22.8h-3.4v-7.78h3.4v-.88c0-3.76,1.08-6.62,3.23-8.58,2.16-1.95,5.32-2.93,9.48-2.93,.69,0,1.21,.02,1.53,.05v7.95c-1.79-.11-3.05,.15-3.78,.77-.73,.62-1.1,1.74-1.1,3.34v.27h5.04v7.78Z"}],["$","path",null,{"d":"M86.76,143.72c-1.04-.97-1.56-2.16-1.56-3.59s.52-2.68,1.56-3.64c1.04-.97,2.38-1.45,4.03-1.45s2.93,.48,3.97,1.45c1.04,.97,1.56,2.18,1.56,3.64s-.52,2.62-1.56,3.59c-1.04,.97-2.37,1.45-3.97,1.45s-2.99-.48-4.03-1.45Zm8.69,4.63v30.58h-9.37v-30.58h9.37Z"}],["$","path",null,{"d":"M133.4,151.5c2.14,2.32,3.21,5.51,3.21,9.57v17.87h-9.32v-16.61c0-2.05-.53-3.63-1.59-4.77-1.06-1.13-2.49-1.7-4.28-1.7s-3.22,.57-4.28,1.7c-1.06,1.13-1.59,2.72-1.59,4.77v16.61h-9.37v-30.58h9.37v4.06c.95-1.35,2.23-2.42,3.84-3.21,1.61-.78,3.42-1.18,5.43-1.18,3.58,0,6.44,1.16,8.58,3.48Z"}],["$","path",null,{"d":"M146.99,155.31c1.19-2.38,2.8-4.2,4.85-5.48,2.05-1.28,4.33-1.92,6.85-1.92,2.16,0,4.05,.44,5.67,1.32,1.63,.88,2.88,2.03,3.75,3.45v-4.33h9.37v30.58h-9.37v-4.33c-.91,1.43-2.18,2.58-3.81,3.45-1.63,.88-3.52,1.32-5.67,1.32-2.48,0-4.75-.65-6.8-1.95-2.05-1.3-3.66-3.14-4.85-5.54-1.19-2.39-1.78-5.16-1.78-8.3s.59-5.9,1.78-8.28Zm19.18,2.79c-1.3-1.35-2.88-2.03-4.74-2.03s-3.44,.67-4.74,2c-1.3,1.33-1.95,3.17-1.95,5.51s.65,4.19,1.95,5.56c1.3,1.37,2.88,2.06,4.74,2.06s3.44-.68,4.74-2.03c1.3-1.35,1.95-3.2,1.95-5.54s-.65-4.18-1.95-5.54Z"}],["$","path",null,{"d":"M215.45,151.5c2.14,2.32,3.21,5.51,3.21,9.57v17.87h-9.32v-16.61c0-2.05-.53-3.63-1.59-4.77-1.06-1.13-2.49-1.7-4.28-1.7s-3.22,.57-4.28,1.7c-1.06,1.13-1.59,2.72-1.59,4.77v16.61h-9.37v-30.58h9.37v4.06c.95-1.35,2.23-2.42,3.84-3.21,1.61-.78,3.42-1.18,5.43-1.18,3.58,0,6.44,1.16,8.58,3.48Z"}],["$","path",null,{"d":"M229.21,155.31c1.3-2.38,3.11-4.2,5.43-5.48,2.32-1.28,4.98-1.92,7.97-1.92,3.84,0,7.04,1.01,9.62,3.01,2.58,2.01,4.27,4.84,5.07,8.5h-9.98c-.84-2.34-2.47-3.51-4.88-3.51-1.72,0-3.09,.67-4.11,2-1.02,1.33-1.53,3.24-1.53,5.73s.51,4.39,1.53,5.73c1.02,1.33,2.39,2,4.11,2,2.41,0,4.04-1.17,4.88-3.51h9.98c-.8,3.58-2.5,6.39-5.1,8.44-2.6,2.05-5.79,3.07-9.59,3.07-3,0-5.66-.64-7.97-1.92-2.32-1.28-4.13-3.1-5.43-5.48-1.3-2.37-1.95-5.15-1.95-8.33s.65-5.96,1.95-8.33Z"}],["$","path",null,{"d":"M294.9,165.89h-21.21c.15,1.9,.76,3.35,1.84,4.36,1.08,1.01,2.4,1.51,3.97,1.51,2.34,0,3.96-.99,4.88-2.96h9.98c-.51,2.01-1.43,3.82-2.77,5.43-1.33,1.61-3.01,2.87-5.02,3.78-2.01,.91-4.26,1.37-6.74,1.37-3,0-5.66-.64-8-1.92-2.34-1.28-4.17-3.1-5.48-5.48-1.32-2.37-1.97-5.15-1.97-8.33s.65-5.96,1.95-8.33c1.3-2.38,3.12-4.2,5.45-5.48s5.02-1.92,8.06-1.92,5.59,.62,7.89,1.86c2.3,1.24,4.1,3.01,5.4,5.32,1.3,2.3,1.95,4.99,1.95,8.06,0,.88-.06,1.79-.16,2.74Zm-9.43-5.21c0-1.61-.55-2.89-1.64-3.84-1.1-.95-2.47-1.43-4.11-1.43s-2.9,.46-3.97,1.37c-1.08,.91-1.75,2.21-2,3.89h11.73Z"}]]}] 3c:["$","div",null,{"className":"styles-module-scss-module__MIuCTa__footer__content","children":[["$","p",null,{"className":"styles-module-scss-module__MIuCTa__footer__content__note","children":["Copyright © ",2026," Snap Finance"]}],["$","p",null,{"className":"styles-module-scss-module__MIuCTa__footer__content__note","children":"All Rights Reserved"}]]}] 38:["$","$L3d",null,{"tags":[{"id":"Z78d8hEAACEAx6--","uid":"development","url":null,"type":"tag","href":"https://developer-snapfinance-uk.cdn.prismic.io/api/v2/documents/search?ref=aejO2BYAACkAIuCF&q=%5B%5B%3Ad+%3D+at%28document.id%2C+%22Z78d8hEAACEAx6--%22%29+%5D%5D","tags":[],"first_publication_date":"2025-02-26T13:58:15+0000","last_publication_date":"2025-02-27T08:41:42+0000","slugs":["development"],"linked_documents":[],"lang":"en-gb","alternate_languages":[],"data":{"name":"Development","color":"#5D7CE3","emoji":"🛠️"}},{"id":"ZfBavREAAF8t5Zmt","uid":"releases","url":null,"type":"tag","href":"https://developer-snapfinance-uk.cdn.prismic.io/api/v2/documents/search?ref=aejO2BYAACkAIuCF&q=%5B%5B%3Ad+%3D+at%28document.id%2C+%22ZfBavREAAF8t5Zmt%22%29+%5D%5D","tags":[],"first_publication_date":"2024-03-12T13:38:07+0000","last_publication_date":"2025-02-27T08:41:57+0000","slugs":["releases"],"linked_documents":[],"lang":"en-gb","alternate_languages":[],"data":{"name":"Releases","color":"#60E841","emoji":"🚀"}}]}] 3f:Ta67,

Title 1 (click me!)

Some hidden content

Title 2 (click me!)

Some hidden content

Title 3 (click me!)

Some hidden content

40:T477,

41:T2859,

39:["$","$L3e",null,{"posts":[{"id":"aAonMBAAACEA2mgY","uid":"magento","url":"/blog/magento","type":"blog_post","href":"https://developer-snapfinance-uk.cdn.prismic.io/api/v2/documents/search?ref=aejO2BYAACkAIuCF&q=%5B%5B%3Ad+%3D+at%28document.id%2C+%22aAonMBAAACEA2mgY%22%29+%5D%5D","tags":[],"first_publication_date":"2025-04-24T12:40:49+0000","last_publication_date":"2025-04-24T14:43:19+0000","slugs":["whats-in-it-for-magento-merchants"],"linked_documents":[],"lang":"en-gb","alternate_languages":[],"data":{"title":"Snap Checkout plugin is now available in Magento","description":"We’re pumped to share the official launch of the Snap Checkout Plugin on the Magento Marketplace!","blog_image":{"dimensions":{"width":919,"height":450},"alt":"Snap + Magento","copyright":null,"url":"https://images.prismic.io/developer-snapfinance-uk/aAovX_IqRLdaBkvI_snap-magento.png?auto=format,compress","id":"aAovX_IqRLdaBkvI","edit":{"x":0,"y":0,"zoom":1,"background":"transparent"}},"date":"2025-04-24","tag":{"id":"ZfBavREAAF8t5Zmt","type":"tag","tags":[],"lang":"en-gb","slug":"releases","first_publication_date":"2024-03-12T13:38:07+0000","last_publication_date":"2025-02-27T08:41:57+0000","uid":"releases","link_type":"Document","key":"fb81bdd9-9cdf-41dc-a224-6908e81e771f","isBroken":false},"slices":[{"variation":"default","version":"initial","items":[],"primary":{"title":[],"text":[{"type":"paragraph","text":"We’re pumped to share the official launch of the Snap Checkout Plugin on the Magento Marketplace!","spans":[{"start":49,"end":69,"type":"strong"}],"direction":"ltr"},{"type":"paragraph","text":"At Snap, we’re all about delivering fast, secure, and flexible financing solutions that help businesses crush it in e-commerce. Following our successful Shopify integration in February 2024, we’re now bringing the same seamless checkout vibes to the Magento ecosystem.","spans":[],"direction":"ltr"},{"type":"paragraph","text":"It’s compatible with Magento 2.x and integrates with popular payment gateways.","spans":[{"start":5,"end":32,"type":"strong"}],"direction":"ltr"}],"button":{"link_type":"Any"},"button_color":"green"},"id":"text_block$d9ddb0c3-6816-434d-a0c4-adec011cbe88","slice_type":"text_block","slice_label":null},{"variation":"default","version":"initial","items":[],"primary":{"title":[{"type":"heading2","text":"What’s in it for Magento Merchants?","spans":[],"direction":"ltr"}],"text":[{"type":"paragraph","text":"Our new plugin is built with developers and merchants in mind, making it easy to integrate Snap’s financing options into your Magento store. Here’s the lowdown:","spans":[],"direction":"ltr"},{"type":"list-item","text":"Smoother Checkout Flow: Ditch clunky checkout experiences. The Snap Finance plugin integrates natively with Magento’s checkout pipeline, letting your customers breeze through financing applications without ever leaving your store.","spans":[{"start":0,"end":22,"type":"strong"}],"direction":"ltr"},{"type":"list-item","text":"Rock-Solid Security: We know security is non-negotiable. The plugin leverages Magento’s robust security framework, with all transactions encrypted end-to-end using industry-standard protocols. Your customers’ data is safe, and so is your peace of mind.","spans":[{"start":0,"end":19,"type":"strong"}],"direction":"ltr"},{"type":"list-item","text":"Developer-Friendly Setup: Whether you’re running a lean startup or a massive enterprise, integrating Snap is a cinch. The plugin is lightweight and hooks cleanly into Magento’s architecture. Plus, our dev team is ready for any support you might need.","spans":[{"start":0,"end":24,"type":"strong"}],"direction":"ltr"},{"type":"list-item","text":"Flexible Financing Options: Customers can apply for Snap financing directly in your checkout or via our website, with approvals syncing seamlessly. It’s all about giving shoppers the flexibility they need to complete their purchase.","spans":[{"start":0,"end":26,"type":"strong"}],"direction":"ltr"}],"button":{"link_type":"Any"},"button_color":"green"},"id":"text_block$8061bbc1-e7f8-4d2e-9257-3c75bec9198e","slice_type":"text_block","slice_label":null},{"variation":"default","version":"initial","items":[],"primary":{"title":[{"type":"heading2","text":"Get Started Today","spans":[],"direction":"ltr"}],"text":[{"type":"paragraph","text":"Ready to level up your Magento store? Head over to the our installation guide. It is straightforward, and our team is on standby to help with any tweaks or questions.","spans":[],"direction":"ltr"},{"type":"paragraph","text":"Let’s make financing as smooth as your Magento store’s front end. Happy coding!","spans":[],"direction":"ltr"}],"button":{"link_type":"Web","key":"86f31b89-b034-418e-b08c-bc3cf794093e","url":"https://developer.snapfinance.co.uk/plugins/magento","text":"Installation Guide"},"button_color":"darkblue"},"id":"text_block$de3653e1-7644-4f9f-8098-be77a1cdfe54","slice_type":"text_block","slice_label":null},{"variation":"default","version":"initial","items":[],"primary":{"title":[{"type":"heading2","text":"Not a Snap Partner Yet?","spans":[],"direction":"ltr"}],"text":[{"type":"paragraph","text":"If your business hasn’t teamed up with Snap Finance yet, now’s the perfect time to join the party. Becoming a Snap retailer is quick and easy. Our team will guide you through the process and get you ready to offer flexible financing to your customers in no time.","spans":[],"direction":"ltr"}],"button":{"link_type":"Web","key":"1ec8ab4c-c0e2-4628-a166-2cf46125b854","url":"https://snapfinance.co.uk/retailer/become-retailer","target":"_blank","text":"Become a Snap Retailer"},"button_color":"darkblue"},"id":"text_block$b53fe419-e8f8-4022-9eab-b9ec669c1278","slice_type":"text_block","slice_label":null}],"meta_title":"Magento Checkout Plugin","meta_description":[{"type":"paragraph","text":"We’re pumped to share the official launch of the Snap Checkout Plugin on the Magento Marketplace!","spans":[],"direction":"ltr"}],"meta_image":{"dimensions":{"width":2400,"height":1260},"alt":"Snap + Magento","copyright":null,"url":"https://images.prismic.io/developer-snapfinance-uk/aAovX_IqRLdaBkvI_snap-magento.png?auto=format,compress&rect=31,0,857,450&w=2400&h=1260","id":"aAovX_IqRLdaBkvI","edit":{"x":31,"y":0,"zoom":1,"background":"transparent"}}}},{"id":"Z8FX-hEAACIAywFZ","uid":"smooth","url":"/blog/smooth","type":"blog_post","href":"https://developer-snapfinance-uk.cdn.prismic.io/api/v2/documents/search?ref=aejO2BYAACkAIuCF&q=%5B%5B%3Ad+%3D+at%28document.id%2C+%22Z8FX-hEAACIAywFZ%22%29+%5D%5D","tags":[],"first_publication_date":"2025-03-01T11:16:11+0000","last_publication_date":"2025-04-24T14:56:30+0000","slugs":["first-example-a-single-accordion"],"linked_documents":[],"lang":"en-gb","alternate_languages":[],"data":{"title":"CSS Accordion animation","description":"Create smooth accordions animations with almost no javascript and code examples","blog_image":{"dimensions":{"width":919,"height":450},"alt":"Accordion animation","copyright":null,"url":"https://images.prismic.io/developer-snapfinance-uk/aAoyDvIqRLdaBkxf_accordion.png?auto=format,compress","id":"aAoyDvIqRLdaBkxf","edit":{"x":0,"y":0,"zoom":1,"background":"transparent"}},"date":"2025-03-03","tag":{"id":"Z78d8hEAACEAx6--","type":"tag","tags":[],"lang":"en-gb","slug":"development","first_publication_date":"2025-02-26T13:58:15+0000","last_publication_date":"2025-02-27T08:41:42+0000","uid":"development","link_type":"Document","key":"0508d590-cbdb-47df-915e-2d0371cd4f48","isBroken":false},"slices":[{"variation":"default","version":"initial","items":[],"primary":{"title":[],"text":[{"type":"paragraph","text":"In web development, accordions are a commonly used UI pattern for displaying content in a collapsible format, making them ideal for menus, FAQs, and content-heavy websites. What makes this accordion animation particularly interesting is that it relies mostly on CSS, with minimal JavaScript to toggle the visibility of the content. In this post, we'll dive into the technical implementation of a simple accordion animation with code examples, starting from a basic single-accordion design and then expanding it to include multiple accordions and improved styling.","spans":[{"start":121,"end":171,"type":"strong"},{"start":252,"end":265,"type":"strong"},{"start":396,"end":422,"type":"strong"},{"start":428,"end":441,"type":"strong"}],"direction":"ltr"}],"button":{"link_type":"Any"},"button_color":"green"},"id":"text_block$dd31c2d8-233c-415b-8865-ec4368d9540c","slice_type":"text_block","slice_label":null},{"variation":"default","version":"initial","items":[],"primary":{"title":[{"type":"heading2","text":"First Example: A Single Accordion","spans":[],"direction":"ltr"}],"text":[{"type":"paragraph","text":"The first step in creating a collapsible accordion involves both HTML structure and minimal CSS for the styling and animations. Let's break down the code:","spans":[],"direction":"ltr"}],"button":{"link_type":"Any"},"button_color":"green"},"id":"text_block$d46628b8-953d-400e-b886-c2dba7e9775a","slice_type":"text_block","slice_label":null},{"variation":"default","version":"initial","items":[],"primary":{"tabs":[{"title":"HTML","code":[{"type":"preformatted","text":"

\n Title (click me!)\n

\n\n

Some hidden content

","spans":[],"direction":"ltr"}],"type":"static","language":"html"},{"title":"Javascript","code":[{"type":"preformatted","text":"const accordionTitle = document.querySelector('div.accordion__title');\n\naccordionTitle.addEventListener('click', function (event) {\n const parent = event.target.parentElement;\n parent.classList.toggle('accordion--visible');\n});","spans":[],"direction":"ltr"}],"type":"static","language":"javascript"},{"title":"CSS","code":[{"type":"preformatted","text":".accordion {\n width: 100%;\n display: grid;\n grid-template-rows: min-content 0fr;\n transition: all 0.4s ease;\n border-bottom: 1px solid #d0d7de;\n}\n\n.accordion__title {\n cursor: pointer;\n}\n\n.accordion__dropdown {\n overflow: hidden;\n margin: 0;\n visibility: hidden;\n transition: all 0.4s ease;\n}\n\n.accordion--visible {\n grid-template-rows: min-content 1fr;\n}\n\n.accordion--visible .accordion__dropdown {\n visibility: visible;\n}","spans":[],"direction":"ltr"}],"type":"static","language":"css"},{"title":"React","code":[{"type":"preformatted","text":"import { useState } from 'react';\n\nconst Accordion = ({ title, children }) => {\n const [isVisible, setIsVisible] = useState(false);\n\n return (\n

\n setIsVisible(!isVisible)}\n >\n {title}\n

{children}

\n \n );\n};\n\nexport default Accordion;","spans":[],"direction":"ltr"}],"type":"static","language":"javascript"},{"title":"Result","code":[{"type":"preformatted","text":"

\n Title (click me!)\n

\n\n

Some hidden content

\n\n\n\n","spans":[],"direction":"ltr"}],"type":"rendered","language":"html"}]},"id":"code_playground$46862092-fce3-4e47-81ce-35e08f262278","slice_type":"code_playground","slice_label":null},{"variation":"default","version":"initial","items":[],"primary":{"title":[{"type":"heading4","text":"Explanation of the Code","spans":[],"direction":"ltr"}],"text":[{"type":"paragraph","text":"HTML Structure:","spans":[{"start":0,"end":14,"type":"strong"}],"direction":"ltr"},{"type":"list-item","text":"

: This div encapsulates the entire accordion element. ","spans":[{"start":0,"end":23,"type":"label","data":{"label":"inline-code"}}],"direction":"ltr"},{"type":"list-item","text":"

: The title section of the accordion, which will be clicked to trigger the reveal of the hidden content.","spans":[{"start":0,"end":30,"type":"label","data":{"label":"inline-code"}}],"direction":"ltr"},{"type":"list-item","text":"

: The hidden content that will expand and contract based on the user’s interaction.","spans":[{"start":0,"end":34,"type":"label","data":{"label":"inline-code"}}],"direction":"ltr"},{"type":"paragraph","text":"JavaScript Functionality:","spans":[{"start":0,"end":24,"type":"strong"}],"direction":"ltr"},{"type":"list-item","text":"The JavaScript part here is incredibly simple. We use querySelector to target the .accordion__title element and attach an event listener that listens for the click event.","spans":[{"start":82,"end":99,"type":"label","data":{"label":"inline-code"}}],"direction":"ltr"},{"type":"list-item","text":"When the title is clicked, we toggle the accordion--visible class on the parent .accordion div. This class will control the visibility and height of the hidden content.","spans":[{"start":41,"end":59,"type":"label","data":{"label":"inline-code"}},{"start":80,"end":90,"type":"label","data":{"label":"inline-code"}}],"direction":"ltr"},{"type":"paragraph","text":"CSS Styling and Transitions:","spans":[{"start":0,"end":27,"type":"strong"}],"direction":"ltr"},{"type":"list-item","text":"The accordion container is set to use display: grid, which allows us to define the row sizes with grid-template-rows. Initially, the dropdown content (.accordion__dropdown) has a height of 0 (effectively hidden) and visibility: hidden.","spans":[{"start":38,"end":51,"type":"label","data":{"label":"inline-code"}},{"start":151,"end":171,"type":"label","data":{"label":"inline-code"}},{"start":216,"end":234,"type":"label","data":{"label":"inline-code"}}],"direction":"ltr"},{"type":"list-item","text":"When the .accordion--visible class is added, the grid-template-rows property changes, and the dropdown content becomes visible with a smooth transition (transition: all 0.4s ease).","spans":[{"start":9,"end":28,"type":"label","data":{"label":"inline-code"}},{"start":49,"end":67,"type":"label","data":{"label":"inline-code"}},{"start":153,"end":178,"type":"label","data":{"label":"inline-code"}}],"direction":"ltr"},{"type":"list-item","text":"This makes the hidden content smoothly expand into view when toggled.","spans":[],"direction":"ltr"}],"button":{"link_type":"Any"},"button_color":"green"},"id":"text_block$ee7a72cf-ff53-4837-a394-5a3d5d9e3e8f","slice_type":"text_block","slice_label":null},{"variation":"default","version":"initial","items":[],"primary":{"title":[{"type":"heading2","text":"Second Example: Multiple Accordions with Enhanced Styles","spans":[],"direction":"ltr"}],"text":[{"type":"paragraph","text":"Now let's take it a step further by handling multiple accordion elements on the same page. This requires slightly more intricate HTML structure and some additional styling to ensure that the accordions work seamlessly.","spans":[],"direction":"ltr"}],"button":{"link_type":"Any"},"button_color":"green"},"id":"text_block$2613dbde-a728-4b7b-ae1d-d90b97e7497e","slice_type":"text_block","slice_label":null},{"variation":"default","version":"initial","items":[],"primary":{"tabs":[{"title":"HTML","code":[{"type":"preformatted","text":"

\n Title 1 (click me!)\n \n

\n\n

\n Some hidden content\n

\n\n

\n Title 2 (click me!)\n \n

\n\n

\n Some hidden content\n

\n\n

\n Title 3 (click me!)\n \n

\n\n

\n Some hidden content\n

","spans":[],"direction":"ltr"}],"type":"static","language":"html"},{"title":"Javascript","code":[{"type":"preformatted","text":"const accordionTitles = document.querySelectorAll('.accordion__title');\n\nfor (const accordionTitle of accordionTitles) {\n accordionTitle.addEventListener('click', function (event) {\n const parent = event.target.parentElement;\n parent.classList.toggle('accordion--visible');\n });\n}","spans":[],"direction":"ltr"}],"type":"static","language":"javascript"},{"title":"CSS","code":[{"type":"preformatted","text":".accordion {\n width: 100%;\n display: grid;\n grid-template-rows: min-content 0fr;\n transition: grid-template-rows 0.4s ease;\n border-bottom: 1px solid #d0d7de;\n}\n.accordion__title {\n cursor: pointer;\n width: 100%;\n padding: 20px;\n display: flex;\n justify-content: space-between;\n}\n.accordion__title > * {\n pointer-events: none;\n}\n.accordion__title svg {\n transition: transform 0.4s ease;\n}\n.accordion__dropdown {\n overflow: hidden;\n margin: 0;\n visibility: hidden;\n transition: visibility 0.4s ease;\n}\n.accordion__dropdown__content {\n padding: 0 20px 20px;\n}\n.accordion--visible {\n grid-template-rows: min-content 1fr;\n}\n.accordion--visible .accordion__title svg {\n transform: rotate(180deg);\n}\n.accordion--visible .accordion__dropdown {\n visibility: visible;\n}","spans":[],"direction":"ltr"}],"type":"static","language":"css"},{"title":"SCSS","code":[{"type":"preformatted","text":".accordion {\n width: 100%;\n display: grid;\n grid-template-rows: min-content 0fr;\n transition: grid-template-rows 0.4s ease;\n border-bottom: 1px solid #d0d7de;\n\n &__title {\n cursor: pointer;\n width: 100%;\n padding: 20px;\n display: flex;\n justify-content: space-between;\n\n svg {\n transition: transform 0.4s ease;\n }\n\n & > * {\n pointer-events: none;\n }\n }\n\n &__dropdown {\n overflow: hidden;\n margin: 0;\n visibility: hidden;\n transition: visibility 0.4s ease;\n\n &__content {\n padding: 0 20px 20px;\n }\n }\n\n &--visible {\n grid-template-rows: min-content 1fr;\n\n .accordion__title svg {\n transform: rotate(180deg);\n }\n\n .accordion__dropdown {\n visibility: visible;\n }\n }\n}","spans":[],"direction":"ltr"}],"type":"static","language":"scss"},{"title":"React","code":[{"type":"preformatted","text":"import { useState } from 'react';\n\nconst Accordion = ({ title, children }) => {\n const [isVisible, setIsVisible] = useState(false);\n\n return (\n

\n setIsVisible(!isVisible)}\n >\n {title}\n

{children}

\n );\n};\n\nexport default Accordion;","spans":[],"direction":"ltr"}],"type":"static","language":"javascript"},{"title":"Result","code":[{"type":"preformatted","text":"$3f","spans":[],"direction":"ltr"}],"type":"rendered","language":"html"}]},"id":"code_playground$1c5e4f6c-d9a3-4bab-a0dd-bfa1add4d193","slice_type":"code_playground","slice_label":null},{"variation":"default","version":"initial","items":[],"primary":{"title":[{"type":"heading4","text":"What's New in This Example:","spans":[],"direction":"ltr"}],"text":[{"type":"paragraph","text":"Multiple Accordions:","spans":[{"start":0,"end":19,"type":"strong"}],"direction":"ltr"},{"type":"list-item","text":"This time, we have multiple accordion containers on the page. Each container has a .accordion__title and a .accordion__dropdown section, making the content collapsible on an individual basis.","spans":[{"start":83,"end":100,"type":"label","data":{"label":"inline-code"}},{"start":107,"end":127,"type":"label","data":{"label":"inline-code"}}],"direction":"ltr"},{"type":"paragraph","text":"JavaScript Enhancement:","spans":[{"start":0,"end":22,"type":"strong"}],"direction":"ltr"},{"type":"list-item","text":"In this case, the script now uses querySelectorAll to grab all the accordion titles (.accordion__title) and attach event listeners to each of them. This ensures that all accordions on the page are interactive.","spans":[{"start":34,"end":50,"type":"label","data":{"label":"inline-code"}},{"start":85,"end":102,"type":"label","data":{"label":"inline-code"}}],"direction":"ltr"},{"type":"paragraph","text":"Styles enhancement","spans":[{"start":0,"end":18,"type":"strong"}],"direction":"ltr"},{"type":"list-item","text":"An icon that rotates based on the state has been added to show if the dropdown is visible or not. We have used Eva Icons for this example.","spans":[{"start":111,"end":120,"type":"hyperlink","data":{"link_type":"Web","url":"https://akveo.github.io/eva-icons/#/","target":"_blank"}}],"direction":"ltr"}],"button":{"link_type":"Any"},"button_color":"green"},"id":"text_block$108c13e8-8698-4c66-817a-4bc5d0426025","slice_type":"text_block","slice_label":null},{"variation":"default","version":"initial","items":[],"primary":{"title":[{"type":"heading4","text":"Conclusion","spans":[],"direction":"ltr"}],"text":[{"type":"paragraph","text":"In a real-world application, you can further optimize the design by adding features like automatic collapsing of other accordions when one is opened or using aria-expanded attributes for better accessibility.","spans":[{"start":45,"end":65,"type":"strong"}],"direction":"ltr"},{"type":"paragraph","text":"This technique demonstrates the power of modern CSS and its ability to create interactive elements with almost no JavaScript.","spans":[{"start":32,"end":51,"type":"strong"}],"direction":"ltr"}],"button":{"link_type":"Any"},"button_color":"green"},"id":"text_block$ab86bd70-ed2d-498f-9e1d-e86827443f63","slice_type":"text_block","slice_label":null}],"meta_title":"CSS Accordion animation","meta_description":[{"type":"paragraph","text":"Create smooth accordions animations with almost no javascript and code examples","spans":[],"direction":"ltr"}],"meta_image":{"dimensions":{"width":2400,"height":1260},"alt":"Accordion animation","copyright":null,"url":"https://images.prismic.io/developer-snapfinance-uk/aAoyDvIqRLdaBkxf_accordion.png?auto=format,compress&rect=31,0,857,450&w=2400&h=1260","id":"aAoyDvIqRLdaBkxf","edit":{"x":31,"y":0,"zoom":1,"background":"transparent"}}}},{"id":"aApATBAAACQA2o-r","uid":"partner-api","url":"/blog/partner-api","type":"blog_post","href":"https://developer-snapfinance-uk.cdn.prismic.io/api/v2/documents/search?ref=aejO2BYAACkAIuCF&q=%5B%5B%3Ad+%3D+at%28document.id%2C+%22aApATBAAACQA2o-r%22%29+%5D%5D","tags":[],"first_publication_date":"2025-04-24T13:50:01+0000","last_publication_date":"2025-04-24T14:43:08+0000","slugs":["why-choose-the-partner-api"],"linked_documents":[],"lang":"en-gb","alternate_languages":[],"data":{"title":"Partner API","description":"Seamlessly integrate our advanced decision-making capabilities directly into your existing systems by simply calling our endpoints.","blog_image":{"dimensions":{"width":919,"height":450},"alt":"Partner API","copyright":null,"url":"https://images.prismic.io/developer-snapfinance-uk/aAo_7PIqRLdaBlAm_partner-api.png?auto=format,compress","id":"aAo_7PIqRLdaBlAm","edit":{"x":0,"y":0,"zoom":1,"background":"transparent"}},"date":"2024-09-01","tag":{"id":"ZfBavREAAF8t5Zmt","type":"tag","tags":[],"lang":"en-gb","slug":"releases","first_publication_date":"2024-03-12T13:38:07+0000","last_publication_date":"2025-02-27T08:41:57+0000","uid":"releases","link_type":"Document","key":"0e09a0e2-6f3b-4227-b588-6200f4e99e42","isBroken":false},"slices":[{"variation":"default","version":"initial","items":[],"primary":{"title":[],"text":[{"type":"paragraph","text":"We’re thrilled to introduce our cutting-edge Partner API, a transformative solution designed to revolutionize the way retailers interact with customers. This API empowers businesses to seamlessly integrate our advanced decision-making capabilities directly into their existing systems by simply calling our endpoints.","spans":[{"start":45,"end":56,"type":"strong"}],"direction":"ltr"},{"type":"paragraph","text":"Gone are the days of complex workflows or relying on external processes to determine customer eligibility. With the Partner API, Snap Finance handles the heavy lifting of decision-making, allowing you to focus on delivering an exceptional customer experience.","spans":[{"start":129,"end":167,"type":"strong"}],"direction":"ltr"}],"button":{"link_type":"Any"},"button_color":"green"},"id":"text_block$f051751f-8519-4580-9b9a-8909ebf7ef8b","slice_type":"text_block","slice_label":null},{"variation":"default","version":"initial","items":[],"primary":{"title":[{"type":"heading2","text":"Why Choose the Partner API?","spans":[],"direction":"ltr"}],"text":[{"type":"paragraph","text":"Snap Finance takes care of the decision-making process behind the scenes. By calling our API endpoints, your business gains access to our sophisticated technology without needing to build or maintain complex decisioning systems. This unique approach:","spans":[{"start":103,"end":162,"type":"strong"}],"direction":"ltr"},{"type":"list-item","text":"Reduces your technical overhead.","spans":[],"direction":"ltr"},{"type":"list-item","text":"Increases efficiency in operations.","spans":[],"direction":"ltr"},{"type":"list-item","text":"Positions your brand as a leader in delivering fast, reliable financial options to customers.","spans":[],"direction":"ltr"}],"button":{"link_type":"Any","key":"fccf48e5-1ee7-4227-a6f5-d00d57b62eca"},"button_color":"green"},"id":"text_block$62f21ce4-d23b-49dc-a1ec-10613197c8cf","slice_type":"text_block","slice_label":null},{"variation":"default","version":"initial","items":[],"primary":{"title":[{"type":"heading2","text":"Why Retailers Will Love this API","spans":[],"direction":"ltr"}],"text":[{"type":"paragraph","text":"Our Partner API is a game-changer for businesses seeking to enhance their customer journey while keeping technical integration simple. Here's what makes it exceptional:","spans":[],"direction":"ltr"},{"type":"heading4","text":"1. Self-Integration Made Simple","spans":[],"direction":"ltr"},{"type":"paragraph","text":"Retailers can now integrate Snap Finance's advanced decisioning capabilities into their systems without external dependencies. By calling our endpoints, you can easily:","spans":[{"start":96,"end":127,"type":"strong"}],"direction":"ltr"},{"type":"list-item","text":"Perform real-time eligibility checks.","spans":[],"direction":"ltr"},{"type":"list-item","text":"Retrieve instant decisions without manual intervention.","spans":[],"direction":"ltr"},{"type":"paragraph","text":"This simplicity ensures your team stays in control, saving time and resources.","spans":[],"direction":"ltr"},{"type":"heading4","text":"2. Real-Time Decisioning, Maximum Impact","spans":[],"direction":"ltr"},{"type":"paragraph","text":"The API delivers instant eligibility results, eliminating wait times for your customers. This feature directly translates into higher satisfaction rates and improved conversion rates, as customers are no longer left waiting for financial approvals.","spans":[{"start":17,"end":44,"type":"strong"}],"direction":"ltr"},{"type":"heading4","text":"3. Seamless Integration","spans":[],"direction":"ltr"},{"type":"paragraph","text":"Designed with developers in mind, the Partner API offers:","spans":[],"direction":"ltr"},{"type":"list-item","text":"Comprehensive documentation for every endpoint.","spans":[{"start":0,"end":27,"type":"strong"}],"direction":"ltr"},{"type":"list-item","text":"A sandbox environment for safe testing before going live.","spans":[{"start":2,"end":21,"type":"strong"}],"direction":"ltr"},{"type":"paragraph","text":"With these tools, you can ensure your integration is smooth, efficient, and tailored to your business needs.","spans":[],"direction":"ltr"},{"type":"heading4","text":"4. Enhanced Customer Experience","spans":[],"direction":"ltr"},{"type":"paragraph","text":"By leveraging the Partner API, your customers receive immediate responses and personalized service. Whether it’s during the checkout process or as part of your promotional campaigns, the API ensures your customer journey remains frictionless.","spans":[],"direction":"ltr"},{"type":"heading4","text":"5. Security and Compliance","spans":[],"direction":"ltr"},{"type":"paragraph","text":"We understand the importance of data security and regulatory compliance. That’s why the Partner API adheres to the highest standards of protection, ensuring your customers’ information is handled with care and integrity.","spans":[],"direction":"ltr"}],"button":{"link_type":"Any","key":"a1690aa2-75df-46df-b8a0-da66645b3d4d"},"button_color":"green"},"id":"text_block$34fdb631-cf43-41f4-98aa-0134f7967699","slice_type":"text_block","slice_label":null},{"variation":"default","version":"initial","items":[],"primary":{"title":[{"type":"heading2","text":"Let’s Work Together","spans":[],"direction":"ltr"}],"text":[{"type":"paragraph","text":"The Partner API is here to empower retailers like you. By integrating our powerful tools into your systems, you’ll not only enhance your customer experience but also streamline your operations for long-term success.","spans":[{"start":27,"end":53,"type":"strong"}],"direction":"ltr"},{"type":"paragraph","text":"Ready to take the next step? Visit our API documentation or contact us to begin your journey with the Partner API today.","spans":[{"start":0,"end":28,"type":"strong"},{"start":39,"end":56,"type":"hyperlink","data":{"link_type":"Web","url":"https://developer.snapfinance.co.uk/apis/partner","target":"_blank"}},{"start":60,"end":70,"type":"hyperlink","data":{"link_type":"Web","url":"https://snapfinance.co.uk/retailer/become-retailer","target":"_blank"}}],"direction":"ltr"},{"type":"paragraph","text":"Together, let’s redefine the future of retail finance.","spans":[],"direction":"ltr"}],"button":{"link_type":"Any","key":"b89f905d-5637-4ea2-92d3-8ef3e6bc7005"},"button_color":"pink"},"id":"text_block$3521c883-a0fd-411f-a399-fa119535f060","slice_type":"text_block","slice_label":null},{"variation":"default","version":"initial","items":[],"primary":{"title":[{"type":"heading2","text":"How to Get Started","spans":[],"direction":"ltr"}],"text":[{"type":"paragraph","text":"Integrating the Partner API is a straightforward process:","spans":[],"direction":"ltr"},{"type":"o-list-item","text":"Contact Our Team: Reach out to our sales or technical team to get started.","spans":[{"start":0,"end":17,"type":"strong"}],"direction":"ltr"},{"type":"o-list-item","text":"Access the Documentation: Our detailed API documentation provides step-by-step instructions and examples for easy integration.","spans":[{"start":0,"end":25,"type":"strong"},{"start":30,"end":56,"type":"hyperlink","data":{"link_type":"Web","url":"https://developer.snapfinance.co.uk/apis/partner","target":"_self"}}],"direction":"ltr"},{"type":"o-list-item","text":"Use the Sandbox Environment: Test the API in a secure and controlled setting before deploying it live.","spans":[{"start":0,"end":28,"type":"strong"}],"direction":"ltr"},{"type":"o-list-item","text":"Go Live: Once your integration is ready, launch it and start benefiting from real-time decisioning.","spans":[{"start":0,"end":8,"type":"strong"}],"direction":"ltr"}],"button":{"link_type":"Any","key":"f76a581d-cd3e-4d81-af1b-45650322d076"},"button_color":"darkblue"},"id":"text_block$921aa6e2-e0e0-42f0-bd52-b30ec2884f72","slice_type":"text_block","slice_label":null},{"variation":"default","version":"initial","items":[],"primary":{"title":[{"type":"heading2","text":"Not a Snap Partner Yet?","spans":[],"direction":"ltr"}],"text":[{"type":"paragraph","text":"If your business hasn’t teamed up with Snap Finance yet, now’s the perfect time to join the party. Becoming a Snap retailer is quick and easy. Our team will guide you through the process and get you ready to offer flexible financing to your customers in no time.","spans":[],"direction":"ltr"}],"button":{"link_type":"Web","key":"1ec8ab4c-c0e2-4628-a166-2cf46125b854","url":"https://snapfinance.co.uk/retailer/become-retailer","target":"_blank","text":"Become a Snap Retailer"},"button_color":"darkblue"},"id":"text_block$4ec29aa7-3669-4bea-baa1-ebe04d0a0424","slice_type":"text_block","slice_label":null}],"meta_title":"Partner API","meta_description":[{"type":"paragraph","text":"Seamlessly integrate our advanced decision-making capabilities directly into your existing systems by simply calling our endpoints. Simplifying Retailer Integration for Real-Time Decisioning.","spans":[],"direction":"ltr"}],"meta_image":{"dimensions":{"width":2400,"height":1260},"alt":"Partner API","copyright":null,"url":"https://images.prismic.io/developer-snapfinance-uk/aAo_7PIqRLdaBlAm_partner-api.png?auto=format,compress&rect=31,0,857,450&w=2400&h=1260","id":"aAo_7PIqRLdaBlAm","edit":{"x":31,"y":0,"zoom":1,"background":"transparent"}}}},{"id":"Z78fBhEAACIAx7Fq","uid":"dynamic-retailer-pages","url":"/blog/dynamic-retailer-pages","type":"blog_post","href":"https://developer-snapfinance-uk.cdn.prismic.io/api/v2/documents/search?ref=aejO2BYAACkAIuCF&q=%5B%5B%3Ad+%3D+at%28document.id%2C+%22Z78fBhEAACIAx7Fq%22%29+%5D%5D","tags":[],"first_publication_date":"2025-02-26T14:17:42+0000","last_publication_date":"2025-05-08T04:07:08+0000","slugs":["introduction"],"linked_documents":[],"lang":"en-gb","alternate_languages":[],"data":{"title":"Dynamic Retailer pages","description":"We provide retailers with unique, always-up-to-date pages that require minimal effort to integrate. By copying just a few lines of code, retailers can seamlessly embed a dedicated page showcasing their exclusive offers, and other relevant financial data.","blog_image":{"dimensions":{"width":919,"height":450},"alt":"Finance page","copyright":null,"url":"https://images.prismic.io/developer-snapfinance-uk/aAo49fIqRLdaBk5i_finance-page.png?auto=format,compress","id":"aAo49fIqRLdaBk5i","edit":{"x":0,"y":0,"zoom":1,"background":"transparent"}},"date":"2024-07-06","tag":{"id":"Z78d8hEAACEAx6--","type":"tag","tags":[],"lang":"en-gb","slug":"development","first_publication_date":"2025-02-26T13:58:15+0000","last_publication_date":"2025-02-27T08:41:42+0000","uid":"development","link_type":"Document","key":"db5fddb2-9094-4590-a1ca-3f954d2214db","isBroken":false},"slices":[{"variation":"default","version":"initial","items":[],"primary":{"title":[{"type":"heading2","text":"Introduction","spans":[],"direction":"ltr"}],"text":[{"type":"paragraph","text":"At Snap, we provide retailers with unique, always-up-to-date pages that require minimal effort to integrate. By copying just a few lines of code, retailers can seamlessly embed in their website a dedicated page showcasing their exclusive offers, a loan calculator, and other relevant financial data. This approach simplifies the process for non-technical users, as it requires only basic knowledge of their CRM.","spans":[{"start":43,"end":66,"type":"strong"},{"start":127,"end":144,"type":"strong"},{"start":228,"end":298,"type":"strong"}],"direction":"ltr"},{"type":"paragraph","text":"We support integration with over 10+ CRMs, providing detailed step-by-step guides tailored to each platform. Once a retailer partners with Snap, they receive a link containing the necessary setup instructions, making the onboarding process swift and frictionless.","spans":[{"start":221,"end":262,"type":"strong"}],"direction":"ltr"}],"button":{"link_type":"Any"},"button_color":"green"},"id":"text_block$ae0bd8f4-b07f-47f2-82b3-5065ca800806","slice_type":"text_block","slice_label":null},{"variation":"default","version":"initial","items":[],"primary":{"title":[{"type":"heading2","text":"Effortless Implementation","spans":[],"direction":"ltr"}],"text":[{"type":"paragraph","text":"The setup process is straightforward:","spans":[],"direction":"ltr"},{"type":"o-list-item","text":"The retailer signs up with Snap and receives a personalized integration link.","spans":[{"start":0,"end":21,"type":"strong"}],"direction":"ltr"},{"type":"o-list-item","text":"They copy and paste a small HTML snippet into their website or CRM.","spans":[{"start":0,"end":32,"type":"strong"}],"direction":"ltr"},{"type":"o-list-item","text":"The page dynamically loads, fetching and rendering content directly from Snap’s servers.","spans":[{"start":0,"end":26,"type":"strong"}],"direction":"ltr"},{"type":"paragraph","text":"Here’s an example of the HTML snippet that retailers insert and the result that will be shown:","spans":[],"direction":"ltr"}],"button":{"link_type":"Any"},"button_color":"green"},"id":"text_block$71cf03ff-bccb-43ec-89c3-4886ebc063f3","slice_type":"text_block","slice_label":null},{"variation":"default","version":"initial","items":[],"primary":{"tabs":[{"title":"HTML","code":[{"type":"preformatted","text":"$40","spans":[],"direction":"ltr"}],"type":"static","language":"html"},{"title":"Result","code":[{"type":"preformatted","text":"$41","spans":[],"direction":"ltr"}],"type":"rendered","language":"html"}]},"id":"code_playground$3957b6b6-a579-4f2b-8e44-7dac66d693de","slice_type":"code_playground","slice_label":null},{"variation":"default","version":"initial","items":[],"primary":{"title":[{"type":"heading2","text":"How the Script Works","spans":[],"direction":"ltr"}],"text":[{"type":"paragraph","text":"This script ensures that retailers' pages are always up-to-date by dynamically fetching content from Snap’s servers on every request. Here’s a breakdown of how it functions:","spans":[],"direction":"ltr"},{"type":"heading4","text":"Shadow DOM for Encapsulation: ","spans":[{"start":0,"end":28,"type":"strong"}],"direction":"ltr"},{"type":"paragraph","text":"· The script initializes a shadowRoot within the #snapfinance-page container. This ensures that styles and scripts are isolated, preventing conflicts with the retailer’s existing site.","spans":[{"start":0,"end":2,"type":"strong"}],"direction":"ltr"},{"type":"heading5","text":"Loading State Handling: ","spans":[{"start":0,"end":22,"type":"strong"}],"direction":"ltr"},{"type":"paragraph","text":"· A loading template is injected while the actual content is being retrieved.","spans":[{"start":0,"end":2,"type":"strong"}],"direction":"ltr"},{"type":"heading5","text":"Fetching Dynamic Content:","spans":[{"start":0,"end":24,"type":"strong"}],"direction":"ltr"},{"type":"paragraph","text":"· The script makes an asynchronous request to a Snap-hosted API endpoint ({{super_secret_url_with_super_secret_token}}).\n· The response contains a page template (HTML content) and a script (additional JavaScript logic).","spans":[{"start":0,"end":2,"type":"strong"},{"start":121,"end":122,"type":"strong"}],"direction":"ltr"},{"type":"heading5","text":"Rendering the Page:","spans":[{"start":0,"end":18,"type":"strong"}],"direction":"ltr"},{"type":"paragraph","text":"· The received html page is injected into the Shadow DOM, rendering the main content.\n· A script element is created dynamically, injecting the script to enhance interactivity.","spans":[{"start":0,"end":1,"type":"strong"},{"start":86,"end":88,"type":"strong"}],"direction":"ltr"},{"type":"heading5","text":"Error Handling:","spans":[{"start":0,"end":14,"type":"strong"}],"direction":"ltr"},{"type":"paragraph","text":"· Our systems are up over 99.99% of the time, but if for some reason the fetch request fails, a fallback error message will be displayed.","spans":[{"start":0,"end":2,"type":"strong"}],"direction":"ltr"},{"type":"heading5","text":"Cleanup Process:","spans":[{"start":0,"end":15,"type":"strong"}],"direction":"ltr"},{"type":"paragraph","text":"· The initial loading template is removed once the content is successfully loaded.","spans":[{"start":0,"end":2,"type":"strong"}],"direction":"ltr"}],"button":{"link_type":"Any"},"button_color":"green"},"id":"text_block$74fce321-f794-4cf5-9395-fce9762488fd","slice_type":"text_block","slice_label":null},{"variation":"default","version":"initial","items":[],"primary":{"title":[{"type":"heading2","text":"Business Benefits","spans":[],"direction":"ltr"}],"text":[{"type":"heading3","text":"1. Seamless Integration","spans":[],"direction":"ltr"},{"type":"paragraph","text":"Retailers do not need to worry about maintaining the content themselves. The Snap-hosted solution ensures that every update, promotion, or financial tool appears on their site instantly without manual intervention.","spans":[{"start":13,"end":71,"type":"strong"},{"start":176,"end":185,"type":"strong"}],"direction":"ltr"},{"type":"heading4","text":"2. Increased Conversion Rates","spans":[],"direction":"ltr"},{"type":"paragraph","text":"By embedding an offer page that remains fresh and relevant, retailers can improve engagement and conversion rates. Customers always see the latest financing options and incentives without any outdated information.","spans":[{"start":40,"end":58,"type":"strong"},{"start":74,"end":113,"type":"strong"}],"direction":"ltr"},{"type":"heading4","text":"3. Zero Maintenance for Retailers","spans":[],"direction":"ltr"},{"type":"paragraph","text":"Since all content is fetched dynamically, retailers never have to update the page manually. This minimizes technical debt and reliance on development teams for maintenance.","spans":[{"start":51,"end":90,"type":"strong"}],"direction":"ltr"},{"type":"heading4","text":"4. Cross-CRM Compatibility","spans":[],"direction":"ltr"},{"type":"paragraph","text":"With support for over 10 CRMs, our solution is versatile and adapts to various retailer ecosystems, making it easy to implement regardless of the platform.","spans":[{"start":16,"end":29,"type":"strong"}],"direction":"ltr"},{"type":"heading4","text":"5. Secure & Reliable","spans":[],"direction":"ltr"},{"type":"paragraph","text":"Data is served securely via Snap’s infrastructure, ensuring that only authorized retailers with a valid client ID can display their custom pages. The Shadow DOM encapsulation further enhances security by preventing malicious tampering.","spans":[{"start":69,"end":90,"type":"strong"}],"direction":"ltr"},{"type":"heading4","text":"6. Mobile Optimization","spans":[],"direction":"ltr"},{"type":"paragraph","text":"The application is fully responsive and meticulously optimized to deliver a seamless user experience across all devices, browsers, and screen sizes.","spans":[{"start":76,"end":100,"type":"strong"}],"direction":"ltr"}],"button":{"link_type":"Any"},"button_color":"green"},"id":"text_block$3265c581-0ea3-459a-bbfb-2c9a4351fd31","slice_type":"text_block","slice_label":null},{"variation":"default","version":"initial","items":[],"primary":{"title":[{"type":"heading2","text":"Conclusion","spans":[],"direction":"ltr"}],"text":[{"type":"paragraph","text":"Our innovative approach to dynamic page embedding allows retailers to integrate financing options effortlessly while ensuring the content is always up to date. By leveraging the power of JavaScript, Shadow DOM, and Server-Side-Rendering, we provide a robust, scalable, and secure solution that benefits both businesses and their customers.","spans":[{"start":71,"end":110,"type":"strong"},{"start":141,"end":158,"type":"strong"}],"direction":"ltr"},{"type":"paragraph","text":"With just a few lines of code, retailers can offer a seamless, user-friendly financing experience, increasing engagement and sales without technical overhead. If you're a retailer looking to enhance your website with real-time financing offers, Snap makes it easier than ever!","spans":[],"direction":"ltr"},{"type":"paragraph","text":"If you have already partnered with Snap but haven't got your custom page yet, contact us to get started. Our team is ready to assist you in integrating your unique, always-up-to-date Snap page with minimal effort!","spans":[{"start":78,"end":88,"type":"hyperlink","data":{"link_type":"Web","url":"mailto:retaileronboarding@snapfinance.co.uk","target":"_self"}},{"start":104,"end":136,"type":"strong"}],"direction":"ltr"},{"type":"paragraph","text":"If you have not yet partnered with Snap:","spans":[],"direction":"ltr"}],"button":{"link_type":"Web","key":"068ff3f4-9d97-4b1f-9d96-f735ebcb54c0","url":"https://snapfinance.co.uk/retailer/become-retailer","target":"_blank","text":"Partner with Us"},"button_color":"pink"},"id":"text_block$6c7a61b1-3d28-47e4-bbc4-a97379fbb4ab","slice_type":"text_block","slice_label":null}],"meta_title":"Always Up-To-Date Pages in Retailers' websites","meta_description":[{"type":"paragraph","text":"At Snap, we provide retailers with unique, always-up-to-date pages that require minimal effort to integrate. By copying just a few lines of code, retailers can seamlessly embed a dedicated page showcasing their exclusive offers, and other relevant financial data.","spans":[],"direction":"ltr"}],"meta_image":{"dimensions":{"width":2400,"height":1260},"alt":"Finance page","copyright":null,"url":"https://images.prismic.io/developer-snapfinance-uk/aAo49fIqRLdaBk5i_finance-page.png?auto=format,compress&rect=31,0,857,450&w=2400&h=1260","id":"aAo49fIqRLdaBk5i","edit":{"x":31,"y":0,"zoom":1,"background":"transparent"}}}},{"id":"ZfBcABEAAIcu5Z9K","uid":"shopify-integration","url":"/blog/shopify-integration","type":"blog_post","href":"https://developer-snapfinance-uk.cdn.prismic.io/api/v2/documents/search?ref=aejO2BYAACkAIuCF&q=%5B%5B%3Ad+%3D+at%28document.id%2C+%22ZfBcABEAAIcu5Z9K%22%29+%5D%5D","tags":[],"first_publication_date":"2024-03-12T13:46:09+0000","last_publication_date":"2025-04-24T14:42:56+0000","slugs":["why-shopify-merchants-will-love-this"],"linked_documents":[],"lang":"en-gb","alternate_languages":[],"data":{"title":"Snap Teams Up with Shopify","description":"Snap have partnered with Shopify, one of the leading e-commerce platforms, to provide an easy way for retailers to offer Snap at checkout.","blog_image":{"dimensions":{"width":919,"height":450},"alt":"snap-shopify","copyright":null,"url":"https://images.prismic.io/developer-snapfinance-uk/aAowxfIqRLdaBkwa_snap-shopify.png?auto=format,compress","id":"aAowxfIqRLdaBkwa","edit":{"x":0,"y":0,"zoom":1,"background":"transparent"}},"date":"2024-02-29","tag":{"id":"ZfBavREAAF8t5Zmt","type":"tag","tags":[],"lang":"en-gb","slug":"releases","first_publication_date":"2024-03-12T13:38:07+0000","last_publication_date":"2025-02-27T08:41:57+0000","uid":"releases","link_type":"Document","key":"6540901e-f28e-4d46-9bd8-239a220e7437","isBroken":false},"slices":[{"variation":"default","version":"initial","items":[],"primary":{"title":[],"text":[{"type":"paragraph","text":"We’re excited to announce the launch of the Snap Checkout Plugin on the Shopify App Store, bringing seamless financing to Shopify merchants everywhere!","spans":[{"start":0,"end":64,"type":"strong"}],"direction":"ltr"},{"type":"paragraph","text":"The Snap Checkout Plugin is optimized for Shopify’s ecosystem. It’s compatible with the latest Shopify versions, supports custom themes, and integrates with popular payment gateways.","spans":[{"start":27,"end":61,"type":"strong"}],"direction":"ltr"},{"type":"paragraph","text":"At Snap Finance, we’re committed to empowering e-commerce businesses with fast, secure, and flexible financing solutions.","spans":[{"start":36,"end":68,"type":"strong"}],"direction":"ltr"}],"button":{"link_type":"Any"},"button_color":"darkblue"},"id":"text_block$61401b8b-8f64-4c06-a418-3aa81a1c6f3c","slice_type":"text_block","slice_label":null},{"variation":"default","version":"initial","items":[],"primary":{"title":[{"type":"heading2","text":"Why Shopify Merchants Will Love This","spans":[],"direction":"ltr"}],"text":[{"type":"paragraph","text":"Our updated plugin is designed to integrate effortlessly into your Shopify store, giving your customers a frictionless financing option at checkout. Here’s what you get:","spans":[],"direction":"ltr"},{"type":"list-item","text":"Seamless Checkout Integration: No more checkout friction. The Snap plugin hooks directly into Shopify’s checkout flow, letting customers apply for financing without leaving your store, boosting conversions and satisfaction.","spans":[{"start":0,"end":29,"type":"strong"}],"direction":"ltr"},{"type":"list-item","text":"Easy Setup for Devs: Whether you’re a solo entrepreneur or a large-scale operation, integration is a breeze. The plugin is lightweight, well-documented, and plays nicely with Shopify’s API. Our support team is here for any custom needs.","spans":[{"start":0,"end":19,"type":"strong"}],"direction":"ltr"},{"type":"list-item","text":"Flexible Financing Options: Customers can apply for Snap financing directly at checkout with approvals syncing seamlessly to keep the purchase process smooth.","spans":[{"start":0,"end":26,"type":"strong"}],"direction":"ltr"}],"button":{"link_type":"Any"},"button_color":"green"},"id":"text_block$5c5e0a86-fd0a-4683-ad15-4669b11364ec","slice_type":"text_block","slice_label":null},{"variation":"default","version":"initial","items":[],"primary":{"title":[{"type":"heading2","text":"Get Started Now","spans":[],"direction":"ltr"}],"text":[{"type":"paragraph","text":"Ready to enhance your Shopify store? Head to the Installation Guide to install the Snap Checkout Plugin. Setup is quick, and our team is ready to assist with any questions.","spans":[{"start":49,"end":67,"type":"strong"}],"direction":"ltr"},{"type":"paragraph","text":"Let’s make financing as seamless as your Shopify checkout. Happy selling!","spans":[],"direction":"ltr"}],"button":{"link_type":"Web","key":"3a900d66-a84d-4012-9f2b-4529a5c7aa32","url":"https://developer.snapfinance.co.uk/plugins/shopify","text":"Installation Guide"},"button_color":"darkblue"},"id":"text_block$e85b6df0-6f56-4946-a465-513e9301b241","slice_type":"text_block","slice_label":null},{"variation":"default","version":"initial","items":[],"primary":{"title":[{"type":"heading2","text":"Not a Snap Partner Yet?","spans":[],"direction":"ltr"}],"text":[{"type":"paragraph","text":"If your business hasn’t partnered with Snap Finance yet, it’s easy to get started. Our team will help you get set up to offer flexible financing to your customers in no time.","spans":[{"start":62,"end":81,"type":"strong"}],"direction":"ltr"}],"button":{"link_type":"Web","key":"ce00bf79-3df4-40f7-a3d2-e83487b88474","url":"https://snapfinance.co.uk/retailer/become-retailer","target":"_blank","text":"Partner with Snap"},"button_color":"darkblue"},"id":"text_block$edf5a9e1-3bab-490a-a1d1-f01719d6b876","slice_type":"text_block","slice_label":null}],"meta_title":"Shopify Payment App","meta_description":[{"type":"paragraph","text":"Snap have partnered with Shopify, one of the leading e-commerce platforms, to provide an easy way for retailers to offer Snap at checkout.","spans":[],"direction":"ltr"}],"meta_image":{"dimensions":{"width":2400,"height":1260},"alt":"snap-shopify","copyright":null,"url":"https://images.prismic.io/developer-snapfinance-uk/aAowxfIqRLdaBkwa_snap-shopify.png?auto=format,compress&rect=31,0,857,450&w=2400&h=1260","id":"aAowxfIqRLdaBkwa","edit":{"x":31,"y":0,"zoom":1,"background":"transparent"}}}}],"tags":"$38:props:tags"}]