Payment form protection

Arcjet can help you protect your payment form from fraudulent credit card transactions. The goal is to block high risk transactions before they are submitted to your credit card processor to save you money on chargeback fees.

Credit card processors are able to use other signals to detect fraud once they have the full transaction details, so we recommend using this as a first defense to block the most obvious fraud attempts.

Pre-checkout protection

A common approach for handling payments is to generate a unique payment or checkout link e.g. Stripe Checkout. This avoids having to collect credit card details on your own servers.

In this example, Arcjet will analyze the user request before checkout. If the request is high risk, the user will be blocked. If the request is considered safe, you can then proceed to generate the payment link and redirect the user to the payment processor.

Rules

These are the Arcjet rules we recommend using to protect the checkout link. It is configured to block all bots and automated clients, to validate the email address (including blocking free and disposable emails), and to limit the number of requests from the same IP address.

If you expect customers to use emails from free providers like Gmail, Hotmail, etc then you may wish to remove FREE from the block list.

1
// ... imports, etc
2
// See https://docs.arcjet.com/get-started
3
const aj = arcjet({
4
  key: process.env.ARCJET_KEY!, // Get your site key from https://app.arcjet.com
5
  characteristics: ["ip.src"], // Track requests by IP
6
  rules: [
7
    // Shield protects your app from common attacks e.g. SQL injection
8
    shield({ mode: "LIVE" }),
9
    // Create a bot detection rule
10
    detectBot({
11
      mode: "LIVE", // Blocks requests. Use "DRY_RUN" to log only
12
      // Block all bots. See https://arcjet.com/bot-list
13
      allow: [],
14
    }),
15
    validateEmail({
16
      mode: "LIVE",
17
      // Strict email validation to block disposable, invalid, free, and domains
18
      // with no valid MX records. Free emails include Gmail, Hotmail, Yahoo,
19
      // etc, so you may wish to remove this rule
20
      block: ["DISPOSABLE", "INVALID", "NO_MX_RECORDS", "FREE"],
21
    }),
22
    // It would be unusual for a form to be submitted more than 5 times in 10
23
    // minutes from the same IP address
24
    slidingWindow({
25
      mode: "LIVE",
26
      interval: "10m", // counts requests over a 10 minute sliding window
27
      max: 5, // allows 5 submissions within the window
28
    }),
29
  ],
30
});

Additional checks

If the base rules pass then you can use IP geolocation and VPN & proxy detection checks to further validate the transaction.

This example only allows users from the US and UK, and blocks users from hosting providers, VPNs, and proxies.

1
// Follows on from the rules set above.
2
// This would go inside your request handler
3
const decision = await aj.protect(request, { email });
4

5
// Evaluate the various Arcjet checks
6
if (decision.isDenied()) {
7
  if (decision.reason.isBot()) {
8
    console.error("Bot detected", decision);
9
    // Return 403
10
  } else if (decision.reason.isRateLimit()) {
11
    console.error("Rate limit exceeded", decision);
12
    // Return 429 or 403
13
  } else if (decision.reason.isEmail()) {
14
    console.error("Invalid email", decision);
15
    // Return 400
16
  } else {
17
    console.error("Request denied", decision);
18
    // Return 403
19
  }
20
}
21

22
// Base Arcjet rules all passed, but we can do further inspection based on
23
// our knowledge of our customers
24

25
// Check if the IP address is from a hosting provider
26
if (decision.ip.hasASN() && decision.ip.asnType === "hosting") {
27
  // The network this IP belongs to is a hosting provider, which makes it
28
  // more likely to be a VPN, proxy, or other suspicious network.
29
  console.error("Hosting provider detected", decision);
30
  // Return 403
31
}
32

33
if (
34
  decision.ip.isHosting() ||
35
  decision.ip.isVpn() ||
36
  decision.ip.isProxy() ||
37
  decision.ip.isRelay()
38
) {
39
  // The IP is from a hosting provider, VPN, or proxy. We can check the name
40
  // of the service and customize the response
41
  if (decision.ip.hasService()) {
42
    if (decision.ip.service !== "Apple Private Relay") {
43
      // We trust Apple Private Relay because it requires an active iCloud
44
      // subscription, so deny all other VPNs
45
      console.error("VPN detected", decision);
46
      // Return 403
47
    } else {
48
      // Apple Private Relay is allowed
49
      console.info("Apple Private Relay detected", decision);
50
    }
51
  } else {
52
    // The service name is not available, but we still think it's a VPN
53
    console.error("VPN detected", decision);
54
    // Return 403
55
  }
56
}
57

