{"title":"Composable Storefront package","category":"default","creationDate":1678958820,"content":"<div class=\"additional-info-block output-inline\">\n<div class=\"additional-info-block__body\"><p><img style=\"width: 38px;\" alt=\"\" src=\"\/user\/pages\/docs\/05.plugins\/05.salesforce-commerce-cloud\/05.composable-storefront\/salesforce_logo.svg?decoding=auto&amp;fetchpriority=auto\" \/>&nbsp; <strong>Webinar<\/strong><\/p><p><a href=\"https:\/\/help.adyen.com\/academy\/webinars\/sfcc-composable-storefront#watch-on-demand\" target=\"_blank\" rel=\"nofollow noopener noreferrer\" class=\"external-link no-image\">Watch our on-demand webinar<\/a> to learn more about our Composable Storefront integration.<\/p><\/div><\/div>\n\n<p>The Adyen Composable Storefront package is a headless payments integration for Salesforce B2C Commerce stores built with the <a href=\"https:\/\/developer.salesforce.com\/docs\/commerce\/pwa-kit-managed-runtime\/guide\/pwa-kit-overview.html\" target=\"_blank\" rel=\"nofollow noopener noreferrer\" class=\"external-link no-image\">Salesforce Progressive Web App (PWA) Kit<\/a>. The package includes front-end and back-end components that enable payment processing using the <a href=\"\/pt\/online-payments\/build-your-integration\/sessions-flow?platform=Web&amp;integration=Drop-in\">Adyen Web Drop-in<\/a>.<\/p>\n<p>The Salesforce PWA Kit allows you to create custom storefronts. After you have built your storefront, you can use Managed Runtime to deploy, host, and monitor your integration.<\/p>\n<p>Read more about Composable Storefront, PWA, and Managed Runtime in <a href=\"https:\/\/developer.salesforce.com\/docs\/commerce\/pwa-kit-managed-runtime\/guide\/getting-started.html#new-project\" target=\"_blank\" rel=\"nofollow noopener noreferrer\" class=\"external-link no-image\">Salesforce Documentation<\/a>.<\/p>\n<h2>Get started<\/h2>\n<div class=\"additional-info-block output-inline\">\n<div class=\"additional-info-block__body\"><p><img style=\"width: 38px;\" alt=\"\" src=\"\/user\/pages\/docs\/05.plugins\/05.salesforce-commerce-cloud\/05.composable-storefront\/salesforce_logo.svg?decoding=auto&amp;fetchpriority=auto\" \/>&nbsp; <strong>Examples<\/strong><\/p><ul><li>Visit the <a href=\"https:\/\/adyen-salesforce-pwa-demo.mobify-storefront.com\/\" target=\"_blank\" rel=\"nofollow noopener noreferrer\" class=\"external-link no-image\">demo Composable Storefront site<\/a> integrated with the Adyen payments package.<\/li><li>Visit the <a href=\"https:\/\/github.com\/Adyen\/adyen-salesforce-headless-commerce-pwa\" target=\"_blank\" rel=\"nofollow noopener noreferrer\" class=\"external-link no-image\">Adyen Salesforce Headless Commerce PWA repository on GitHub<\/a> to see an example integration with the Adyen package.<\/li><\/ul><\/div><\/div>\n\n<p>The Adyen npm package can be integrated into the <a href=\"https:\/\/developer.salesforce.com\/docs\/commerce\/pwa-kit-managed-runtime\/guide\/retail-react-app.html\" target=\"_blank\" rel=\"nofollow noopener noreferrer\" class=\"external-link no-image\">default Salesforce Retail React App<\/a> or into your Custom Retail React App.<\/p>\n<p>Before you begin to integrate, make sure you have followed the <a href=\"\/pt\/get-started-with-adyen\">Get started with Adyen guide<\/a> to:<\/p>\n<ul>\n<li>Get an overview of the steps needed to accept live payments.<\/li>\n<li>Create your test account.<\/li>\n<\/ul>\n<p>While you wait for your live account credentials, you can start integrating by using your test account:<\/p>\n<ol>\n<li>Find the latest version of the package on <a href=\"https:\/\/www.npmjs.com\/package\/@adyen\/adyen-salesforce-pwa?activeTab=readme\" target=\"_blank\" rel=\"nofollow noopener noreferrer\" class=\"external-link no-image\">npm<\/a>.<\/li>\n<li><a href=\"\/pt\/plugins\/salesforce-commerce-cloud\/composable-storefront\/install-and-set-up-the-package\">Install and set up the Composable Storefront integration<\/a>.<\/li>\n<li><a href=\"\/pt\/plugins\/salesforce-commerce-cloud\/composable-storefront\/set-up-payment-methods\">Set up payment methods<\/a>.<\/li>\n<li><a href=\"\/pt\/plugins\/salesforce-commerce-cloud\/composable-storefront\/customization-guide\">Customize<\/a> the payment, order, and status processing of your PWA app with the Adyen payments integration.<\/li>\n<li>Use our <a href=\"\/pt\/development-resources\/testing\">test card numbers<\/a> to make test payments with your integration.<\/li>\n<\/ol>\n<p>Before going live, follow our <a href=\"\/pt\/plugins\/salesforce-commerce-cloud\/composable-storefront\/go-live-checklist\">go-live checklist<\/a> to make sure you have got everything set up correctly.<\/p>\n<p>If you experience any issues with your integration, follow our <a href=\"\/pt\/plugins\/salesforce-commerce-cloud\/composable-storefront\/\">troubleshooting guide<\/a>.<\/p>\n<p>If you decide to customize your integration, we recommend that you:<\/p>\n<ul>\n<li>Keep track of the custom code added to your integration.<\/li>\n<li>Follow the customization best practices outlined in our <a href=\"\/pt\/plugins\/salesforce-commerce-cloud\/composable-storefront\/customization-guide\">Customization guide<\/a>.<\/li>\n<\/ul>\n<h2>Migrate from SFRA or SiteGenesis<\/h2>\n<p>If you already have an <a href=\"\/pt\/plugins\/salesforce-commerce-cloud\/sfra\">SFRA or SiteGenesis integration with Adyen<\/a>, you can migrate to the Composable Storefront architecture.<\/p>\n<p>To migrate, you must follow the <a href=\"\/pt\/plugins\/salesforce-commerce-cloud\/composable-storefront\/install-and-set-up-the-package\">standard installation and setup guide<\/a> and complete the step to <a href=\"\/pt\/plugins\/salesforce-commerce-cloud\/composable-storefront\/install-and-set-up-the-package#migrate-pages\">migrate your store pages<\/a>. We recommend you first migrate in the test environment.<\/p>","url":"https:\/\/docs.adyen.com\/pt\/plugins\/salesforce-commerce-cloud\/composable-storefront","articleFields":{"description":"Use the Adyen Payments Composable Storefront package to accept payments with a headless solution in your Salesforce store.","feedback_component":true,"next_steps":[{"title":"Install and set up the package","description":"Install and set up the Adyen Composable Storefront package.","url":"\/plugins\/salesforce-commerce-cloud\/composable-storefront\/install-and-set-up-the-package","required":true},{"title":"Set up payment methods","description":"Set up the payment methods that you want to offer in your Salesforce Composable Storefront.","url":"\/plugins\/salesforce-commerce-cloud\/composable-storefront\/set-up-payment-methods","required":true}],"filters_component":false,"last_edit_on":"25-01-2024 13:47","page_id":"dff88025-9484-45f4-903c-f92d9b2e2aea","decision_tree":"[]"},"algolia":{"url":"https:\/\/docs.adyen.com\/pt\/plugins\/salesforce-commerce-cloud\/composable-storefront","title":"Composable Storefront package","content":"\n&nbsp; WebinarWatch our on-demand webinar to learn more about our Composable Storefront integration.\n\nThe Adyen Composable Storefront package is a headless payments integration for Salesforce B2C Commerce stores built with the Salesforce Progressive Web App (PWA) Kit. The package includes front-end and back-end components that enable payment processing using the Adyen Web Drop-in.\nThe Salesforce PWA Kit allows you to create custom storefronts. After you have built your storefront, you can use Managed Runtime to deploy, host, and monitor your integration.\nRead more about Composable Storefront, PWA, and Managed Runtime in Salesforce Documentation.\nGet started\n\n&nbsp; ExamplesVisit the demo Composable Storefront site integrated with the Adyen payments package.Visit the Adyen Salesforce Headless Commerce PWA repository on GitHub to see an example integration with the Adyen package.\n\nThe Adyen npm package can be integrated into the default Salesforce Retail React App or into your Custom Retail React App.\nBefore you begin to integrate, make sure you have followed the Get started with Adyen guide to:\n\nGet an overview of the steps needed to accept live payments.\nCreate your test account.\n\nWhile you wait for your live account credentials, you can start integrating by using your test account:\n\nFind the latest version of the package on npm.\nInstall and set up the Composable Storefront integration.\nSet up payment methods.\nCustomize the payment, order, and status processing of your PWA app with the Adyen payments integration.\nUse our test card numbers to make test payments with your integration.\n\nBefore going live, follow our go-live checklist to make sure you have got everything set up correctly.\nIf you experience any issues with your integration, follow our troubleshooting guide.\nIf you decide to customize your integration, we recommend that you:\n\nKeep track of the custom code added to your integration.\nFollow the customization best practices outlined in our Customization guide.\n\nMigrate from SFRA or SiteGenesis\nIf you already have an SFRA or SiteGenesis integration with Adyen, you can migrate to the Composable Storefront architecture.\nTo migrate, you must follow the standard installation and setup guide and complete the step to migrate your store pages. We recommend you first migrate in the test environment.","type":"page","locale":"pt","boost":17,"hierarchy":{"lvl0":"Home","lvl1":"Plugins","lvl2":"Salesforce Commerce Cloud - B2C Commerce","lvl3":"Composable Storefront package"},"hierarchy_url":{"lvl0":"https:\/\/docs.adyen.com\/pt","lvl1":"https:\/\/docs.adyen.com\/pt\/plugins","lvl2":"https:\/\/docs.adyen.com\/pt\/plugins\/salesforce-commerce-cloud","lvl3":"\/pt\/plugins\/salesforce-commerce-cloud\/composable-storefront"},"levels":4,"category":"Plugins","category_color":"green","tags":["Composable","Storefront","package"]},"articleFiles":{"salesforce_logo.svg":"<img style=\"width: 38px;\" alt=\"\" src=\"https:\/\/docs.adyen.com\/user\/pages\/docs\/05.plugins\/05.salesforce-commerce-cloud\/05.composable-storefront\/salesforce_logo.svg?decoding=auto&amp;fetchpriority=auto\" \/>"}}