Customize the Hosted Payment Page

Customize Customer Service Center to modify the behavior of your system's business logic to render the hosted payment page.

Only existing customers can access some of the links on this page. Visit Salesforce Commerce Cloud GitHub Repositories and Access for information about how to get access to the Commerce Cloud repositories.

  1. Add your cartridge containing the code to be hosted.

    • Use custom client logic to render the hosted payment page.
    • Configure hosted payment pages. Use the hook with either dw.csc.hosted_payment_pages.{payment_method_id} or dw.csc.hosted_payment_pages.{payment_processor_id} For example, see this sample cartridge

  2. Configure the hosted payment page with either dw.csc.hosted_payment_pages.{payment_method_id} or dw.csc.hosted_payment_pages.{payment_processor_id}.

  3. Select site > Merchant Tools > Ordering > Payment Processors.

  4. Select site > Merchant Tools > Ordering > Payment Methods.

    1. On the Payment Method's page, select Yes to enable the payment method.

    2. In the Payments Method's detail section, select the payment processor from the Payment Processor dropdown. For example, Adyen.

  5. Click Apply.

  6. To test the hosted payment page, click the test card number link. For example, Adyen Test Card Number.

  7. To enable the hosted payment page endpoint in your cartridge: add the {"name": "dw.csc.hosted_payment_pages.Adyen", "script": "./hpp/adyen.ds"}

    • The hook extension ".Adyen" tells Customer Service Center that it's a hosted payment page's payment method. Add with the ID as a normal payment method in Business Manager.
    • The script file specifies the controller and start node. For example, hooks.json.

  8. The controller function in Customer Service Center makes a call to prepare the hosted payment page with the needed properties and redirects to a template in the cartridge. The template contains the form that sends the prepared data to the hosted payment page.

    For example, CSCAdyenHostedPaymentPage.js.

  9. From the hosted payment page, the payment success redirect is configured to the Confirm node in the controller when the payment is successful. Similarly, you can configure other controller endpoints for more hosted payment pages to Customer Service Center interactions.

    Salesforce Commerce Cloud Adyen Cartridge Examples