You are here:
Set Up Apple Pay and Google Pay for PWA Kit Storefronts
To help shoppers complete purchases, add Apple Pay and Google Pay to the Shopper Agent messaging sessions. Payment method support is through Adyen. This feature is for B2C Commerce stores that use the Progressive Web App (PWA) Kit.
Important Apple Pay and Google Pay support with the Shopper Agent is
through Adyen as a payment gateway. This code is only a reference
implementation.
-
Confirm that your PWA store is a trusted site across your org.
- In the Quick Find box, enter and select Sites. Select your site, and in the Trusted Domains for Inline Frames section, add the domain for your storefront.
- In the Quick Find box, enter and select Session Settings. In the Trusted Domains for Inline Frames section, add the domain for your B2C instance, and set the IFrame Type to Surveys.
- In the Quick Find box, enter and select Trusted URLs. Add the domain for your B2C instance, and select all the CSP directives.
- In the Quick Find box, enter and select CORS. Add the domain for your B2C instance.
- In the Quick Find box, enter and select Remote Site Settings. Add the domain for your B2C instance.
- Enable Adyen as your payment processor according to Adyen’s instructions. Complete these tasks in Business Manager in your B2C Commerce instance.
- Go to the SalesforceCommerceCloud/pwa-kit repository, and get the latest version of the PWA kit. To get access to the repository, see Salesforce Commerce GitHub Repositories and Access.
-
To add the Adyen Apple Pay and Google Pay integrations, apply the changes in
the adyenExpressPayments branch of the PWA
kit repository to the release of the PWA kit you're using. Replace the site
domain and PWA URLs with the values for your org.
In the PWA repository, the packages/template-retail-react-app/app/ssr.js file includes CSP overrides. Update your org details.
{ "contentSecurityPolicy": { "useDefaults": true, "directives":{ "img-src": [ "*.commercecloud.salesforce.com", "gstatic.com”, "checkoutshopper-test.adyen.com", // test endpoint as documented here: https://docs.adyen.com/development-resources/live-endpoints/ "[prefix]-checkout-live.adyenpayments.com", // live endpoint as documented here: https://docs.adyen.com/development-resources/live-endpoints/ ], "script-src": [ "storage.googleapis.com", "*.test1.my.pc-rnd.site.com", “pay.google.com” ], "connect-src": [ "api.cquotient.com", "*.c360a.salesforce.com", "*.salesforce-scrt.com", "*.adyen.com", "*.salesforce-scrt.com" ], "frame-src": [ "*.test1.my.pc-rnd.salesforce-scrt.com", "*.test1.my.pc-rnd.site.com", "checkoutshopper-test.adyen.com", “pay.google.com” ], "frame-ancestors": [ "self", // Salesforce Site Domain for your MIAW site "https://<your_site_domain>", //PWA Kit Store URL "https://<your_pwa_kit_store_url>" ] } } } -
Push your changes, and then deploy the corresponding bundle in MRT.
cd packages/template-retail-react-app npm run build npm run push -- --projectSlug <project_ID>
- Generate an API Key to Connect Your Storefront to the Adyen API
Connect your PWA kit storefront to the Adyen API. - Disable Express Payment Methods for PWA Kit Storefronts
To display only the Checkout button in your messaging sessions, disable express payment methods.
Did this article solve your issue?
Let us know so we can improve!
