How to accept card payments with Stripe Elements

1. 1

   Open your API keys in live mode

   Open dashboard.stripe.com/apikeys and check that you are in live mode, not a sandbox. A test key does not fail: it marks bookings paid with money that does not exist.

2. 2

   Copy the publishable key

   Under Standard keys, copy the Publishable key. It starts with pk_live_.

3. 3

   Copy the secret key

   Copy the Secret key (click Reveal live key if it is hidden). It starts with sk_live_. Keep it private: it can charge cards in your name.

1. 1

   Create an event destination

   Open dashboard.stripe.com/webhooks, still in live mode, and click Create an event destination.

2. 2

   Choose your account and Snapshot

   Select Your account and the Snapshot payload format: TourTask cannot read the Thin events Stripe recommends.

3. 3

   Select the event

   Select payment_intent.succeeded and no other event.

4. 4

   Choose a webhook endpoint

   Click Continue and select Webhook endpoint as the destination type.

5. 5

   Enter the TourTask address

   Click Continue, paste the TourTask address above into Endpoint URL and click Create destination.

6. 6

   Copy the signing secret

   On the destination's page, click Reveal secret and copy the signing secret. It starts with whsec_.

1. 1

   Open the Stripe Elements card

   Go to Configuration → Payment options and click the Stripe Elements card under Online payments → Payment gateways. Not there? Choose Show all gateways under the cards.

2. 2

   Choose the country and currency

   Pick the Country where your Stripe Elements account and its bank account are, and the Currency travellers pay in. Click Add. To change either later, remove Stripe Elements with Remove and add it again.

3. 3

   Fill in your API credentials

   Under Authentication, the card has a field for each:
   API key
   Publishable key
   Webhook secret

   Each field saves when you click out of it.

4. 4

   Activate Stripe Elements

   Click Activate once every field is filled in. The card turns Active, and travellers can pay with Stripe Elements on your booking page. Every payment goes straight into your own Stripe Elements account: TourTask never holds your money.

TourTask has no test mode for Stripe Elements, and Stripe's terms forbid test payments with real cards.

1. 1

   Open the card form

   On your own booking page, book a tour and choose to pay by card: Stripe's card form shows. Close the page without paying.

2. 2

   Cancel the test booking

   Open the booking in TourTask and click Cancel booking.

3. 3

   Check your first payment

   When a traveller pays by card, the booking shows as paid and the payment appears in your Stripe Dashboard.

4. 4

   Check the webhook

   In Stripe, open the destination's Event deliveries tab: payment_intent.succeeded shows as Delivered.

Apple Pay and Google Pay are gateways of their own, set up like Stripe Elements with the same two keys. Each needs its own webhook endpoint at its own address, and that endpoint's signing secret goes in its Webhook secret.