58
// Only allow users from the US and UK
59
if (decision.ip.hasCountry() && !["US", "UK"].includes(decision.ip.country)) {
60
  console.error("Country not allowed", decision);
61
  // Return 403
62
}
63

64
console.info("Arcjet checks passed", decision.id);

Next.js example

This example shows a form component which implements the above rules. It uses the Next.js app router and shadcn/ui.

1
# Install shadcn components from https://ui.shadcn.com/docs/installation/next
2
npx shadcn@latest add button card input label toast use-toast

This will install the following components:

1
  - components/ui/button.tsx
2
  - components/ui/card.tsx
3
  - components/ui/input.tsx
4
  - components/ui/label.tsx
5
  - components/ui/toast.tsx
6
  - components/ui/toaster.tsx
7
  - hooks/use-toast.ts

The payment form component is shown below. If the form passes the Arcjet checks, it will redirect the user to the link for the payment processor.

1
"use client";
2

3
import { Button } from "@/components/ui/button";
4
import {
5
  Card,
6
  CardContent,
7
  CardDescription,
8
  CardHeader,
9
  CardTitle,
10
} from "@/components/ui/card";
11
import { Input } from "@/components/ui/input";
12
import { Label } from "@/components/ui/label";
13
import { Toaster } from "@/components/ui/toaster";
14
import { useToast } from "@/hooks/use-toast";
15
import { useRouter } from "next/navigation";
16
import { useState } from "react";
17

18
export default function PaymentForm() {
19
  const [amount, setAmount] = useState("10.00");
20
  const [email, setEmail] = useState("user@example.com");
21
  const [isLoading, setIsLoading] = useState(false);
22
  const router = useRouter();
23
  const { toast } = useToast();
24

25
  async function onSubmit(event: React.FormEvent) {
26
    event.preventDefault();
27
    setIsLoading(true);
28

29
    const response = await fetch("/api/process-payment", {
30
      method: "POST",
31
      headers: {
32
        "Content-Type": "application/json",
33
      },
34
      body: JSON.stringify({ email, amount }),
35
    });
36

37
    setIsLoading(false);
38

39
    const responseData = await response.json();
40

41
    if (response.ok) {
42
      // Redirect to an external URL
43
      window.location.href = responseData.paymentLink;
44
      // Or if you are self-hosting the payment form, redirect to path
45
      //router.push(responseData.paymentLink);
46
    } else {
47
      toast({
48
        title: "Payment Failed",
49
        description:
50
          "There was an error processing your payment: " + responseData.message,
51
        variant: "destructive",
52
      });
53
    }
54
  }
55

56
  return (
57
    <>
58
      <Card className="w-full max-w-md mx-auto">
59
        <CardHeader>
60
          <CardTitle>Purchase Form</CardTitle>
61
          <CardDescription>Enter your details below</CardDescription>
62
        </CardHeader>
63
        <CardContent>
64
          <form onSubmit={onSubmit} className="space-y-4">
65
            <div className="space-y-2">
66
              <Label htmlFor="email">Email</Label>
67
              <Input
68
                id="email"
69
                type="email"
70
                value={email}
71
                onChange={(e) => setEmail(e.target.value)}
72
                required
73
              />
74
            </div>
75
            <div className="space-y-2">
76
              <Label htmlFor="amount">Amount</Label>
77
              <Input
78
                id="amount"
79
                value={amount}
80
                onChange={(e) => setAmount(e.target.value)}
81
                required
82
              />
83
            </div>
84
            <Button type="submit" className="w-full" disabled={isLoading}>
85
              {isLoading ? "Processing..." : "Pay Now"}
86
            </Button>
87
          </form>
88
        </CardContent>
89
      </Card>
90
      <Toaster />
91
    </>
92
  );
93
}

The form submission is processed by the following API route:

1
import arcjet, {
2
  detectBot,
3
  shield,
4
  slidingWindow,
5
  validateEmail,
6
} from "@arcjet/next";
7
import { NextResponse } from "next/server";
8

