How to set up Stripe Elements
Stripe Elements puts the card fields on your own booking page. The traveller types their card, presses pay, and the booking confirms — without ever being sent to another website. It is the same Stripe account and the same money as the ordinary Stripe gateway; only the checkout experience differs.
You need three values from your Stripe Dashboard and one webhook. About half an hour, assuming your Stripe account already exists.
With Stripe Elements the webhook is the only thing that marks a booking paid. Skip step 3 and travellers will be charged and then watch the page wait forever. Set it up before you activate the gateway, not after.
Before you start
You need a Stripe account that is verified and able to take live payments.
Start with steps 1 and 2 of How to accept card payments with Stripe — registering, getting the business verified, and adding your payout bank account. That guide also covers the part worth checking first: travel reservation services and clubs are a restricted business at Stripe, while commercial airlines and cruises, international charter and private airlines, and timeshare services are prohibited outright. Come back here once your account is live.
Stripe requires domain registration for wallets — Apple Pay, Google Pay, Link, Klarna, PayPal, Amazon Pay — but not for typed card fields. If all you want is a card form, there is nothing to register and no approval to wait for.
Step 1 — Check your payment methods in Stripe
Open dashboard.stripe.com/settings/payment_methods. This page is what decides which methods appear in the card form on your booking page — TourTask does not override it. Cards are enabled by default on a new account, so most operators have nothing to change here.
Link is Stripe's own wallet, and the default Payment Element puts a Link prompt in the card form — but only on a domain registered under Payment method domains. Register nothing and Link never appears. If you do register your booking domain for wallets and would rather not offer Link, turn it off under Wallets on this page.
Step 2 — Copy your two keys
Open dashboard.stripe.com/apikeys. The page shows keys for whatever you are currently viewing, so check you are in live mode and not a sandbox.
Under Standard keys you need both of them this time:
- 1
Publishable key
Starts with pk_live_. This one is meant to be public — it goes to the traveller's browser so Stripe can draw the card form. Copy it straight off the page.
- 2
Secret key
Starts with sk_live_. Use Reveal live key if Stripe generated it for you. A key you created yourself is shown once and cannot be recovered — only rotated.
The secret key is the keys to your Stripe account: anyone holding it can charge cards and move money in your name. Never send it by email or chat, and rotate it immediately if it is ever exposed. The publishable key is harmless by design — it is already visible in every traveller's browser.
Stripe recommends handing third parties a restricted key (rk_live_…). Create one with Create restricted key and give it write access to PaymentIntents and to Charges and refunds — write includes read, so there is no need to tick both. Paste it into the same field. If a payment or refund later fails on permissions, the error names the resource to add.
Step 3 — Add the TourTask webhook
Open dashboard.stripe.com/webhooks. On newer accounts this is the Webhooks tab inside Workbench; on older ones it is the standalone Webhooks page. Same address either way.
- 1
Check you are in live mode
Sandboxes and live mode keep separate endpoints and separate signing secrets. An endpoint made in a sandbox never fires for a real payment.
- 2
Start a new destination
Click the primary button on the Webhooks page. Stripe currently labels it Add destination, Create new destination or Create an event destination depending on where you look.
- 3
Choose your own account as the source
Your account, sometimes shown as Events on your account. Not Connected accounts — that is for Stripe Connect platforms and the endpoint would receive nothing.
- 4
Select one event
payment_intent.succeeded, and nothing else. Do not select 'all events'.
- 5
Step 4 — Add Stripe Elements in TourTask
Go to Configuration → Payment options, and under Online payments → Payment gateways open the Stripe Elements card. If it is not listed, switch the filter under the cards from Show local gateways only to Show all gateways.
- 1
Pick your country and currency, then press Add
Country is where your Stripe payouts land — you need a bank account there. Currency is what travellers are charged in.
- 2
Paste the API key
The sk_live_… or rk_live_… value.
- 3
Paste the publishable key
The pk_live_… value.
- 4
Paste the webhook secret
The whsec_… value from the endpoint you created in step 3 — not from any other endpoint.
- 5
Press Activate
The card turns ACTIVE and the card form appears on your booking pages.
Step 5 — Open it by default
This is much of the reason to use Elements rather than the redirect, so do not skip it. On the Stripe Elements card, press Open by default. The card form is then already expanded when the booking page loads, and pinned above your other payment options.
Only a gateway that puts card fields on your own page can be pre-opened — Stripe Elements always, and PayPal where you have switched its in-page card fields on. Wallet buttons and redirect gateways have nothing to type, so the button is simply absent on them.
Drag the gateway cards into the order you want travellers to see. The order on this page is the order on the booking page.
Step 6 — Test it with a real payment
TourTask has no test-mode switch for Stripe. Make a small real booking and refund it.
- 1
Book the cheapest thing you sell
The card fields should be open already if you did step 5.
- 2
Pay with your own card
You should not leave the booking page at any point, except for a 3-D Secure challenge if the bank asks for one.
- 3
Watch the booking, not the page
Stripe's webhook is what marks the booking paid, normally within seconds. Open the booking in TourTask to check — that is the authoritative signal. If the booking never turns paid, the webhook is wrong.
- 4
Check the delivery in Stripe
Open the endpoint in Stripe and look at its deliveries. A green payment_intent.succeeded delivery is the proof that the whole chain works.
- 5
Refund it, then tidy up
Refund the payment through the gateway from the booking, then cancel the test booking once the money is back.
Adding Apple Pay and Google Pay
They are separate gateways in TourTask, using the same three Stripe credentials as Stripe Elements — because underneath they are the same Stripe payment, just presented as a wallet button instead of a card form. Each still needs its own webhook endpoint on payment_intent.succeeded, at its own /v1/payments/apple-pay/notifications/booking or /v1/payments/google-pay/notifications/booking address.
Under Payment method domains in the Stripe Dashboard, register every domain your booking widget loads on — your own site and the TourTask booking host. Register www and each subdomain separately; they do not inherit. If your booking widget is embedded in a page on another domain, register both that page's domain and the widget's. Wallet buttons simply do not appear on an unregistered domain, with no error to tell you why.
What your travellers see
Card fields inline on the booking page, with the total above them. They type, press pay, and stay where they are.
- 3-D Secure appears as an overlay when the bank asks for it, and the payment carries on afterwards without leaving the page. Stripe decides when it is needed; there is nothing to configure.
- Which methods show up is your Stripe Dashboard's decision, not TourTask's — see step 1.
- A surcharge, if you set one, is shown before they pay and is included in the amount charged. TourTask allows 0–10%.
- The short wait after paying is the webhook. The page polls until Stripe's event arrives and then confirms by itself. Nobody needs to refresh.
Stripe's card fields are loaded from Stripe's own domains, so a strict policy on the page hosting your booking widget will block them. Allow js.stripe.com for scripts and frames, api.stripe.com for connections, and hooks.stripe.com in frames for the 3-D Secure step. Most operator websites have no such policy and nothing to do here.
Refunds
Open the booking, find the payment, use its actions menu and choose Refund payment, then Refund via Stripe. Full and partial refunds both work, and the same payment can be refunded repeatedly until the original amount is used up. The money goes back to the card that paid.
A cancelled booking cannot be refunded through the gateway. Refund the payment first, then cancel.
Troubleshooting
- Stripe Elements is not in the gateway list — the list is filtered to your own country. Switch it to show all gateways.
- Activate is greyed out — one of the three fields has no saved value. Click into each and back out.
- The card form does not appear on the booking page — the gateway is not active, or the publishable key is missing or from a sandbox.
- The traveller is charged but the booking never confirms — this is the webhook. Check the endpoint exists in live mode, listens for payment_intent.succeeded, points at the stripe-elements address, and that its own secret is the one in TourTask.
- Stripe's delivery log shows signature failures — the secret in TourTask belongs to a different endpoint. Reveal the secret on this endpoint and paste that one.
- Deliveries show a redirect error — the URL was mistyped, has an extra slash, or was entered as http. Re-enter it exactly as printed in step 3.
- Cards work but Apple Pay or Google Pay never appears — the domain is not registered under Payment method domains, or the traveller's browser has no wallet set up.
- Payments fail with an authentication error — the secret key is wrong or was rotated at Stripe.
- Payments succeed but never appear in your Stripe payouts — you pasted a test key. It authenticates perfectly and takes test-mode payments, so nothing looks broken until the money does not arrive. Replace it with the live key.
- It worked and then stopped — check whether the key was rotated, or whether Stripe emailed you that the endpoint is failing. Stripe retries a failing endpoint for about three days and then gives up on those events.
Questions we get asked
Do card details ever touch TourTask?
No. The fields are drawn by Stripe inside your page and the card goes straight from the traveller's browser to Stripe. TourTask never sees or stores a card number.
Should I use Stripe Elements or the ordinary Stripe gateway?
Elements, in most cases — keeping travellers on your own booking page loses fewer of them than sending them to a payment page and back. The redirect version is a reasonable fallback and you can run both.
Can I use the same webhook endpoint for both Stripe gateways?
No. Each gateway has its own notification address and its own signing secret, and an endpoint only receives the events it subscribed to. Create one endpoint per gateway.
Is there a sandbox I can test in?
No. TourTask has no test-mode switch for Stripe, and a test key does not bounce — Stripe serves live and test mode from the same API, so an sk_test_… would quietly take test-mode payments and mark real bookings paid with money that does not exist. Use live keys only and test with a small real booking that you refund.
Setting up the redirect version too? See How to accept card payments with Stripe. Comparing providers? See every payment gateway TourTask supports, or browse the rest of the documentation.