Next.js：Scriptタグで埋め込んだ外部ファイル（Paidy）が読み込めない

実現したいこと

Next.jsのサイトでPaidy決済を導入する

前提

初心者です。
Next.js、TypeScriptでPaidy決済機能を作りたいです。
ガイドラインに従ってチェックアウトアプリを導入したいですが、外部スクリプトが読み込めていないです。
ガイドライン：https://paidy.com/docs/jp/paidycheckout.html#int_pay

発生している問題・エラーメッセージ

名前 'Paidy' が見つかりません。ts(2304)

該当のソースコード

_app.tsx

JavaScript
1  return (
2    <>
3      <Head />
4      <Script
5          type="text/javascript"
6          src="https://apps.paidy.com/"
7        />     
8      <ManagedUIContext>
9        <Layout pageProps={pageProps}>
10          <Component {...pageProps} />
11        </Layout>
12      </ManagedUIContext>
13    </>
14  )

Order.tsx

JavaScript
1import { useEffect } from 'react';
2
3function MyPage() {
4  useEffect(() => {
5~略
6var config = {
7  "api_key": "pk_0000_000000000000000",
8  "logo_url": "http://www.paidy.com/images/logo.png",
9  "closed": function(callbackData: any) {
10       /*
11       Data returned in the callback:
12       */     
13  }
14};
15var paidyHandler = Paidy.configure(config); ←エラー
16function paidyPay() {
17  var payload = {
18       "amount": 10000,
19       "currency" : "JPY",
20       "store_name": "Paidy sample store",
21       "buyer": {
22                    "email": "successful.payment@paidy.com",
23                    "name1": "山田　太郎",
24                    "name2": "ヤマダ　タロウ",
25                    "phone" : "08000000001",
26                    "dob": "1990-10-25"
27       },
28～
29  }, []); 
30
31  return (
32    <div>
33      {/* ページコンテンツ */}
34    </div>
35  );
36}
37
38export default MyPage;

試したこと

scriptタグの読み込む場所を色々変える
useEffectの中に入れ、マウント時のみ読み込むようにしましたがエラーになります。。

補足情報（FW/ツールのバージョンなど）

行動規範の内容に同意します

回答1件

ベストアンサー

あまりTypeScriptのお作法とかを理解していないのですが、
回答してみますね。

ts(2304)はTypeScriptのコンパイルのエラーですよね。

Paidyはグローバル変数として読み込まれるのかなと思いましたので、
グローバル変数を宣言してあげればエラーは解消できるかなと思いました。

グローバル変数の宣言 - TypeScript Deep Dive 日本語版
 TypeScript: Documentation - Declaration Reference

declare var Paidy: any;
＊リンク先では「可能な限りインターフェースを使用することをおすすめします。」とのことでしたが、手っ取り早くエラーを解消するとしたらanyかなと思いました・・

スクリプトの読み込みが終わった後じゃないと
Paidy変数は使えないと思いますので、
読み込みのタイミングなども考慮しないといけないかもしれません。

Components: <Script> | Next.js

追記です。

コメントありがとうございます。

ただ、グローバル変数の中身が空なのか、サンプルのスクリプトは動きませんでした。

onLoadとか、onReadyとか、
スクリプトの読み込みが終わったことが保証されたタイミングで
処理しないといけないのかなと思っています。

onLoad
Some third-party scripts require users to run JavaScript code once after the script has finished loading in order to instantiate content or call a function. If you are loading a script with either afterInteractive or lazyOnload as a loading strategy, you can execute code after it has loaded using the onLoad property.
(機械翻訳)サードパーティ製のスクリプトの中には、コンテンツのインスタンス化や関数の呼び出しのために、スクリプトの読み込みが完了した後に、ユーザーがJavaScriptコードを一度実行することを求めるものがあります。ロード戦略としてafterInteractiveかlazyOnloadのどちらかを使ってスクリプトをロードしている場合、onLoadプロパティを使えばロード後にコードを実行することができます。
https://nextjs.org/docs/pages/api-reference/components/script#onload

該当のソースコードのように
_app.tsxでスクリプトを読み込んで、
Order.tsxで変数を使うという方法はちょっとわからないのですが、
(propsなどで渡していく感じになるのでしょうか？)
Order.tsxでスクリプトを読み込んで、
Paidy.configureメソッドを呼び出すところまでは確認できました。

ts
1      <Script
2        src="https://apps.paidy.com/"
3        onLoad={() => {
4          var config = {
5            "api_key": "pk_0000_000000000000000",
6            "logo_url": "http://www.paidy.com/images/logo.png",
7            "closed": function (callbackData: any) {
8              /*
9              Data returned in the callback:
10              */
11            }
12          };
13          const paidyHandler = Paidy.configure(config);
14          console.log(JSON.stringify(paidyHandler))
15          // [Log] {"_id":"LHW2MTMM","config":{"key":"pk_0000_000000000000000","api_host":"https://api.paidy.com","app_host":"https://checkout-v2.paidy.com","logo_url":"http://www.paidy.com/images/logo.png"},"apiKey":"pk_0000_000000000000000","apiHost":"https://api.paidy.com","appHost":"https://checkout-v2.paidy.com","logoURL":"http://www.paidy.com/images/logo.png","paidyFrame":{"_id":"LHW2MTMM","options":{"apiKey":"pk_0000_000000000000000"},"state":"prepare","iframeState":"initialized","queue":[],"iframe":{}},"wait":false}
16        }}
17      />

投稿2023/05/20 02:54

編集2023/05/20 14:23

KEMONO_PANTSU_k

総合スコア334

回答へのコメント

aquaym

2023/05/20 13:56

ありがとうございます！エラーはなくなりました。ディベロッパーツール上にもスクリプトタグは埋め込まれていました。ただ、グローバル変数の中身が空なのか、サンプルのスクリプトは動きませんでした。プログラムの書き方自体に問題があるようです。引き続き調査して解決できたらそれと一緒にベストアンサーにさせていただきます！

aquaym

2023/05/21 13:05

追記ありがとうございます！大変参考になりました。私の場合はonloadを使わずにScriptタグにstrategy="beforeInteractive"を追加していました。 onloadを使って実装してみています。作っていただいたサンプルのソースなのですが、これはOrder.tsxのJSX部分に記述しているのですよね。同じように書いてみたのですがPaidyのところでまた読み込めないエラーになっていまい、解決ができませんでした。。 Next.jsというかJavaScriptの知識が足りていないため、勉強しながら頑張ります。読み込めないという質問の回答として、こちらの追記が適切な回答だと思いますので、ベストアンサーにさせていただきます。本当にありがとうございました。

aquaym

2023/05/21 13:19

以下のコードに修正して、エラーをとることができました！ありがとうございました！ <Script src="https://apps.paidy.com/" strategy="lazyOnload" onLoad={() => { const config = { api_key: "pk_0000_000000000000000", logo_url: "http://www.paidy.com/images/logo.png", closed: function(callbackData: any) { /* コールバックで返されるデータ: */ } }; const paidyHandler = (window as any).Paidy.configure(config); console.log(JSON.stringify(paidyHandler)); }} />

行動規範の内容に同意します