\n <\/in-page-filtering>\n<\/div>\n\n <\/div>\n","url":"https:\/\/docs.adyen.com\/pt\/plugins\/salesforce-commerce-cloud\/composable-storefront\/install-and-set-up-the-package","articleFields":{"description":"Install and set up the Adyen Composable Storefront package.","feedback_component":true,"last_edit_on":"25-01-2024 13:54","page_id":"dff88025-9484-45f4-903c-f92d9b2e2aea","decision_tree":"[]","filters_component":true,"filters_config_folder":"composable-storefront","dynamic_minitoc":true,"dynamic_minitoc_context":".in-page-filtering--content"},"algolia":[{"url":"https:\/\/docs.adyen.com\/pt\/plugins\/salesforce-commerce-cloud\/composable-storefront\/install-and-set-up-the-package","title":"Set up your Composable Storefront with Adyen","content":"Requirements\nBefore you begin, take into account the following requirements, limitations, and preparations.\n\n\n\nRequirement\nDescription\n\n\n\n\nIntegration type\nUse this page to build an integration with our Salesforce Composable Storefront package.\n\n\nSupported versions\n Salesforce PWA Kit v3.12.0 and later Node v22 or later npm v11 or later\n\n\nSetup steps\nBefore you begin, complete the following steps on the Salesforce side: Set up a Salesforce sandbox connected to your Salesforce Commerce Cloud (SFCC) instance. Set up your environments, sites, locales and currencies, and product inventories. Set up your WebDAV authentication credentials. Reach out to your Salesforce account team and enable Managed Runtime (MRT) on your SFCC instance. Set your MRT permissions to Admin.Review the configuration file structure of the Salesforce PWA kit. Enable Customization with Hooks in Salesforce. \n\n\nStep 1: Install the cartridge and import the metadata\nThe npm package for the Composable Storefront integration works together with a cartridge for the Salesforce Commerce Cloud (SFCC) cartridge. The companion cartridge extends your Salesforce Business Manager with additional functionality that lets you use Adyen features that are not supported by the Salesforce B2C Commerce API (SCAPI).\n\nThe metadata files in the cartridge handle the necessary configurations:\n\nPayment configuration: Defines the Adyen payment processor, enabling card payments and various alternative payment methods.\nSystem Object extensions: Extends standard objects like Basket, OrderPaymentInstrument, and PaymentTransaction to store Adyen-specific payment data.\nJob schedules: Includes the jobs that processes pending webhooks, and the jobs that clean up the processed webhooks.\n\nThe cartridge creates custom SCAPI endpoints in the Business Manager to handle payment flows.\n\nNotify endpoint: Receives the incoming Adyen webhook data and securely stores it in the Business Manager for later processing by the scheduled job.\nCreate Order endpoint: Creates an order and assigns it an order number, so that the number can be used when making a payment. This is required for gift card payments.\nGet Order endpoint: Retrieves order details for an order when it is created.\n\nThe cartridge creates a custom SCAPI hook in the Business Manager that automatically generates and manages order numbers to prevent conflicts.\n\nTo set up the cartridge:\n\n\nDownload the cartridge from our GitHub repository.\n\n\nIn your cartridge's root directory, create a dw.json file that includes the information required to establish a server connection and the code version that you want to upload your cartridge to. Read more about WebDAV authentication in the Salesforce documentation.\n\n\n\n\n\nFrom your cartridge's root directory, install Node modules using your command line.\nnpm install\n\n\nRun the following to generate output that is compatible with JavaScript ES5.\nThe source files in the \/src directory use modern Javascript ES6+ syntax and modern tooling that Salesforce Commerce Cloud does not natively support.\nnpm run build\n\n\nTo add new configuration items, import the predefined metadata:\n\nOpen the adyen-salesforce-headless-commerce-pwa\/metadata\/site_import\/sites\/ folder.\nRename the yourSiteId (RefArch) folder to the ID of your site in your Salesforce Business Manager.\nOpen the adyen-salesforce-headless-commerce-pwa\/metadata\/site_import\/jobs.xml file.\nRename the site-id to the ID of your site in your Salesforce Business Manager.\nZip the site_import folder.\nIn the Business Manager, go to Administration > Site Development > Site Import & Export and import the zipped file.\n\n\n\nIn the Business Manager, go to Administration > Sites > Manage Sites > [yourSite] > Settings.\n\n\nIn the Cartridges box, enter int_adyen_PWA, to set up the cartridge path. Select Apply.\n\nStep 2: Build your local PWA app\nTo use Adyen as the payment processor for your PWA app, you need to generate a new PWA project.\n\n\nInitiate the Salesforce PWA Kit starter project with the following command:\n\n\n\nThe command-line interface guides you through the setup. While you set up your project, you are asked to link the generated retail app to a demo sandbox or your own sandbox.\n\nOnly if you link the retail app to your own sandbox, enter the following details at the command prompt when creating the new app:\n\nSandbox URL\nShopper Login and API Access Service (SLAS) client ID\nSite (storefront) ID\nOrganization (Org) ID\nShort code\n\nLaunch your retail app with the following command:\n\n\n\nStep 3: Install the Adyen package in your local PWA app\n\n\nIn the root directory of your PWA app, install the Adyen Salesforce PWA npm package:\n\n\n\n\n\nIn your PWA app, adjust the overrides\/app\/ssr.js file to import Adyen routes. You must import routes in the following order:\n\n\nAdyen routes. Add the following line:\n\n\n\n\n\nDefault Salesforce routes.\n\n\nCustom routes. We recommend you integrate and test the package without customizations first.\n\n\n\n\nIn the overrides\/app folder of your Retail React app:\n\n\nOverride the checkout\/partials\/payment.jsx file to render the AdyenCheckout component from the adyen-salesforce-pwa package. In the next step, you need to configure some required properties for the component.\n\n\n\nSee the file in our example package on GitHub.\n\nOverride the checkout\/confirmation.jsx file to wrap the Salesforce checkout confirmation page with the AdyenCheckout and AdyenCheckoutProvider from the adyen-salesforce-pwa package. See how you can render the components in our GitHub.\nCreate an error page and register it in routes.jsx as checkout\/error. See the example error page on GitHub.\nCreate a redirect page and register it in routes.jsx as checkout\/redirect. See the example redirect page on GitHub.\n\nSee the routes.jsxfile on GitHub to see how you can register pages.\n\n\nIn your package.json file, add the following scripts:\n\n\n\n\n\nRun the integration:\n\n\n\n\nStep 4: Configure the checkout component\nThe AdyenCheckout component requires certain properties. You can use optional properties to customize your integration.\nOn the overrides\/app\/checkout\/partials\/payment.jsx page, where you render the AdyenCheckout component, configure the following properties.\n\n\n\nProperty\nRequired\nDescription\n\n\n\n\nauthToken\n\nThe shopper authentication token. This is used for server-side API calls, such as fetching the basket and communicating between Adyen and Salesforce. Get this from the useAccessToken hook.\n\n\nsite\n\nThe site configuration object from the useMultiSite hook. It includes details like site properties and environment variables needed to query endpoints.\n\n\nlocale\n\nThe locale configuration from the useMultiSite hook, passed from Salesforce, which provides the locale to the component.\n\n\nnavigate\n\nThe navigation function from the useNavigation hook. This function is passed to the component for handling redirection after a payment, for example redirecting to the confirmation page on success, or an error page.\n\n\nbasket\n\nThe current shopper\u2019s basket object from the useCurrentBasket hook. The amount of the basket is used to determine the available payment methods.\n\n\nreturnUrl\n\nURL to where the shopper should be taken back to after a redirection. The URL can contain a maximum of 1024 characters and should include the protocol: http:\/\/ or https:\/\/. You can also include your own additional query parameters, for example, shopper ID or order reference number. If the URL to return to includes non-ASCII characters, like spaces or special letters, URL encode the value. The URL must not include personally identifiable information (PII), for example name or email address. \n\n\ncustomerId\n\nThe Customer ID for authenticated users. This is used to display saved payment methods.\n\n\nisCustomerRegistered\n\nWhether the shopper is logged-in. When set to true, if the shopper has saved payment methods, they will be displayed at checkout. The default is false.\n\n\npage\n\nThe page of your PWA storefront where you render the available payment methods. Possible values are checkout, confirmation, or redirect. The default is checkout.\n\n\nbeforeSubmit\n\nA function, or array of functions called before the shopper selects the pay button. Set to false to prevent payment submission.\n\n\nafterSubmit\n\nA function, or array of functions called after the payment is completed. successful payment. Receives the payment result.\n\n\nbeforeAdditionalDetails\n\nA function, or array of functions called before handling additional actions, when a payment method requires more details. For example, for native 3D secure 2 authentication, or a QR code payment method.\n\n\nafterAdditionalDetails\n\nA function, or array of functions called after handling additional actions.\n\n\nonError\n\nA function, or array of functions called when an error occurs.\n\n\nonStateChange\n\nA function, or array of functions called when the payment component state changes. Receives the state object.\n\n\nspinner\n\nCustom loading spinner component in ReactNode format. It is shown when the component is fetching data, for example when the component makes an API call to get the available payment methods.\n\n\ndropinConfiguration\n\nIncludes the additional configuration for Drop-in, and the paymentMethodsConfiguration. Find all the optional configuration fields in in our Weh Drop-in integration guide.\n\n\npaymentMethodsConfiguration\n\nPayment method specific configuration to customize certain payment methods. Our payment method guides show the available configurations for each method.\n\n\ntranslations\n\nA map of keys and strings including custom translations. In this object, specify the locale you want to customize, and add key-value pairs for the text you want to customize. We include UI localizations for some languages. The fields and text are in the files for the included locales in Drop-in.\n\n\n\n\n \nStep 5 (Optional): Handle the browser back button\nFor a better user experience when shoppers navigate away from a redirect payment page, you can implement the following hooks:\n\n\nuseHandleBackNavigation: This hook handles the cleanup when a shopper uses the browser's back button to navigate from a redirect payment page back to the checkout page, to prevent orphaned orders and ensure proper state management.\nThe flow is as follows: The hook detects the navigation change and automatically calls the backend cleanup endpoint. This fails any pending Salesforce orders and recreates the basket. The shopper can return to the checkout later without conflicts.\n\n\nuseCheckoutErrorRecovery: This hook detects checkout failures, refetches the basket, and forces a clean remount of the AdyenCheckout component.\nThe flow is as follows: When a payment fails, the backend automatically fails the Salesforce order, creates a new basket with the same items, and redirects to \/checkout?newBasketId={newBasketId}. The hook detects the newBasketId and automatically navigates to \/checkout?error=true, refetches the basket with the newly created basket data, and increments adyenCheckoutKey to force a clean remount. The shopper sees a clean checkout state with the recreated basket.\n\n\nImplementing these hooks is recommended. They work with the standard checkout flow as well as the express checkout flow.\nTo implement these hooks:\n\n\nImport the hooks.\nimport {\n useHandleBackNavigation,\n useCheckoutErrorRecovery\n} from '@adyen\/adyen-salesforce-pwa'\n\n\nTo handle the back navigation cleanup, add useHandleBackNavigation to your checkout page component, specifying the following properties for this hook:\n\n\n\nProperty\nType\nRequired\nDescription\n\n\n\n\nauthToken\nString\n\nThe customer authentication token.\n\n\ncustomerId\nString\n\nThe ID of the customer.\n\n\nbasketId\nString\n\nThe ID of the current basket.\n\n\nsite\nObject\n\nThe site configuration object.\n\n\nnavigate\nFunction\n\nThe React Router navigate function.\n\n\n\nconst CheckoutPage = () => {\n const {data: basket, refetch: refetchBasket} = useCurrentBasket()\n const customerId = useCustomerId()\n const {getTokenWhenReady} = useAccessToken()\n const navigate = useNavigation()\n const {locale, site} = useMultiSite()\n const [authToken, setAuthToken] = useState()\n\n useEffect(() => {\n const getToken = async () => {\n const token = await getTokenWhenReady()\n setAuthToken(token)\n }\n getToken()\n }, [])\n\n \/\/ Handle browser back navigation cleanup\n useHandleBackNavigation({\n authToken,\n customerId,\n basketId: basket?.basketId,\n site,\n navigate\n })\n\n \/\/ ... rest of component\n}\n\n\nTo handle checkout error recovery, add useCheckoutErrorRecovery to your payment component, specifying the following properties for this hook:\n\n\n\nProperty\nType\nRequired\nDescription\n\n\n\n\nrefetchBasket\nFunction\n\nThe function to refetch the current basket.\n\n\nnavigate\nFunction\n\nThe React Router navigate function.\n\n\n\nconst Payment = () => {\n const {data: basket, refetch: refetchBasket} = useCurrentBasket()\n const navigate = useNavigation()\n\n const {adyenCheckoutKey, isRefetchingBasket} = useCheckoutErrorRecovery({\n refetchBasket,\n navigate\n })\n\n return (\n <AdyenCheckout\n key={adyenCheckoutKey} \/\/ Forces remount on error recovery\n \/\/ ... other props\n \/>\n )\n}\nThe useCheckoutErrorRecovery hook returns the following:\n\n\n\nReturn value\nType\nDescription\n\n\n\n\nadyenCheckoutKey\nNumber\nA key to force a remount of AdyenCheckout.\n\n\nisRefetchingBasket\nBoolean\nThe loading state while the basket is refetched.\n\n\n\n\nStep 6: Set up locales in your PWA app\nThe config\/default.js file in the PWA Retail React app contains the locale definitions for your sites. You need to update this file with the locales you want to support in your Salesforce Commerce Cloud site:\n\n\nIn the PWA Retail React app package, go to the config\/default.js file.\n\n\nSet the following fields:\n\n\n\nField\nDescription\n\n\n\n\nsupportedCurrencies\nThe array of all currencies for the locales you have set up.\n\n\ndefaultCurrency\nThe default currency for your site.\n\n\ndefaultLocale\nThe default locale for your site.\n\n\nsupportedLocales\nThe array for all locale objects. Each locale object consists of: id: the locale ID, for example en-US. preferredCurrency: the currency for the locale, for example: USD. alias (optional): You can use this attribute if you want to use other string instead of the id. \n\n\n\n\nSee the PWA integration with the Adyen package on GitHub to see an example locale configuration.\n\n\n\nIn the config\/default.js file, change the local attribute from none to query_param or path to display the locale in the URL.\n\n\nOnly if you defined the alias field for locales, in the config\/default.js file, remove the comment markers for siteAliases, and provide the aliases for your sites.\n\nStep 7: Generate an Adyen API Key\nIf you already have an SFCC integration with Adyen using Store Front Reference Architecture (SFRA) or SiteGenesis, you do not have to generate a new API Key and you can skip this step.\nTo connect your PWA store to the Adyen APIs, you need to generate an API key in your Adyen Customer Area and add it to the package configuration when you set environment variables in a later step.\n\nLog in to your Customer Area and select your Company account.\nGo to Developers > API credentials.\nSelect the Payments or Platforms tab, depending on your integration type.\nSelect the credential username.\nUnder Server settings > Authentication select the API key tab.\nSelect Generate API key.\nSelect the copy icon and store your API key securely in your system.\n\nYou cannot copy the API key again after you leave the page.\n\nSelect Save changes.\nStep 8: Set up webhooks\nAdyen uses webhooks to inform your Salesforce Commerce Cloud store of payment status changes.\nIn Salesforce Commerce Cloud, webhooks are stored as custom objects that get processed by scheduled jobs. The jobs and custom objects are set by the int_adyen_PWA cartridge that you installed. You first need to set up webhooks in the Adyen Customer Area, then you can configure the jobs to process the webhooks in Salesforce.\nSet up webhooks in the Customer Area\n\n\nIn your Customer Area, go to Developers\u00a0>\u00a0 Webhooks. If you want to configure webhooks for a merchant account, switch to that merchant account.\n\n\nSelect Webhook.\n\n\nFrom the list of webhooks, next to Standard webhook, select Add.\n\n\nUnder General, configure the following:\n\n\n\nSetting\nDescription\n\n\n\n\nEnabled\nSelect the toggle to enable or disable the webhook.\n\n\nVersion\nThe webhook version.\n\n\nDescription\nYour description of the webhook.\n\n\n\n\n\nUnder Server configuration, configure the following:\n\n\n\nSetting\nDescription\n\n\n\n\nURL\nYour website URL followed by \/api\/adyen\/webhook?siteId=YOUR_SITE_ID.\n\n\nMethod\nJSON\n\n\nEncryption protocol\nTLSv1.3\n\n\n\n\n\nUnder Security, configure the following:\n\n\n\nSetting\nDescription\n\n\n\n\nBasic authentication\nEnter your server's username and password. You need to enter these credentials when setting environment variables later.\n\n\nHMAC Key\nGenerate the HMAC Key, copy it, and store it securely in your system. You need to enter the key when setting environment variables later. Learn more about verifying HMAC signatures.\n\n\n\n\n\nUnder Events settings, select the checkbox for the OFFER_CLOSED event code.\n\n\nIf the Additional settings section is available, optionally select the additional information you want to receive in this webhook. Some webhook types do not support more than one event code, so this section does not appear.\n\n\nSelect Save configuration.\n\n\nThe package implements the AUTHORISATION webhook by default. If you want to receive webhooks for more payment events, you can customize your integration after you have successfully deployed your application in MRT and completed testing without any customizations.\n\nYou cannot test Adyen webhooks on localhost.\n\nConfigure scheduled jobs in Salesforce\nWebhooks are stored in Salesforce Commerce Cloud as custom object instances to be processed by scheduled jobs.\nAfter the metadata import, a scheduled job with ID Process is added to the Salesforce Business Manager > Administration > Operations > Jobs. This scheduled job has two steps that you can check under Job Steps.\n\nProcess \u2013 Processes the webhook and updates the payment status of the order.\nClean \u2013 Deletes the custom object instance, once it has been processed.\n\nTo optimize the processing of your instances, we recommend that you set the frequency of this scheduled job to 1 minute:\n\nGo to the Schedule and History tab for the Process scheduled job.\nSet Trigger to Recurring Interval.\nIn the Run Time pane, set Amount to 1, and Interval to Minutes.\nStep 9: Deploy your application in Managed Runtime\nSalesforce's Managed Runtime (MRT) provides the infrastructure to deploy, host, and monitor your PWA Kit application.\nManaged Runtime only supports applications created from a PWA Kit template and has a separate admin dashboard. Before you can use MRT and Runtime Admin, Salesforce must enable it for your organization. To enable MRT and Runtime Admin for your organization, reach out to your Salesforce account team.\nWhen building your storefront, keep the constraints of MRT environments in mind.\n1. Create a new project in Managed Runtime\nFollow the steps to create a project in Runtime Admin. Use the following details for your project:\n\n\n\nField\nValue\n\n\n\n\nProject Name\nadyen-salesforce-headless-commerce-pwa\n\n\nProject ID\nProject IDs must match the package name in the package.json file and can not be longer than 20 characters.\n\n\nScopes\nThe list of scopes that are used to fetch baskets and create orders.\n\n\n\n2. Set up the MRT environment\nSet up an environment to separate your production storefront from other storefronts, such as development or testing storefronts. Refer to environments in Salesforce docs to learn more about environments.\n\nFollow the steps to create an environment in Salesforce Docs.\nName: use your Sandbox Org ID to easily identify an environment that belongs to a sandbox, and to create variables correctly for each environment.\nRegion: we recommend to set your MRT region to the same region that your Salesforce sandbox uses.\n\nYour Composable Storefront integration with Adyen can only have one region connected to one MRT organization, one SFCC site, and one Adyen Customer Area account.\n\n\n3. Set the environment variables\n\nIn your MRT environment, navigate to your project by selecting your Organization and Project.\nSelect Environment Variables.\n\nSpecify the values for the following variables:\n\nWhen a variable contains YOUR_SITE_ID, replace it with the same value as your Commerce API site ID.\n\n\n\n\nVariable\nRequired\nDescription\n\n\n\n\nYOUR_SITE_ID_ADYEN_API_KEY\n\nYour Adyen API key.\n\n\nYOUR_SITE_ID_ADYEN_MERCHANT_ACCOUNT\n\nYour Adyen merchant account name.\n\n\nYOUR_SITE_ID_ADYEN_CLIENT_KEY\n\nYour Adyen client key.\n\n\nYOUR_SITE_ID_ADYEN_ENVIRONMENT\n\nUse test. When you are ready to accept live payments, change the value to live.\n\n\nYOUR_SITE_ID_ADYEN_WEBHOOK_USER\n\nThe basic authentication username you entered when you set up webhooks.\n\n\nYOUR_SITE_ID_ADYEN_WEBHOOK_PASSWORD\n\nThe basic authentication password you entered when you set up webhooks.\n\n\nYOUR_SITE_ID_ADYEN_HMAC_KEY\n\nThe HMAC key you generated when you set up webhooks.\n\n\nYOUR_SITE_ID_ADYEN_LIVE_URL_PREFIX\nOnly for Live environment\nYour live URL prefix to process live transactions.\n\n\nYOUR_SITE_ID_ADYEN_APPLE_DOMAIN_ASSOCIATION\n\nIf you want to offer Apple Pay as a payment method in the live environment, set to the domain association file value.\n\n\nYOUR_SITE_ID_SYSTEM_INTEGRATOR_NAME\n\nThe name of your system integrator.\n\n\nCOMMERCE_API_CLIENT_ID\n\nYour MRT Commerce API client ID.\n\n\nCOMMERCE_API_ORG_ID\n\nYour MRT Commerce API Org ID.\n\n\nCOMMERCE_API_SHORT_CODE\n\nYour MRT Commerce API short code.\n\n\nCOMMERCE_API_SITE_ID\n\nYour Salesforce site ID, for example, RefArch.\n\n\nCOMMERCE_API_DEFAULT_SITE\n\nYour default Salesforce site, for example, RefArch.\n\n\nSCAPI_URL\n\nYour Salesforce Commerce API URL. Refer to Salesforce documentation for more information.\n\n\nOCAPI_URL\n\nYour Open Commerce API Url. Refer to Salesforce documentation for more information.\n\n\nENVIRONMENT_ID\n\nYour MRT environment ID.\n\n\nPROJECT_ID\n\nYour project ID, for example, adyen-salesforce-pwa.\n\n\nCOMMERCE_API_CLIENT_ID_PRIVATE\n\nYour Salesforce Commerce API client ID. To get your API credentials, create an API client in Salesforce.\n\n\nCOMMERCE_API_CLIENT_SECRET\n\nYour Commerce API client secret for your Salesforce API client.\n\n\nSFCC_REALM_ID\n\nYour SFCC realm ID.\n\n\nSFCC_INSTANCE_ID\n\nYour SFCC instance ID.\n\n\nSFCC_OAUTH_SCOPES\n\nThe custom Adyen SCAPI scopes, for example, c_order_rw c_notify_rw, and your SFCC oauth scopes, for example, sfcc.orders sfcc.orders.rw. You also need to add this in your Salesforce Account Manager > API Client > OpenID Connect > Allowed Scopes. Refer to Salesforce documentation to learn more about authorization scopes.\n\n\nYOUR_SITE_ID_GIFT_CARD_EXPIRATION_TIME\n\nFor partial payments with gift cards, the expiration time after an order is created, in minutes. The default is 30.\n\n\n\n\nWhen going live, you need to update some variables you have entered with values from your live Customer Area.\n\n\n\n4. Deploy your project to MRT\nTo run your application, you must deploy your application to MRT and to the environment you have set up. You also need a Personal MRT API Key.\n\n\nFollow the steps to generate a Personal MRT API key in Salesforce Docs.\n\n\nIn your Retail React App, save your credentials:\n\n\n\n\n\nPush your build to MRT:\n\n\n\n\n\nFollow the steps to deploy the bundle in Salesforce Docs to the environment you have created.\n\nStep 10 (Optional): Import the Adyen country\/region list\nSalesforce allows you to add your list of countries\/regions for shipping. Optionally, you can use our default list.\nTo use our country\/region list, in your PWA Retail React app, import the Adyen countrylist and export it as SHIPPING_COUNTRY_CODES in the constants.js file:\n\n \nMigrate pages\nIf you already have an SFCC integration with Adyen using Store Front Reference Architecture (SFRA) or SiteGenesis, you need to migrate your store pages. If you do not have an SFCC integration with Adyen already, you can start testing.\nYou can perform Phased Headless Rollouts to migrate your SFRA or SiteGenesis pages in a phased approach.\n\nThe Adyen package uses version 8 of the Retail React App with template extensibility. To filter out links to non-PWA kit pages, you can override the overrides\/app\/routes.jsx file. Salesforce has sample code on GitHub that shows how to override.\n\n\nIf you are migrating the checkout page last, you need to route traffic to your SFRA checkout page from your PWA integration. To learn how to apply routing, refer to Salesforce Docs.\nTesting\nAfter you have installed and configured the package, use our test cards to test payments.\nCheck the status of test payments in your Customer Area > Transactions > Payments.Next steps\n\nrequiredSet up payment methodsSet up the payment methods that you want to offer in your Salesforce Composable Storefront.CustomizeCheck our customization guide to learn how you can modify your integration..\n","type":"page","locale":"pt","boost":16,"hierarchy":{"lvl0":"Home","lvl1":"Plugins","lvl2":"Salesforce Commerce Cloud - B2C Commerce","lvl3":"Composable Storefront package","lvl4":"Set up your Composable Storefront with Adyen"},"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":"https:\/\/docs.adyen.com\/pt\/plugins\/salesforce-commerce-cloud\/composable-storefront","lvl4":"\/pt\/plugins\/salesforce-commerce-cloud\/composable-storefront\/install-and-set-up-the-package"},"levels":5,"category":"Plugins","category_color":"green","tags":["Composable","Storefront","Adyen"]},{"url":"https:\/\/docs.adyen.com\/pt\/plugins\/salesforce-commerce-cloud\/composable-storefront\/install-and-set-up-the-package?plugin=Salesforce Composable Storefront&integration=package","title":"Salesforce Composable Storefront package","content":"Requirements\nBefore you begin, take into account the following requirements, limitations, and preparations.\n\n\n\nRequirement\nDescription\n\n\n\n\nIntegration type\nUse this page to build an integration with our Salesforce Composable Storefront package.\n\n\nSupported versions\n Salesforce PWA Kit v3.12.0 and later Node v22 or later npm v11 or later\n\n\nSetup steps\nBefore you begin, complete the following steps on the Salesforce side: Set up a Salesforce sandbox connected to your Salesforce Commerce Cloud (SFCC) instance. Set up your environments, sites, locales and currencies, and product inventories. Set up your WebDAV authentication credentials. Reach out to your Salesforce account team and enable Managed Runtime (MRT) on your SFCC instance. Set your MRT permissions to Admin.Review the configuration file structure of the Salesforce PWA kit. Enable Customization with Hooks in Salesforce. \n\n\nStep 1: Install the cartridge and import the metadata\nThe npm package for the Composable Storefront integration works together with a cartridge for the Salesforce Commerce Cloud (SFCC) cartridge. The companion cartridge extends your Salesforce Business Manager with additional functionality that lets you use Adyen features that are not supported by the Salesforce B2C Commerce API (SCAPI).\n\nThe metadata files in the cartridge handle the necessary configurations:\n\nPayment configuration: Defines the Adyen payment processor, enabling card payments and various alternative payment methods.\nSystem Object extensions: Extends standard objects like Basket, OrderPaymentInstrument, and PaymentTransaction to store Adyen-specific payment data.\nJob schedules: Includes the jobs that processes pending webhooks, and the jobs that clean up the processed webhooks.\n\nThe cartridge creates custom SCAPI endpoints in the Business Manager to handle payment flows.\n\nNotify endpoint: Receives the incoming Adyen webhook data and securely stores it in the Business Manager for later processing by the scheduled job.\nCreate Order endpoint: Creates an order and assigns it an order number, so that the number can be used when making a payment. This is required for gift card payments.\nGet Order endpoint: Retrieves order details for an order when it is created.\n\nThe cartridge creates a custom SCAPI hook in the Business Manager that automatically generates and manages order numbers to prevent conflicts.\n\nTo set up the cartridge:\n\n\nDownload the cartridge from our GitHub repository.\n\n\nIn your cartridge's root directory, create a dw.json file that includes the information required to establish a server connection and the code version that you want to upload your cartridge to. Read more about WebDAV authentication in the Salesforce documentation.\n\n\n\n\n\nFrom your cartridge's root directory, install Node modules using your command line.\nnpm install\n\n\nRun the following to generate output that is compatible with JavaScript ES5.\nThe source files in the \/src directory use modern Javascript ES6+ syntax and modern tooling that Salesforce Commerce Cloud does not natively support.\nnpm run build\n\n\nTo add new configuration items, import the predefined metadata:\n\nOpen the adyen-salesforce-headless-commerce-pwa\/metadata\/site_import\/sites\/ folder.\nRename the yourSiteId (RefArch) folder to the ID of your site in your Salesforce Business Manager.\nOpen the adyen-salesforce-headless-commerce-pwa\/metadata\/site_import\/jobs.xml file.\nRename the site-id to the ID of your site in your Salesforce Business Manager.\nZip the site_import folder.\nIn the Business Manager, go to Administration > Site Development > Site Import & Export and import the zipped file.\n\n\n\nIn the Business Manager, go to Administration > Sites > Manage Sites > [yourSite] > Settings.\n\n\nIn the Cartridges box, enter int_adyen_PWA, to set up the cartridge path. Select Apply.\n\nStep 2: Build your local PWA app\nTo use Adyen as the payment processor for your PWA app, you need to generate a new PWA project.\n\n\nInitiate the Salesforce PWA Kit starter project with the following command:\n\n\n\nThe command-line interface guides you through the setup. While you set up your project, you are asked to link the generated retail app to a demo sandbox or your own sandbox.\n\nOnly if you link the retail app to your own sandbox, enter the following details at the command prompt when creating the new app:\n\nSandbox URL\nShopper Login and API Access Service (SLAS) client ID\nSite (storefront) ID\nOrganization (Org) ID\nShort code\n\nLaunch your retail app with the following command:\n\n\n\nStep 3: Install the Adyen package in your local PWA app\n\n\nIn the root directory of your PWA app, install the Adyen Salesforce PWA npm package:\n\n\n\n\n\nIn your PWA app, adjust the overrides\/app\/ssr.js file to import Adyen routes. You must import routes in the following order:\n\n\nAdyen routes. Add the following line:\n\n\n\n\n\nDefault Salesforce routes.\n\n\nCustom routes. We recommend you integrate and test the package without customizations first.\n\n\n\n\nIn the overrides\/app folder of your Retail React app:\n\n\nOverride the checkout\/partials\/payment.jsx file to render the AdyenCheckout component from the adyen-salesforce-pwa package. In the next step, you need to configure some required properties for the component.\n\n\n\nSee the file in our example package on GitHub.\n\nOverride the checkout\/confirmation.jsx file to wrap the Salesforce checkout confirmation page with the AdyenCheckout and AdyenCheckoutProvider from the adyen-salesforce-pwa package. See how you can render the components in our GitHub.\nCreate an error page and register it in routes.jsx as checkout\/error. See the example error page on GitHub.\nCreate a redirect page and register it in routes.jsx as checkout\/redirect. See the example redirect page on GitHub.\n\nSee the routes.jsxfile on GitHub to see how you can register pages.\n\n\nIn your package.json file, add the following scripts:\n\n\n\n\n\nRun the integration:\n\n\n\n\nStep 4: Configure the checkout component\nThe AdyenCheckout component requires certain properties. You can use optional properties to customize your integration.\nOn the overrides\/app\/checkout\/partials\/payment.jsx page, where you render the AdyenCheckout component, configure the following properties.\n\n\n\nProperty\nRequired\nDescription\n\n\n\n\nauthToken\n\nThe shopper authentication token. This is used for server-side API calls, such as fetching the basket and communicating between Adyen and Salesforce. Get this from the useAccessToken hook.\n\n\nsite\n\nThe site configuration object from the useMultiSite hook. It includes details like site properties and environment variables needed to query endpoints.\n\n\nlocale\n\nThe locale configuration from the useMultiSite hook, passed from Salesforce, which provides the locale to the component.\n\n\nnavigate\n\nThe navigation function from the useNavigation hook. This function is passed to the component for handling redirection after a payment, for example redirecting to the confirmation page on success, or an error page.\n\n\nbasket\n\nThe current shopper\u2019s basket object from the useCurrentBasket hook. The amount of the basket is used to determine the available payment methods.\n\n\nreturnUrl\n\nURL to where the shopper should be taken back to after a redirection. The URL can contain a maximum of 1024 characters and should include the protocol: http:\/\/ or https:\/\/. You can also include your own additional query parameters, for example, shopper ID or order reference number. If the URL to return to includes non-ASCII characters, like spaces or special letters, URL encode the value. The URL must not include personally identifiable information (PII), for example name or email address. \n\n\ncustomerId\n\nThe Customer ID for authenticated users. This is used to display saved payment methods.\n\n\nisCustomerRegistered\n\nWhether the shopper is logged-in. When set to true, if the shopper has saved payment methods, they will be displayed at checkout. The default is false.\n\n\npage\n\nThe page of your PWA storefront where you render the available payment methods. Possible values are checkout, confirmation, or redirect. The default is checkout.\n\n\nbeforeSubmit\n\nA function, or array of functions called before the shopper selects the pay button. Set to false to prevent payment submission.\n\n\nafterSubmit\n\nA function, or array of functions called after the payment is completed. successful payment. Receives the payment result.\n\n\nbeforeAdditionalDetails\n\nA function, or array of functions called before handling additional actions, when a payment method requires more details. For example, for native 3D secure 2 authentication, or a QR code payment method.\n\n\nafterAdditionalDetails\n\nA function, or array of functions called after handling additional actions.\n\n\nonError\n\nA function, or array of functions called when an error occurs.\n\n\nonStateChange\n\nA function, or array of functions called when the payment component state changes. Receives the state object.\n\n\nspinner\n\nCustom loading spinner component in ReactNode format. It is shown when the component is fetching data, for example when the component makes an API call to get the available payment methods.\n\n\ndropinConfiguration\n\nIncludes the additional configuration for Drop-in, and the paymentMethodsConfiguration. Find all the optional configuration fields in in our Weh Drop-in integration guide.\n\n\npaymentMethodsConfiguration\n\nPayment method specific configuration to customize certain payment methods. Our payment method guides show the available configurations for each method.\n\n\ntranslations\n\nA map of keys and strings including custom translations. In this object, specify the locale you want to customize, and add key-value pairs for the text you want to customize. We include UI localizations for some languages. The fields and text are in the files for the included locales in Drop-in.\n\n\n\n\n \nStep 5 (Optional): Handle the browser back button\nFor a better user experience when shoppers navigate away from a redirect payment page, you can implement the following hooks:\n\n\nuseHandleBackNavigation: This hook handles the cleanup when a shopper uses the browser's back button to navigate from a redirect payment page back to the checkout page, to prevent orphaned orders and ensure proper state management.\nThe flow is as follows: The hook detects the navigation change and automatically calls the backend cleanup endpoint. This fails any pending Salesforce orders and recreates the basket. The shopper can return to the checkout later without conflicts.\n\n\nuseCheckoutErrorRecovery: This hook detects checkout failures, refetches the basket, and forces a clean remount of the AdyenCheckout component.\nThe flow is as follows: When a payment fails, the backend automatically fails the Salesforce order, creates a new basket with the same items, and redirects to \/checkout?newBasketId={newBasketId}. The hook detects the newBasketId and automatically navigates to \/checkout?error=true, refetches the basket with the newly created basket data, and increments adyenCheckoutKey to force a clean remount. The shopper sees a clean checkout state with the recreated basket.\n\n\nImplementing these hooks is recommended. They work with the standard checkout flow as well as the express checkout flow.\nTo implement these hooks:\n\n\nImport the hooks.\nimport {\n useHandleBackNavigation,\n useCheckoutErrorRecovery\n} from '@adyen\/adyen-salesforce-pwa'\n\n\nTo handle the back navigation cleanup, add useHandleBackNavigation to your checkout page component, specifying the following properties for this hook:\n\n\n\nProperty\nType\nRequired\nDescription\n\n\n\n\nauthToken\nString\n\nThe customer authentication token.\n\n\ncustomerId\nString\n\nThe ID of the customer.\n\n\nbasketId\nString\n\nThe ID of the current basket.\n\n\nsite\nObject\n\nThe site configuration object.\n\n\nnavigate\nFunction\n\nThe React Router navigate function.\n\n\n\nconst CheckoutPage = () => {\n const {data: basket, refetch: refetchBasket} = useCurrentBasket()\n const customerId = useCustomerId()\n const {getTokenWhenReady} = useAccessToken()\n const navigate = useNavigation()\n const {locale, site} = useMultiSite()\n const [authToken, setAuthToken] = useState()\n\n useEffect(() => {\n const getToken = async () => {\n const token = await getTokenWhenReady()\n setAuthToken(token)\n }\n getToken()\n }, [])\n\n \/\/ Handle browser back navigation cleanup\n useHandleBackNavigation({\n authToken,\n customerId,\n basketId: basket?.basketId,\n site,\n navigate\n })\n\n \/\/ ... rest of component\n}\n\n\nTo handle checkout error recovery, add useCheckoutErrorRecovery to your payment component, specifying the following properties for this hook:\n\n\n\nProperty\nType\nRequired\nDescription\n\n\n\n\nrefetchBasket\nFunction\n\nThe function to refetch the current basket.\n\n\nnavigate\nFunction\n\nThe React Router navigate function.\n\n\n\nconst Payment = () => {\n const {data: basket, refetch: refetchBasket} = useCurrentBasket()\n const navigate = useNavigation()\n\n const {adyenCheckoutKey, isRefetchingBasket} = useCheckoutErrorRecovery({\n refetchBasket,\n navigate\n })\n\n return (\n <AdyenCheckout\n key={adyenCheckoutKey} \/\/ Forces remount on error recovery\n \/\/ ... other props\n \/>\n )\n}\nThe useCheckoutErrorRecovery hook returns the following:\n\n\n\nReturn value\nType\nDescription\n\n\n\n\nadyenCheckoutKey\nNumber\nA key to force a remount of AdyenCheckout.\n\n\nisRefetchingBasket\nBoolean\nThe loading state while the basket is refetched.\n\n\n\n\nStep 6: Set up locales in your PWA app\nThe config\/default.js file in the PWA Retail React app contains the locale definitions for your sites. You need to update this file with the locales you want to support in your Salesforce Commerce Cloud site:\n\n\nIn the PWA Retail React app package, go to the config\/default.js file.\n\n\nSet the following fields:\n\n\n\nField\nDescription\n\n\n\n\nsupportedCurrencies\nThe array of all currencies for the locales you have set up.\n\n\ndefaultCurrency\nThe default currency for your site.\n\n\ndefaultLocale\nThe default locale for your site.\n\n\nsupportedLocales\nThe array for all locale objects. Each locale object consists of: id: the locale ID, for example en-US. preferredCurrency: the currency for the locale, for example: USD. alias (optional): You can use this attribute if you want to use other string instead of the id. \n\n\n\n\nSee the PWA integration with the Adyen package on GitHub to see an example locale configuration.\n\n\n\nIn the config\/default.js file, change the local attribute from none to query_param or path to display the locale in the URL.\n\n\nOnly if you defined the alias field for locales, in the config\/default.js file, remove the comment markers for siteAliases, and provide the aliases for your sites.\n\nStep 7: Generate an Adyen API Key\nIf you already have an SFCC integration with Adyen using Store Front Reference Architecture (SFRA) or SiteGenesis, you do not have to generate a new API Key and you can skip this step.\nTo connect your PWA store to the Adyen APIs, you need to generate an API key in your Adyen Customer Area and add it to the package configuration when you set environment variables in a later step.\n\nLog in to your Customer Area and select your Company account.\nGo to Developers > API credentials.\nSelect the Payments or Platforms tab, depending on your integration type.\nSelect the credential username.\nUnder Server settings > Authentication select the API key tab.\nSelect Generate API key.\nSelect the copy icon and store your API key securely in your system.\n\nYou cannot copy the API key again after you leave the page.\n\nSelect Save changes.\nStep 8: Set up webhooks\nAdyen uses webhooks to inform your Salesforce Commerce Cloud store of payment status changes.\nIn Salesforce Commerce Cloud, webhooks are stored as custom objects that get processed by scheduled jobs. The jobs and custom objects are set by the int_adyen_PWA cartridge that you installed. You first need to set up webhooks in the Adyen Customer Area, then you can configure the jobs to process the webhooks in Salesforce.\nSet up webhooks in the Customer Area\n\n\nIn your Customer Area, go to Developers\u00a0>\u00a0 Webhooks. If you want to configure webhooks for a merchant account, switch to that merchant account.\n\n\nSelect Webhook.\n\n\nFrom the list of webhooks, next to Standard webhook, select Add.\n\n\nUnder General, configure the following:\n\n\n\nSetting\nDescription\n\n\n\n\nEnabled\nSelect the toggle to enable or disable the webhook.\n\n\nVersion\nThe webhook version.\n\n\nDescription\nYour description of the webhook.\n\n\n\n\n\nUnder Server configuration, configure the following:\n\n\n\nSetting\nDescription\n\n\n\n\nURL\nYour website URL followed by \/api\/adyen\/webhook?siteId=YOUR_SITE_ID.\n\n\nMethod\nJSON\n\n\nEncryption protocol\nTLSv1.3\n\n\n\n\n\nUnder Security, configure the following:\n\n\n\nSetting\nDescription\n\n\n\n\nBasic authentication\nEnter your server's username and password. You need to enter these credentials when setting environment variables later.\n\n\nHMAC Key\nGenerate the HMAC Key, copy it, and store it securely in your system. You need to enter the key when setting environment variables later. Learn more about verifying HMAC signatures.\n\n\n\n\n\nUnder Events settings, select the checkbox for the OFFER_CLOSED event code.\n\n\nIf the Additional settings section is available, optionally select the additional information you want to receive in this webhook. Some webhook types do not support more than one event code, so this section does not appear.\n\n\nSelect Save configuration.\n\n\nThe package implements the AUTHORISATION webhook by default. If you want to receive webhooks for more payment events, you can customize your integration after you have successfully deployed your application in MRT and completed testing without any customizations.\n\nYou cannot test Adyen webhooks on localhost.\n\nConfigure scheduled jobs in Salesforce\nWebhooks are stored in Salesforce Commerce Cloud as custom object instances to be processed by scheduled jobs.\nAfter the metadata import, a scheduled job with ID Process is added to the Salesforce Business Manager > Administration > Operations > Jobs. This scheduled job has two steps that you can check under Job Steps.\n\nProcess \u2013 Processes the webhook and updates the payment status of the order.\nClean \u2013 Deletes the custom object instance, once it has been processed.\n\nTo optimize the processing of your instances, we recommend that you set the frequency of this scheduled job to 1 minute:\n\nGo to the Schedule and History tab for the Process scheduled job.\nSet Trigger to Recurring Interval.\nIn the Run Time pane, set Amount to 1, and Interval to Minutes.\nStep 9: Deploy your application in Managed Runtime\nSalesforce's Managed Runtime (MRT) provides the infrastructure to deploy, host, and monitor your PWA Kit application.\nManaged Runtime only supports applications created from a PWA Kit template and has a separate admin dashboard. Before you can use MRT and Runtime Admin, Salesforce must enable it for your organization. To enable MRT and Runtime Admin for your organization, reach out to your Salesforce account team.\nWhen building your storefront, keep the constraints of MRT environments in mind.\n1. Create a new project in Managed Runtime\nFollow the steps to create a project in Runtime Admin. Use the following details for your project:\n\n\n\nField\nValue\n\n\n\n\nProject Name\nadyen-salesforce-headless-commerce-pwa\n\n\nProject ID\nProject IDs must match the package name in the package.json file and can not be longer than 20 characters.\n\n\nScopes\nThe list of scopes that are used to fetch baskets and create orders.\n\n\n\n2. Set up the MRT environment\nSet up an environment to separate your production storefront from other storefronts, such as development or testing storefronts. Refer to environments in Salesforce docs to learn more about environments.\n\nFollow the steps to create an environment in Salesforce Docs.\nName: use your Sandbox Org ID to easily identify an environment that belongs to a sandbox, and to create variables correctly for each environment.\nRegion: we recommend to set your MRT region to the same region that your Salesforce sandbox uses.\n\nYour Composable Storefront integration with Adyen can only have one region connected to one MRT organization, one SFCC site, and one Adyen Customer Area account.\n\n\n3. Set the environment variables\n\nIn your MRT environment, navigate to your project by selecting your Organization and Project.\nSelect Environment Variables.\n\nSpecify the values for the following variables:\n\nWhen a variable contains YOUR_SITE_ID, replace it with the same value as your Commerce API site ID.\n\n\n\n\nVariable\nRequired\nDescription\n\n\n\n\nYOUR_SITE_ID_ADYEN_API_KEY\n\nYour Adyen API key.\n\n\nYOUR_SITE_ID_ADYEN_MERCHANT_ACCOUNT\n\nYour Adyen merchant account name.\n\n\nYOUR_SITE_ID_ADYEN_CLIENT_KEY\n\nYour Adyen client key.\n\n\nYOUR_SITE_ID_ADYEN_ENVIRONMENT\n\nUse test. When you are ready to accept live payments, change the value to live.\n\n\nYOUR_SITE_ID_ADYEN_WEBHOOK_USER\n\nThe basic authentication username you entered when you set up webhooks.\n\n\nYOUR_SITE_ID_ADYEN_WEBHOOK_PASSWORD\n\nThe basic authentication password you entered when you set up webhooks.\n\n\nYOUR_SITE_ID_ADYEN_HMAC_KEY\n\nThe HMAC key you generated when you set up webhooks.\n\n\nYOUR_SITE_ID_ADYEN_LIVE_URL_PREFIX\nOnly for Live environment\nYour live URL prefix to process live transactions.\n\n\nYOUR_SITE_ID_ADYEN_APPLE_DOMAIN_ASSOCIATION\n\nIf you want to offer Apple Pay as a payment method in the live environment, set to the domain association file value.\n\n\nYOUR_SITE_ID_SYSTEM_INTEGRATOR_NAME\n\nThe name of your system integrator.\n\n\nCOMMERCE_API_CLIENT_ID\n\nYour MRT Commerce API client ID.\n\n\nCOMMERCE_API_ORG_ID\n\nYour MRT Commerce API Org ID.\n\n\nCOMMERCE_API_SHORT_CODE\n\nYour MRT Commerce API short code.\n\n\nCOMMERCE_API_SITE_ID\n\nYour Salesforce site ID, for example, RefArch.\n\n\nCOMMERCE_API_DEFAULT_SITE\n\nYour default Salesforce site, for example, RefArch.\n\n\nSCAPI_URL\n\nYour Salesforce Commerce API URL. Refer to Salesforce documentation for more information.\n\n\nOCAPI_URL\n\nYour Open Commerce API Url. Refer to Salesforce documentation for more information.\n\n\nENVIRONMENT_ID\n\nYour MRT environment ID.\n\n\nPROJECT_ID\n\nYour project ID, for example, adyen-salesforce-pwa.\n\n\nCOMMERCE_API_CLIENT_ID_PRIVATE\n\nYour Salesforce Commerce API client ID. To get your API credentials, create an API client in Salesforce.\n\n\nCOMMERCE_API_CLIENT_SECRET\n\nYour Commerce API client secret for your Salesforce API client.\n\n\nSFCC_REALM_ID\n\nYour SFCC realm ID.\n\n\nSFCC_INSTANCE_ID\n\nYour SFCC instance ID.\n\n\nSFCC_OAUTH_SCOPES\n\nThe custom Adyen SCAPI scopes, for example, c_order_rw c_notify_rw, and your SFCC oauth scopes, for example, sfcc.orders sfcc.orders.rw. You also need to add this in your Salesforce Account Manager > API Client > OpenID Connect > Allowed Scopes. Refer to Salesforce documentation to learn more about authorization scopes.\n\n\nYOUR_SITE_ID_GIFT_CARD_EXPIRATION_TIME\n\nFor partial payments with gift cards, the expiration time after an order is created, in minutes. The default is 30.\n\n\n\n\nWhen going live, you need to update some variables you have entered with values from your live Customer Area.\n\n\n\n4. Deploy your project to MRT\nTo run your application, you must deploy your application to MRT and to the environment you have set up. You also need a Personal MRT API Key.\n\n\nFollow the steps to generate a Personal MRT API key in Salesforce Docs.\n\n\nIn your Retail React App, save your credentials:\n\n\n\n\n\nPush your build to MRT:\n\n\n\n\n\nFollow the steps to deploy the bundle in Salesforce Docs to the environment you have created.\n\nStep 10 (Optional): Import the Adyen country\/region list\nSalesforce allows you to add your list of countries\/regions for shipping. Optionally, you can use our default list.\nTo use our country\/region list, in your PWA Retail React app, import the Adyen countrylist and export it as SHIPPING_COUNTRY_CODES in the constants.js file:\n\n \nMigrate pages\nIf you already have an SFCC integration with Adyen using Store Front Reference Architecture (SFRA) or SiteGenesis, you need to migrate your store pages. If you do not have an SFCC integration with Adyen already, you can start testing.\nYou can perform Phased Headless Rollouts to migrate your SFRA or SiteGenesis pages in a phased approach.\n\nThe Adyen package uses version 8 of the Retail React App with template extensibility. To filter out links to non-PWA kit pages, you can override the overrides\/app\/routes.jsx file. Salesforce has sample code on GitHub that shows how to override.\n\n\nIf you are migrating the checkout page last, you need to route traffic to your SFRA checkout page from your PWA integration. To learn how to apply routing, refer to Salesforce Docs.\nTesting\nAfter you have installed and configured the package, use our test cards to test payments.\nCheck the status of test payments in your Customer Area > Transactions > Payments.Next steps\n\nrequiredSet up payment methodsSet up the payment methods that you want to offer in your Salesforce Composable Storefront.CustomizeCheck our customization guide to learn how you can modify your integration..\n","type":"page","locale":"pt","boost":16,"hierarchy":{"lvl0":"Home","lvl1":"Plugins","lvl2":"Salesforce Commerce Cloud - B2C Commerce","lvl3":"Composable Storefront package","lvl4":"Set up your Composable Storefront with Adyen"},"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":"https:\/\/docs.adyen.com\/pt\/plugins\/salesforce-commerce-cloud\/composable-storefront","lvl4":"\/pt\/plugins\/salesforce-commerce-cloud\/composable-storefront\/install-and-set-up-the-package"},"levels":5,"category":"Plugins","category_color":"green","tags":["Salesforce Composable Storefront","package"]}]}