Stripeの料金表ウィジェットを、Next.jsやTypeScriptプロジェクトで利用する際のTips


Stripeでは、サービスの料金表を簡単に埋め込めるウィジェット機能「Pricing Table (料金表)」があります。

![Pricing table](https://camo.qiitausercontent.com/c19591da000953b98d8d9dcd144eff021cf6e8b6/68747470733a2f2f71696974612d696d6167652d73746f72652e73332e61702d6e6f727468656173742d312e616d617a6f6e6177732e636f6d2f302f323336363330302f32343961623932352d666131632d323138362d373833392d3462633431393763306265632e706e67)

https://qiita.com/hideokamoto/items/d2fe70ead58b6689ff17

## React（TypeScript）プロジェクトで導入する際の注意点

料金表ウィジェットは、Web Componentを利用して実装されています。

しかしWeb ComponentをTSX内で利用する場合、TypeScriptでは以下のエラーが発生します。

![スクリーンショット 2022-09-26 13.42.18.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2366300/684a56bf-db93-2c96-9836-786735988243.png)

そのため、`<stripe-pricing-table>`タグを型として認識させる必要があります。

### `stripe-pricing-table`の型定義サンプル

TypeScriptで利用できるようにするには、`JSX`の`IntrinsicElements`を拡張させましょう。

`types/pricing-table.d.ts`ファイルを作成して、以下のコードを追加します。

```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`で作成した型定義ファイルを読ませましょう。

```diff_typescript
"include": [
  "next-env.d.ts",
+  "./types/pricing-table.d.ts",
  "**/*.ts",
  "**/*.tsx"
],
```

これで型エラーが発生しなくなります。

### 機能アップデートに追従する方法

新しい属性がサポートされた場合、`types/pricing-table.d.ts`ファイルを更新しましょう。

例として、`custom-cta-button-name`属性を追加してみます。

```diff_typescript
  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`から読ませることで、コードを１箇所にまとめることができます。

```tsx
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を利用してオンラインビジネスを始める方法について週に２〜３本ペースで更新中です。

-> [Stripe Organizationsをフォローして最新情報をQiitaで受け取る](https://qiita.com/organizations/stripe)