Last updated

Hosted Forms

Streamline checkout flows by embedding payment method selection directly into your website while leveraging secure, hosted forms.

Key advantages:

  • Design your own payment method selector UI/UX.
  • Sensitive customer data remains entirely with Computop's system significantly reducing your PCI-DSS compliance responsibilties and associated costs.
  • Automatic validation and error management.
  • Adjust the layout, colors and branding elements to align with your website's appearance for Cards and Direct debit.

Payment Flow

Forms Hosted by Computop

Applicable payment methods: Cards and SEPA Direct Debit

Computop hosted forms sequence diagram

  1. Customer proceeds to checkout on your online store.
  2. Your frontend requests the payment page to your server.
  3. Your server makes a Create payment call with paymentMethods.integrationType=HOSTED to Computop Paygate.
  4. Computop Paygate responds with HTTP 202 response code and a redirect URL to your server.
  5. Your server orchestrates the browser to redirect the UI to the redirect URL.
  6. Customer is redirected to payment form hosted by Computop Paygate.
  7. Customer enters the details and completes payment.
  8. Upon completion, customer is redirected to the return URL (urls.return) that was submitted by you during Create payment call. The return URL is suffixed with payId in the query parameters.
  9. The browser triggers an HTTP GET request to the return URL on your server, including the payId in the query string. Your server uses this payId to identify the payment session and proceed with retrieving the payment result.
  10. Your server makes a Retrieve payment details by Payment ID call to retrieve the responseCode of the payment.
  11. Computop Paygate responds with the responseCode of the payment along with other parameters.
  12. Your server returns a success or a failure page based on the responseCode of the payment.

Forms Hosted by APM (Alternate Payment Method Providers)

APM hosted forms sequence diagram

  1. Customer selects a payment method and proceeds to checkout on your online store.
  2. Your frontend requests the payment page to your server.
  3. Your server makes a Create payment call with paymentMethods.integrationType=HOSTED to Computop Paygate.
  4. Computop Paygate makes a payment request to the APM provider.
  5. APM provider responds with redirect URL.
  6. Computop Paygate responds with HTTP 202 response code and a redirect URL to your server.
  7. Your server orchestrates the browser to redirect the UI to the redirect URL.
  8. Customer is redirected to payment form hosted by APM provider.
  9. Customer enters the details and completes payment.
  10. APM provider redirects the customer to Computop Paygate's callback URL that was submitted in step 4.
  11. Browser triggers an HTTP GET request to the callback URL.
  12. Computop Paygate communicates with APM provider to confirm the responseCode of the payment.
  13. Upon completion, customer is redirected to the return URL (urls.return) that was submitted by you during Create payment call. The return URL is suffixed with payId in the query parameters.
  14. The browser triggers an HTTP GET request to the return URL on your server, including the payId in the query string. Your server uses this payId to identify the payment session and proceed with retrieving the payment result.
  15. Your server makes a Retrieve payment details by Payment ID call with payId to retrieve the responseCode of the payment.
  16. Computop Paygate responds with the responseCode of the payment along with other parameters.
  17. Your server returns a success or a failure page based on the responseCode of the payment.

Supported Payment Methods

Refer to Payment methods overview for the list of supported payment methods on Hosted Forms.