Punch-out payment overview

You can integrate HCL Commerce with a payment service provider through punch-out payment. With punch-out payment, the shopper enters payment information through a third-party payment form. The payment form can be integrated into the HCL Commerce store through iFrame, pop-up window, or redirect. In this model, HCL Commerce never receives or saves any sensitive data such as credit card information.

Checkout flow for an integration with punch-out payment through a pop-up windows.

Punch out payment flow
  1. Shopper submits the order and the store calls POST cart/@self/checkout to process the order.
  2. The API calls the approve_payment extension code with the financial transaction.
  3. The extension code returns the financial transaction with its state set to 1 (pending).
  4. The store redirects the shopper to the Order confirmation page.
  5. Shopper clicks the Pay button, which triggers a new pop-up window to the store’s PunchoutPaymentRedirectView.
  6. PunchoutPaymentRedirectView calls GET cart/@self/payment_instruction/punchoutPaymentInfo, which calls the get_punchout_url extension code to get the URL of the third-party payment form.
  7. The extension code returns the payment form URL.
  8. PunchoutPaymentRedirectView redirects the shopper to the payment form.
  9. Shopper enters the payment information on the payment form and submits.
  10. After the payment information is processed by the third party, the store calls POST cart/@self/payment_instruction/callback, with the payment processing result as JSON key-value pairs.
  11. The API calls the process_punchout_response extension code to process the callback parameters.
  12. The extension code returns the result of the financial transaction and updates to the payment instruction.
  13. The API updates the financial transaction and payment instruction accordingly in the database.
  14. The store redirects the shopper to PunchoutPaymentCallBackView.