---
title: "Composable Storefront package"
description: "Use the Adyen Payments Composable Storefront package to accept payments with a headless solution in your Salesforce store."
url: "https://docs.adyen.com/plugins/salesforce-commerce-cloud/composable-storefront"
source_url: "https://docs.adyen.com/plugins/salesforce-commerce-cloud/composable-storefront.md"
canonical: "https://docs.adyen.com/plugins/salesforce-commerce-cloud/composable-storefront"
last_modified: "2024-01-25T13:47:00+01:00"
language: "en"
---

# Composable Storefront package

Use the Adyen Payments Composable Storefront package to accept payments with a headless solution in your Salesforce store.

[View source](/plugins/salesforce-commerce-cloud/composable-storefront.md)

![](/user/pages/docs/05.plugins/05.salesforce-commerce-cloud/05.composable-storefront/salesforce_logo.svg?decoding=auto\&fetchpriority=auto)  **Webinar**

[Watch our on-demand webinar](https://help.adyen.com/academy/webinars/sfcc-composable-storefront#watch-on-demand) to learn more about our Composable Storefront integration.

The Adyen Composable Storefront package is a headless payments integration for Salesforce B2C Commerce stores built with the [Salesforce Progressive Web App (PWA) Kit](https://developer.salesforce.com/docs/commerce/pwa-kit-managed-runtime/guide/pwa-kit-overview.html). The package includes front-end and back-end components that enable payment processing using the [Adyen Web Drop-in](/online-payments/build-your-integration/sessions-flow?platform=Web\&integration=Drop-in).

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.

Read more about Composable Storefront, PWA, and Managed Runtime in [Salesforce Documentation](https://developer.salesforce.com/docs/commerce/pwa-kit-managed-runtime/guide/getting-started.html#new-project).

## Get started

![](/user/pages/docs/05.plugins/05.salesforce-commerce-cloud/05.composable-storefront/salesforce_logo.svg?decoding=auto\&fetchpriority=auto)  **Examples**

* Visit the [demo Composable Storefront site](https://adyen-salesforce-pwa-demo.mobify-storefront.com/) integrated with the Adyen payments package.
* Visit the [Adyen Salesforce Headless Commerce PWA repository on GitHub](https://github.com/Adyen/adyen-salesforce-headless-commerce-pwa) to see an example integration with the Adyen package.

The Adyen npm package can be integrated into the [default Salesforce Retail React App](https://developer.salesforce.com/docs/commerce/pwa-kit-managed-runtime/guide/retail-react-app.html) or into your Custom Retail React App.

Before you begin to integrate, make sure you have followed the [Get started with Adyen guide](/get-started-with-adyen) to:

* Get an overview of the steps needed to accept live payments.
* Create your test account.

While you wait for your live account credentials, you can start integrating by using your test account:

1. Find the latest version of the package on [npm](https://www.npmjs.com/package/@adyen/adyen-salesforce-pwa?activeTab=readme).
2. [Install and set up the Composable Storefront integration](/plugins/salesforce-commerce-cloud/composable-storefront/install-and-set-up-the-package).
3. [Set up payment methods](/plugins/salesforce-commerce-cloud/composable-storefront/set-up-payment-methods).
4. [Customize](/plugins/salesforce-commerce-cloud/composable-storefront/customization-guide) the payment, order, and status processing of your PWA app with the Adyen payments integration.
5. Use our [test card numbers](/development-resources/testing) to make test payments with your integration.

Before going live, follow our [go-live checklist](/plugins/salesforce-commerce-cloud/composable-storefront/go-live-checklist) to make sure you have got everything set up correctly.

If you experience any issues with your integration, follow our [troubleshooting guide](/plugins/salesforce-commerce-cloud/composable-storefront/).

If you decide to customize your integration, we recommend that you:

* Keep track of the custom code added to your integration.
* Follow the customization best practices outlined in our [Customization guide](/plugins/salesforce-commerce-cloud/composable-storefront/customization-guide).

## Migrate from SFRA or SiteGenesis

If you already have an [SFRA or SiteGenesis integration with Adyen](/plugins/salesforce-commerce-cloud/sfra), you can migrate to the Composable Storefront architecture.

To migrate, you must follow the [standard installation and setup guide](/plugins/salesforce-commerce-cloud/composable-storefront/install-and-set-up-the-package) and complete the step to [migrate your store pages](/plugins/salesforce-commerce-cloud/composable-storefront/install-and-set-up-the-package#migrate-pages). We recommend you first migrate in the test environment.

## Next steps

[required](/plugins/salesforce-commerce-cloud/composable-storefront/install-and-set-up-the-package)

[Install and set up the package](/plugins/salesforce-commerce-cloud/composable-storefront/install-and-set-up-the-package)

[Install and set up the Adyen Composable Storefront package.](/plugins/salesforce-commerce-cloud/composable-storefront/install-and-set-up-the-package)

[required](/plugins/salesforce-commerce-cloud/composable-storefront/set-up-payment-methods)

[Set up payment methods](/plugins/salesforce-commerce-cloud/composable-storefront/set-up-payment-methods)

[Set up the payment methods that you want to offer in your Salesforce Composable Storefront.](/plugins/salesforce-commerce-cloud/composable-storefront/set-up-payment-methods)
