Stripeでは、サービスの料金表を簡単に埋め込めるウィジェット機能「Pricing Table (料金表)」があります。
React（TypeScript）プロジェクトで導入する際の注意点
料金表ウィジェットは、Web Componentを利用して実装されています。
しかしWeb ComponentをTSX内で利用する場合、TypeScriptでは以下のエラーが発生します。
そのため、<stripe-pricing-table>タグを型として認識させる必要があります。
stripe-pricing-tableの型定義サンプル
TypeScriptで利用できるようにするには、JSXのIntrinsicElementsを拡張させましょう。
types/pricing-table.d.tsファイルを作成して、以下のコードを追加します。
declare namespace JSX {
interface IntrinsicElements {
'stripe-pricing-table': {
'pricing-table-id': string;
'publishable-key': string;
'client-reference-id'?: string;
'customer-email'?: string;
};
}
}
* 2022/09/26時点の情報です。機能アップデートでパラメータが増減することがあります
その後、tsconfig.jsonで作成した型定義ファイルを読ませましょう。
"include": [
"next-env.d.ts",
+ "./types/pricing-table.d.ts",
"**/*.ts",
"**/*.tsx"
],
これで型エラーが発生しなくなります。
機能アップデートに追従する方法
新しい属性がサポートされた場合、types/pricing-table.d.tsファイルを更新しましょう。
例として、custom-cta-button-name属性を追加してみます。
declare namespace JSX {
interface IntrinsicElements {
'stripe-pricing-table': {
'pricing-table-id': string;
'publishable-key': string;
'client-reference-id'?: string;
'customer-email'?: string;
+ 'custom-cta-button-name'?: string;
};
}
}
もし必須の値にしたい場合は、?を除いて'custom-cta-button-name': string;にしましょう。
これで<stripe-pricing-table custom-cta-button-name='Subscribe'/>のように利用できます。
Next.jsで利用する場合のTips
next/scriptでJSファイルをロードする
Next.jsには、外部JSファイルをロードするための機能(next/script)が用意されています。
Pricing TableのJSコードをnext/scriptから読ませることで、コードを１箇所にまとめることができます。
import Script from "next/script"
import { FC } from "react"
export const NextStripePricingTable:FC<{
pricingTableId?: string;
publishableKey?: string;
clientReferenceId?: string;
customerEmail?: string;
}> = ({ pricingTableId, publishableKey, clientReferenceId, customerEmail}) => {
if (!pricingTableId || !publishableKey) return null;
return (
<>
<Script
async
strategy='lazyOnload'
src='https://js.stripe.com/v3/pricing-table.js'
/>
<stripe-pricing-table
pricing-table-id={pricingTableId}
publishable-key={publishableKey}
client-reference-id={clientReferenceId}
customer-email={customerEmail}
/>
</>
)
}
[PR] Stripe開発者向け情報をQiitaにて配信中！
- [Stripe Updates]：開発者向けStripeアップデート紹介・解説
- ユースケース別のStripe製品や実装サンプルの紹介
- Stripeと外部サービス・OSSとの連携方法やTipsの紹介
- 初心者向けのチュートリアル(予定)
など、Stripeを利用してオンラインビジネスを始める方法について週に２〜３本ペースで更新中です。