Webflow sync, pageviews & more.
NEW

Can a third party payment gateway, such as "Tap Pay," be integrated into Webflow for an ecommerce site that does not support any of the available payment methods provided by Webflow? If so, how can this integration be achieved?

TL;DR
  • Disable Webflow’s native checkout and create a custom checkout form to collect order and payment data.
  • Use a backend service (e.g., Xano, Firebase) to securely process the data and call Tap Pay’s API for payment.
  • Handle responses via webhooks to confirm payment, trigger emails, and redirect users; optionally embed Tap Pay’s UI with custom code.

Webflow does not natively support third-party payment gateways like Tap Pay, but you can still integrate them by bypassing Webflow’s native Ecommerce checkout and using custom methods.

1. Understand Webflow’s Limitations

  • Webflow only supports Stripe, PayPal, and Apple Pay (via Stripe) for Ecommerce.
  • There is no native support for custom payment gateways like Tap Pay.
  • To use Tap Pay, you must disable Webflow’s checkout and replace it with a custom form + custom payment logic.

2. Use a Third-Party Backend to Handle Payments

  • You’ll need a backend service (e.g., Zapier, Make (Integromat), Xano, Firebase, etc.) to process the form data and trigger Tap Pay’s API.
  • Gather Tap Pay’s API documentation and secure a server-side function or cloud function to interact with their system.

3. Build a Custom Checkout Form in Webflow

  • Design and publish a custom checkout form in Webflow with fields like name, email, order details, and payment amount.
  • Add a form action that connects to your backend or API endpoint that handles the Tap Pay request.
  • Use hidden input fields for secure metadata like product ID or price if needed.

4. Securely Send Payment Request to Tap Pay

  • On form submission, send the data to a custom server function (e.g., via Webhook or API).
  • In that function, call Tap Pay’s payment API using the proper credentials and payload structure.
  • Use secure handling (e.g., HTTPS, server-side logic) to prevent exposing credentials or sensitive logic client-side.

5. Handle Post-Payment Actions

  • After a successful payment, Tap Pay will return a response or callback (webhook).
  • Use this response to:
  • Send a confirmation email to the customer.
  • Redirect the user to a success page using URL parameters or a JavaScript redirect.
  • Update your CMS or inventory if needed via Webflow CMS API or Webhooks.

6. Optional: Use Embed Code for Tap Pay UI

  • If Tap Pay provides a hosted payment widget, tokenized form, or embed code, you can add it to your Webflow site via the Embed element.
  • Make sure you set loading="lazy" or use the correct JavaScript initialization based on Tap Pay’s docs.

Summary

To use Tap Pay in Webflow, you must replace Webflow’s checkout with a custom form and backend flow that sends payment details to Tap Pay’s API. This requires a server-side integration or a backend platform, and optionally embedding Tap Pay’s payment UI into your site.

Rate this answer

Other Webflow Questions