stripeのサンプルコードをTypeScript化しようとしているのですが、なぜかストリングリテラルが当たる場所でちゃんと文字列を渡しているのにエラーを起こします。
エラー内容 - options
の箇所で出てきます。
Optional Elements configuration options. Once the stripe prop has been set, these options cannot be changed.
Type '{ clientSecret: string; appearance: { theme: string; }; }' is not assignable to type 'StripeElementsOptions'.
The types of 'appearance.theme' are incompatible between these types.
Type 'string' is not assignable to type '"stripe" | "night" | "flat" | "none" | undefined'.ts(2322)
react-stripe.d.ts(445, 5): The expected type comes from property 'options' which is declared here on type 'IntrinsicAttributes & ElementsProps & { children?: ReactNode; }'
コード
import React, { useState, useEffect } from "react";
import { loadStripe } from "@stripe/stripe-js";
import { Elements } from "@stripe/react-stripe-js";
import CheckoutForm from "./CheckOutForm";
import "./App.css";
// Make sure to call loadStripe outside of a component’s render to avoid
// recreating the Stripe object on every render.
// loadStripe is initialized with a fake API key.
// Sign in to see examples pre-filled with your key.
const stripePromise = loadStripe('pk_test_46zswMCbz39W2KAqKj43vDRu')
export default function App() {
const [clientSecret, setClientSecret] = useState("");
useEffect(() => {
// Create PaymentIntent as soon as the page loads
fetch("/create-payment-intent", {
method: "POST",
headers: { "Content-Type": "application/json" },
body: JSON.stringify({ items: [{ id: "xl-tshirt" }] }),
})
.then((res) => res.json())
.then((data) => setClientSecret(data.clientSecret));
}, []);
const appearance = {
theme: "stripe",
};
const options = {
clientSecret,
appearance,
};
return (
<div className="App">
{clientSecret && (
<Elements stripe={stripePromise} options={options}>
<CheckoutForm />
</Elements>
)}
</div>
)
}
追記
型注釈とは下記のように明示的に型を指定してあげるという事でしょうか?
type Options = {
clientSecret: string;
appearance: {
theme: 'stripe' | 'night' | 'flat' | 'none';
}
}
// 一部抜粋...
const appearance = {
theme: 'stripe',
};
const options : Options = {
clientSecret,
appearance,
};
return (
<div className="App">
{clientSecret && (
<Elements stripe={stripePromise} options={options}>
<CheckoutForm />
</Elements>
)}
</div>
)
追記2
こういう事ですね!
import React, { useState, useEffect } from "react";
import { loadStripe, StripeElementsOptions, Appearance } from "@stripe/stripe-js";
import { Elements} from "@stripe/react-stripe-js";
import CheckoutForm from "./CheckOutForm";
import "./App.css";
// Make sure to call loadStripe outside of a component’s render to avoid
// recreating the Stripe object on every render.
// loadStripe is initialized with a fake API key.
// Sign in to see examples pre-filled with your key.
const stripePromise = loadStripe('pk_test_46zswMCbz39W2KAqKj43vDRu')
export default function App() {
const [clientSecret, setClientSecret] = useState("");
useEffect(() => {
// Create PaymentIntent as soon as the page loads
fetch("/create-payment-intent", {
method: "POST",
headers: { "Content-Type": "application/json" },
body: JSON.stringify({ items: [{ id: "xl-tshirt" }] }),
})
.then((res) => res.json())
.then((data) => setClientSecret(data.clientSecret));
}, []);
const appearance: Appearance = {
theme: 'stripe',
};
const options : StripeElementsOptions = {
clientSecret,
appearance,
};
return (
<div className="App">
{clientSecret && (
<Elements stripe={stripePromise} options={options}>
<CheckoutForm />
</Elements>
)}
</div>
)
}