Nuxt.js & TypeScript で payjp.js を使う

まえがき

前提として、Nuxt.js 側ではカード情報のトークン化だけ行い、取得したトークンをバックエンドに投げます。
なので、カード情報のトークン化にのみ特化した PAY.JP 公式のライブラリ payjp.js を使います。

payjp.js の読み込み

payjp.jsライブラリは、 https://js.pay.jp にホストされているので、このドメインを読み込んで使います。

とあるので、

<script type="text/javascript" src="https://js.pay.jp/">

を記述する必要があります。
しかし、Nuxt.js には index.html みたいなファイルは用意されていないので、 nuxt.config.js に記述します。

nuxt.config.js

module.exports = {
  head: {
    script: [
      { src: 'https://js.pay.jp/' }
    ]
  }
}

payjp.js を使うページが限られている場合は下手にこれを読み込んでも無駄になってしまうので、ローカルな設定 でも良いかもしれないですね。

参考：外部リソース - Nuxt.js

Payjp を使うと出るエラーと闘う

payjp.js のドキュメントに従って、pages の vue ファイルから

before

Payjp.setPublicKey("pk_test_0383a1b8f91e8a6e3ea0e2a9"); // これとか

Payjp.createToken(card, function(status, response) {...}); // これとか

をやっていきたい！

しかし、このままだと Cannot find name 'Payjp'. とエラーが出ます。それはそう。
Payjp は読み込まれてグローバル変数になっているので、 window.Payjp として丁寧に呼び出してみましょう。

after

window.Payjp.setPublicKey("pk_test_0383a1b8f91e8a6e3ea0e2a9"); // こんな

window.Payjp.createToken(card, function(status, response) {...}); // かんじで！

すると次は Property 'Payjp' does not exist on type 'Window'. とエラーが出ました。
window の型にはもともと Payjp は無いので怒られてます。window の型を拡張していきましょう。
アプリケーション全体の型定義の書かれた index.d.ts がプロジェクトのディレクトリ直下にあるかと思います（無ければ作る）。そこに以下を記述します。

index.d.ts

declare global {
  interface Window {
    Payjp: any;
  }
}

参考：TypeScript の型定義ファイルと仲良くなろう - Hatena Developer Blog

これでさっきの window.Pay で呼び出した payjp.js はエラー無く動くようになりました ✌️