{"title":"Customization guide","category":"default","creationDate":1678958820,"content":"<p>We recommend to start customizing only after you have <a href=\"\/pt\/plugins\/salesforce-commerce-cloud\/composable-storefront\/install-and-set-up-the-package#deploy-to-mrt\">successfully deployed your app to Managed Runtime<\/a>, and have <a href=\"\/pt\/plugins\/salesforce-commerce-cloud\/composable-storefront\/install-and-set-up-the-package#test-your-integration\">tested your integration<\/a>.<\/p>\n<p>You can customize your integration by overriding default functions of the Adyen npm package. There are different customizations that you can apply:<\/p>\n<ul>\n<li><a href=\"#front-end-customizations\">Front-end customizations<\/a>: customize the checkout experience for your shoppers.<\/li>\n<li><a href=\"#back-end-customizations\">Back-end customizations<\/a>: customize the default functions the integration can execute, or customize your webhook implementation.<\/li>\n<\/ul>\n<p>We recommend you to create modularized customizations, and to document the customizations you apply to the integration. You must not modify the Adyen npm package code. This makes it easier to <a href=\"\/pt\/plugins\/salesforce-commerce-cloud\/composable-storefront\/upgrade\">upgrade<\/a> when there is a new version or <a href=\"\/pt\/plugins\/salesforce-commerce-cloud\/composable-storefront\/troubleshooting\">troubleshoot<\/a> if you face any issues.<\/p>\n<h2 id=\"front-end-customizations\">Front end customizations<\/h2>\n<p>There are different customizations you can apply to the front end to create unique shopping experiences. You need to pass your customizations to the <code>AdyenCheckoutProvider<\/code>.<\/p>\n<p>Below is a list of most commonly applied customizations.<\/p>\n<ul>\n<li><strong>Customize the checkout appearance<\/strong>:\n<ul>\n<li>Customize the checkout configuration: Use a custom styled checkout instead of the default Adyen checkout. See <a href=\"\/pt\/online-payments\/build-your-integration\/sessions-flow\/?platform=Web&amp;integration=Drop-in&amp;version=5.63.0#custom-styling\">Custom styling<\/a> to learn more.<\/li>\n<li>Customize the appearance of configuration elements: Adjust the configuration for payment methods, like the payment button color for a specific payment method. You need to use the <code>paymentMethodsConfiguration<\/code> object to modify the default appearance of a payment method at checkout.<\/li>\n<li>Add translations: Apply UI localizations in your checkout, for example, add translations for the payment button to display in the language of the shopper. See <a href=\"\/pt\/online-payments\/build-your-integration\/sessions-flow\/?platform=Web&amp;integration=Drop-in&amp;version=5.63.0#localization\">Localization<\/a> to learn more.<br \/>\n<a href=\"https:\/\/github.com\/Adyen\/adyen-salesforce-headless-commerce-pwa\/blob\/main\/packages\/adyen-retail-react-app\/overrides\/app\/pages\/checkout\/index.jsx#L89\" target=\"_blank\" rel=\"nofollow noopener noreferrer\" class=\"external-link no-image\">See our example integration on GitHub<\/a> to learn how to apply the customizations listed above in your app.<\/li>\n<\/ul><\/li>\n<li><strong>Customize the shopping experience with additional callbacks<\/strong>: Use the <a href=\"\/pt\/online-payments\/build-your-integration\/sessions-flow\/?platform=Web&amp;integration=Drop-in&amp;version=5.63.0#drop-in-configuration\">Drop-in configuration events<\/a> <code>beforeSubmit<\/code> and <code>onSubmit<\/code> to modify the default checkout flow. See an example of using additional callbacks <a href=\"https:\/\/github.com\/Adyen\/adyen-salesforce-headless-commerce-pwa\/blob\/develop\/packages\/adyen-retail-react-app\/overrides\/app\/pages\/checkout\/partials\/payment.jsx#L125\" target=\"_blank\" rel=\"nofollow noopener noreferrer\" class=\"external-link no-image\">in our example integration on GitHub<\/a>.<\/li>\n<li><strong>Add additional payment method styling<\/strong>: Use a custom CSS file and import it after the following line in the <code>overrides\/app\/routes.jsx<\/code> file.\n<pre><code class=\"language-js\">import '@adyen\/adyen-salesforce-pwa\/dist\/app\/adyen.css'<\/code><\/pre><\/li>\n<\/ul>\n<h2 id=\"back-end-customizations\">Back-end customizations<\/h2>\n<p>To add additional back-end functions, you can modify the default Adyen controllers or add new controllers. For example, by adding pre-authorization risk check controllers.<\/p>\n<p>You can add custom controllers after Adyen controllers as a list of overrides in the <code>ovverrides\/app\/ssr.js<\/code> file. You must set an array so that controllers with custom features are called first when the API calls are triggered, for example:<\/p>\n<pre><code class=\"language-js\">const overrides = {\n   payments: [PrePaymentsController, PaymentsController, PostPaymentsController, SuccessHandler, ErrorHandler],\n}\nregisterAdyenEndpoints(app, runtime, overrides)<\/code><\/pre>\n<h2 id=\"webhook-controller-customizations\">Webhook controller customizations<\/h2>\n<p>After you have <a href=\"\/pt\/plugins\/salesforce-commerce-cloud\/composable-storefront\/install-and-set-up-the-package#set-up-webhooks\">set up webhooks<\/a>, the  <a href=\"https:\/\/docs.adyen.com\/api-explorer\/Webhooks\/1\/post\/AUTHORISATION\" class=\"codeLabel  external-link no-image\" target=\"_blank\" rel=\"nofollow noopener noreferrer\">AUTHORISATION<\/a> webhook is enabled by default. If you want to receive webhooks for <a href=\"\/pt\/development-resources\/webhooks\/webhook-types#event-codes\">more payment events<\/a> and implement additional order processing flows, extend your webhook implementation.<\/p>\n<p>To extend your webhook implementation:<\/p>\n<ol>\n<li>Create a new webhook controller.<br \/>\nFor an example controller, see the <a href=\"https:\/\/github.com\/Adyen\/adyen-salesforce-headless-commerce-pwa\/blob\/c32b81aedb296896b718cede348740455a3405d0\/packages\/adyen-salesforce-pwa\/lib\/api\/controllers\/authorization-webhook-handler.js\" target=\"_blank\" rel=\"nofollow noopener noreferrer\" class=\"external-link no-image\">AUTHORISATION webhook handler<\/a> in the package.<\/li>\n<li>\n<p><a href=\"\/pt\/plugins\/salesforce-commerce-cloud\/composable-storefront\/install-and-set-up-the-package#install-the-adyen-package-in-your-local-pwa-app\">In your <code>overrides\/app\/ssr.js<\/code> file<\/a>, add the new controller to the list of overrides to extend the default webhook handling.<br \/>\nFor example, if you create a new controller and name it <code>customNotificationHandler<\/code>, add the webhook to the overrides list, like below:<\/p>\n<pre><code class=\"language-js\">import {registerAdyenEndpoints, authenticate, validateHmac, parseNotification} from '@adyen\/adyen-salesforce-pwa\/dist\/ssr\/index.js'\n\/\/ import your custom notification handler\nimport { customNotificationHandler } from \".\/your-custom-notification-handler\"\n\nconst overrides = {\n  webhook: [\n     authenticate,\n     validateHmac,\n     parseNotification,\n     customNotificationHandler\n  ]\n}\n\/\/ pass overrides object with with your custom webhook handler to registerAdyenEndpoints\nregisterAdyenEndpoints(app, runtime, overrides)<\/code><\/pre>\n<\/li>\n<\/ol>\n<p>After you have extended your webhook implementation, use the <a href=\"https:\/\/developer.salesforce.com\/docs\/commerce\/commerce-api\/references\/orders?meta=Summary\" target=\"_blank\" rel=\"nofollow noopener noreferrer\" class=\"external-link no-image\">B2C Commerce - Orders API<\/a> to update the order status, payment status, and export status for your PWA store. See how this is done <a href=\"https:\/\/github.com\/Adyen\/adyen-salesforce-headless-commerce-pwa\/blob\/c32b81aedb296896b718cede348740455a3405d0\/packages\/adyen-salesforce-pwa\/lib\/api\/controllers\/authorization-webhook-handler.js#L30\" target=\"_blank\" rel=\"nofollow noopener noreferrer\" class=\"external-link no-image\">in the example PWA integration with the Adyen package on GitHub for the AUTHORISATION webhook handler<\/a>.<\/p>\n<p>The package does not have a pre-built integration with our <a href=\"\/pt\/plugins\/salesforce-order-management-system\">Salesforce Order Management System (OMS) package<\/a>. To enable compatibility, you need to implement custom webhook handling that syncs orders with the <a href=\"\/pt\/plugins\/salesforce-order-management-system\/order-status-lifecycle\/\">ready for export status<\/a> to OMS.<\/p>","url":"https:\/\/docs.adyen.com\/pt\/plugins\/salesforce-commerce-cloud\/composable-storefront\/customization-guide","articleFields":{"description":"Customize your composable storefront integration.","feedback_component":true,"filters_component":false,"last_edit_on":"11-09-2024 16:49","page_id":"dff88025-9484-45f4-903c-f92d9b2e2aea","decision_tree":"[]"},"algolia":{"url":"https:\/\/docs.adyen.com\/pt\/plugins\/salesforce-commerce-cloud\/composable-storefront\/customization-guide","title":"Customization guide","content":"We recommend to start customizing only after you have successfully deployed your app to Managed Runtime, and have tested your integration.\nYou can customize your integration by overriding default functions of the Adyen npm package. There are different customizations that you can apply:\n\nFront-end customizations: customize the checkout experience for your shoppers.\nBack-end customizations: customize the default functions the integration can execute, or customize your webhook implementation.\n\nWe recommend you to create modularized customizations, and to document the customizations you apply to the integration. You must not modify the Adyen npm package code. This makes it easier to upgrade when there is a new version or troubleshoot if you face any issues.\nFront end customizations\nThere are different customizations you can apply to the front end to create unique shopping experiences. You need to pass your customizations to the AdyenCheckoutProvider.\nBelow is a list of most commonly applied customizations.\n\nCustomize the checkout appearance:\n\nCustomize the checkout configuration: Use a custom styled checkout instead of the default Adyen checkout. See Custom styling to learn more.\nCustomize the appearance of configuration elements: Adjust the configuration for payment methods, like the payment button color for a specific payment method. You need to use the paymentMethodsConfiguration object to modify the default appearance of a payment method at checkout.\nAdd translations: Apply UI localizations in your checkout, for example, add translations for the payment button to display in the language of the shopper. See Localization to learn more.\nSee our example integration on GitHub to learn how to apply the customizations listed above in your app.\n\nCustomize the shopping experience with additional callbacks: Use the Drop-in configuration events beforeSubmit and onSubmit to modify the default checkout flow. See an example of using additional callbacks in our example integration on GitHub.\nAdd additional payment method styling: Use a custom CSS file and import it after the following line in the overrides\/app\/routes.jsx file.\nimport '@adyen\/adyen-salesforce-pwa\/dist\/app\/adyen.css'\n\nBack-end customizations\nTo add additional back-end functions, you can modify the default Adyen controllers or add new controllers. For example, by adding pre-authorization risk check controllers.\nYou can add custom controllers after Adyen controllers as a list of overrides in the ovverrides\/app\/ssr.js file. You must set an array so that controllers with custom features are called first when the API calls are triggered, for example:\nconst overrides = {\n   payments: [PrePaymentsController, PaymentsController, PostPaymentsController, SuccessHandler, ErrorHandler],\n}\nregisterAdyenEndpoints(app, runtime, overrides)\nWebhook controller customizations\nAfter you have set up webhooks, the  AUTHORISATION webhook is enabled by default. If you want to receive webhooks for more payment events and implement additional order processing flows, extend your webhook implementation.\nTo extend your webhook implementation:\n\nCreate a new webhook controller.\nFor an example controller, see the AUTHORISATION webhook handler in the package.\n\nIn your overrides\/app\/ssr.js file, add the new controller to the list of overrides to extend the default webhook handling.\nFor example, if you create a new controller and name it customNotificationHandler, add the webhook to the overrides list, like below:\nimport {registerAdyenEndpoints, authenticate, validateHmac, parseNotification} from '@adyen\/adyen-salesforce-pwa\/dist\/ssr\/index.js'\n\/\/ import your custom notification handler\nimport { customNotificationHandler } from \".\/your-custom-notification-handler\"\n\nconst overrides = {\n  webhook: [\n     authenticate,\n     validateHmac,\n     parseNotification,\n     customNotificationHandler\n  ]\n}\n\/\/ pass overrides object with with your custom webhook handler to registerAdyenEndpoints\nregisterAdyenEndpoints(app, runtime, overrides)\n\n\nAfter you have extended your webhook implementation, use the B2C Commerce - Orders API to update the order status, payment status, and export status for your PWA store. See how this is done in the example PWA integration with the Adyen package on GitHub for the AUTHORISATION webhook handler.\nThe package does not have a pre-built integration with our Salesforce Order Management System (OMS) package. To enable compatibility, you need to implement custom webhook handling that syncs orders with the ready for export status to OMS.","type":"page","locale":"pt","boost":16,"hierarchy":{"lvl0":"Home","lvl1":"Plugins","lvl2":"Salesforce Commerce Cloud - B2C Commerce","lvl3":"Composable Storefront package","lvl4":"Customization guide"},"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\/customization-guide"},"levels":5,"category":"Plugins","category_color":"green","tags":["Customization","guide"]}}