You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Copy file name to clipboardExpand all lines: src/content/docs/turnstile/tutorials/protecting-your-payment-form-from-attackers-bots-using-turnstile.mdx
+7-7Lines changed: 7 additions & 7 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -41,7 +41,7 @@ Now that your Turnstile widget it ready to use, you can create your Worker appli
41
41
42
42
<Renderfile="c3-definition"product="workers" />
43
43
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.
45
45
46
46
Open your command line interface (CLI) and run the following command:
47
47
@@ -176,7 +176,7 @@ To connect your web application to both Stripe and Turnstile, you must register
176
176
177
177
You can obtain test site keys and secret keys for Turnstile from the [Turnstile documentation](/turnstile/reference/testing/).
178
178
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).
180
180
181
181
Then, place each key into the `.dev.vars` file like the following:
182
182
@@ -243,7 +243,7 @@ export default app;
243
243
Add JavaScript code to our application to implement bot detection using Turnstile.
244
244
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.
245
245
246
-
```diff
246
+
```diff lang="ts"
247
247
import { Hono } from "hono";
248
248
+import { env } from "hono/adapter";
249
249
+import { html } from "hono/html";
@@ -322,7 +322,7 @@ pnpm add stripe
322
322
323
323
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:
324
324
325
-
```diff
325
+
```diff lang="ts"
326
326
import { Hono } from "hono";
327
327
import { env } from "hono/adapter";
328
328
import { html } from "hono/html";
@@ -352,7 +352,7 @@ app.get("/", async (c) => {
352
352
353
353
Then, add the following code to display the payment form. Edit `src/index.tsx`:
@@ -521,7 +521,7 @@ Then, add the process to call the created API.
521
521
522
522
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:
@@ -575,6 +575,6 @@ If you want more strict control, you could add a process to invalidate the Strip
575
575
576
576
## Conclusion
577
577
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.
579
579
580
580
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