Customize the Hosted Payment Page

You can customize Customer Service Center (CSC) to modify the behavior of your system's business logic to render the hosted payment page.

  1. Add your cartridge containing the code to be hosted. See Upload Cartridges.
    • 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}. For example, see sample cartridge.
  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 this is a hosted payment page's payment method. You add this 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 is redirected to a template in the cartridge. The template contains the form that sends the prepared data to the hosted payment page.
  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 additional hosted payment pages to Customer Service Center interactions.
    Salesforce Commerce Cloud Adyen Cartridge Examples