9
const aj = arcjet({
10
  key: process.env.ARCJET_KEY!, // Get your site key from https://app.arcjet.com
11
  characteristics: ["ip.src"], // Track requests by IP
12
  rules: [
13
    // Shield protects your app from common attacks e.g. SQL injection
14
    shield({ mode: "LIVE" }),
15
    // Create a bot detection rule
16
    detectBot({
17
      mode: "LIVE", // Blocks requests. Use "DRY_RUN" to log only
18
      // Block all bots. See https://arcjet.com/bot-list
19
      allow: [],
20
    }),
21
    validateEmail({
22
      mode: "LIVE",
23
      // Strict email validation to block disposable, invalid, free, and domains
24
      // with no valid MX records. Free emails include GMail, Hotmail, Yahoo,
25
      // etc, so you may wish to remove this rule
26
      block: ["DISPOSABLE", "INVALID", "NO_MX_RECORDS", "FREE"],
27
    }),
28
    // It would be unusual for a form to be submitted more than 5 times in 10
29
    // minutes from the same IP address
30
    slidingWindow({
31
      mode: "LIVE",
32
      interval: "10m", // counts requests over a 10 minute sliding window
33
      max: 5, // allows 5 submissions within the window
34
    }),
35
  ],
36
});
37

38
export async function POST(request: Request) {
39
  try {
40
    const body = await request.json();
41
    const { email, amount } = body;
42

43
    const decision = await aj.protect(request, { email });
44

45
    // Evaluate the various Arcjet checks
46
    if (decision.isDenied()) {
47
      if (decision.reason.isBot()) {
48
        console.error("Bot detected", decision);
49
        return NextResponse.json(
50
          { success: false, message: "Forbidden" },
51
          { status: 403 },
52
        );
53
      } else if (decision.reason.isRateLimit()) {
54
        console.error("Rate limit exceeded", decision);
55
        return NextResponse.json(
56
          { success: false, message: "Please try again in a few minutes" },
57
          { status: 429 },
58
        );
59
      } else if (decision.reason.isEmail()) {
60
        console.error("Invalid email", decision);
61
        return NextResponse.json(
62
          { success: false, message: "Invalid email address" },
63
          { status: 400 },
64
        );
65
      } else {
66
        console.error("Request denied", decision);
67
        return NextResponse.json(
68
          { success: false, message: "Forbidden" },
69
          { status: 403 },
70
        );
71
      }
72
    }
73

74
    // Base Arcjet rules all passed, but we can do further inspection based on
75
    // our knowledge of our customers
76

77
    // Check if the IP address is from a hosting provider
78
    if (decision.ip.hasASN() && decision.ip.asnType === "hosting") {
79
      // The network this IP belongs to is a hosting provider, which makes it
80
      // more likely to be a VPN, proxy, or other suspicious network.
81
      console.error("Hosting provider detected", decision);
82
      return NextResponse.json(
83
        { success: false, message: "Forbidden" },
84
        { status: 403 },
85
      );
86
    }
87

88
    if (
89
      decision.ip.isHosting() ||
90
      decision.ip.isVpn() ||
91
      decision.ip.isProxy() ||
92
      decision.ip.isRelay()
93
    ) {
94
      // The IP is from a hosting provider, VPN, or proxy. We can check the name
95
      // of the service and customize the response
96
      if (decision.ip.hasService()) {
97
        if (decision.ip.service !== "Apple Private Relay") {
98
          // We trust Apple Private Relay because it requires an active iCloud
99
          // subscription, so deny all other VPNs
100
          console.error("VPN detected", decision);
101
          return NextResponse.json(
102
            { success: false, message: "Forbidden" },
103
            { status: 403 },
104
          );
105
        } else {
106
          // Apple Private Relay is allowed
107
          console.info("Apple Private Relay detected", decision);
108
        }
109
      } else {
110
        // The service name is not available, but we still think it's a VPN
111
        console.error("VPN detected", decision);
112
        return NextResponse.json(
113
          { success: false, message: "Forbidden" },
114
          { status: 403 },
115
        );
116
      }
117
    }
118

119
    // Only allow users from the US and UK
120
    if (
121
      decision.ip.hasCountry() &&
122
      !["US", "UK"].includes(decision.ip.country)
123
    ) {
124
      console.error("Country not allowed", decision);
125
      return NextResponse.json(
126
        { success: false, message: "Forbidden" },
127
        { status: 403 },
128
      );
129
    }
130

131
    console.info("Arcjet checks passed", decision.id);
132

133
    // This is where you would generate the checkout link. Return it to the form
134
    // component to redirect the user to the payment page. See
135
    // https://docs.stripe.com/checkout/quickstart?lang=node&client=next for an
136
    // example with Stripe Checkout
137

138
    return NextResponse.json({
139
      success: true,
140
      paymentLink: "https://www.example.com",
141
    });
142
  } catch (error) {
143
    console.error("Payment processing error:", error);
144
    return NextResponse.json(
145
      { success: false, message: "Internal server error" },
146
      { status: 500 },
147
    );
148
  }
149
}