Zod schema for stripe credit card? This doesn't seem correct
Answered
Rhinelander posted this in #help-forum
RhinelanderOP
number: z
.string()
.length(16, "Card number must be 16 digits long")
.regex(/^\d+$/, "Card number must only contain digits"),
exp_month: z
.number()
.int("Expiration month must be an integer")
.min(1, "Expiration month must be between 1 and 12")
.max(12, "Expiration month must be between 1 and 12"),
exp_year: z
.number()
.int("Expiration year must be an integer")
.min(new Date().getFullYear(), "Expiration year must not be in the past"),
cvc: z
.string()
.length(3, "CVC must be 3 digits long")
.regex(/^\d+$/, "CVC must only contain digits"),Answered by B33fb0n3
you put your schema insdie there. so replace your string with "yourSchema" for example. It could look like this:
import { useForm } from "react-hook-form"
import { zodResolver } from "@hookform/resolvers/zod"
import * as z from "zod"
const schema = z.object({
name: z.string(),
age: z.number(),
})
type Schema = z.infer<typeof schema>
const App = () => {
const { register, handleSubmit } = useForm<Schema>({
resolver: zodResolver(schema), // here are you now
})
const onSubmit = (data: Schema) => {
console.log(data)
}
return (
<form onSubmit={handleSubmit(onSubmit)}>
<input {...register("name")} />
<input {...register("age", { valueAsNumber: true })} type="number" />
<input type="submit" />
</form>
)
}9 Replies
if you really want to implement your own solution instead of using the validations from stripe, then test and see if it works correctly
RhinelanderOP
I forgot about validation from stripe. Thank you for reminding me. Quick question that is related.
I am using shadcn form to validate this stuff and I am not sure how to do that.
interface FormData extends Stripe.PaymentMethodCreateParams.Card {
name: CreateCommunitySchema;
}
const form = useForm<FormData>({
resolver: zodResolver("What the fuck do i put here"),
defaultValues: {
name: "",
},
});
...you put your schema insdie there. so replace your string with "yourSchema" for example. It could look like this:
import { useForm } from "react-hook-form"
import { zodResolver } from "@hookform/resolvers/zod"
import * as z from "zod"
const schema = z.object({
name: z.string(),
age: z.number(),
})
type Schema = z.infer<typeof schema>
const App = () => {
const { register, handleSubmit } = useForm<Schema>({
resolver: zodResolver(schema), // here are you now
})
const onSubmit = (data: Schema) => {
console.log(data)
}
return (
<form onSubmit={handleSubmit(onSubmit)}>
<input {...register("name")} />
<input {...register("age", { valueAsNumber: true })} type="number" />
<input type="submit" />
</form>
)
}Answer
Keep in mind, that you can easily let stripe do all this stuff:
https://docs.stripe.com/payments/payment-element
https://docs.stripe.com/payments/payment-element
RhinelanderOP
Thanks