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.
- 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.