Skip to content

Commit 1ef2386

Browse files
fix: update turnstile tutorial based on the feedback
1 parent 15124ee commit 1ef2386

File tree

1 file changed

+7
-7
lines changed

1 file changed

+7
-7
lines changed

src/content/docs/turnstile/tutorials/protecting-your-payment-form-from-attackers-bots-using-turnstile.mdx

Lines changed: 7 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -41,7 +41,7 @@ Now that your Turnstile widget it ready to use, you can create your Worker appli
4141

4242
<Render file="c3-definition" product="workers" />
4343

44-
To efficiently create and manage multiple APIs, let's use [`Hono`](https://hono.dev). Hono is an open-source application framework released by a Cloudflare Developer Advocate. It is lightweight and allows for the creation of multiple API paths, as well as efficient request and response handling.
44+
To efficiently create and manage multiple APIs, let's use [`Hono`](https://hono.dev). It is lightweight and allows for the creation of multiple API paths, as well as efficient request and response handling.
4545

4646
Open your command line interface (CLI) and run the following command:
4747

@@ -176,7 +176,7 @@ To connect your web application to both Stripe and Turnstile, you must register
176176

177177
You can obtain test site keys and secret keys for Turnstile from the [Turnstile documentation](/turnstile/reference/testing/).
178178

179-
Get the publishable key and secret key for Stripe from the [Stripe dashboard].(https://dashboard.stripe.com/test/apikeys)
179+
Get the publishable key and secret key for Stripe from the [Stripe dashboard](https://dashboard.stripe.com/test/apikeys).
180180

181181
Then, place each key into the `.dev.vars` file like the following:
182182

@@ -243,7 +243,7 @@ export default app;
243243
Add JavaScript code to our application to implement bot detection using Turnstile.
244244
By adding this implementation, the order form submission process will be disabled until the Turnstile bot detection process is completed and it is confirmed that the access request is not from a bot.
245245

246-
```diff
246+
```diff lang="ts"
247247
import { Hono } from "hono";
248248
+import { env } from "hono/adapter";
249249
+import { html } from "hono/html";
@@ -322,7 +322,7 @@ pnpm add stripe
322322

323323
Next, implement the code to create a payment form in `src/index.tsx`. The following code creates a [Payment Intent](https://docs.stripe.com/api/payment_intents) on the server side:
324324

325-
```diff
325+
```diff lang="ts"
326326
import { Hono } from "hono";
327327
import { env } from "hono/adapter";
328328
import { html } from "hono/html";
@@ -352,7 +352,7 @@ app.get("/", async (c) => {
352352

353353
Then, add the following code to display the payment form. Edit `src/index.tsx`:
354354

355-
```diff
355+
```diff lang="ts"
356356
{html`
357357
+ <script src="https://js.stripe.com/v3/"></script>
358358
<script
@@ -521,7 +521,7 @@ Then, add the process to call the created API.
521521

522522
By executing this before calling Stripe's JavaScript SDK in the form's submit event, we can decide whether to proceed with the payment based on the server-side validation result:
523523

524-
```diff
524+
```diff lang="ts"
525525
paymentForm.addEventListener("submit", async (e) => {
526526
e.preventDefault();
527527
if (!turnstileToken) {
@@ -575,6 +575,6 @@ If you want more strict control, you could add a process to invalidate the Strip
575575

576576
## Conclusion
577577

578-
In online payments, it ss necessary to protect applications from bot attacks such as card testing and DDoS attacks.
578+
In online payments, it is necessary to protect applications from bot attacks such as card testing and DDoS attacks.
579579

580580
While payment services like Stripe are increasingly implementing bot prevention measures, adding Turnstile can provide an extra layer of security for your payment forms.

0 commit comments

Comments
 (0)