質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.42%
Next.js

Next.jsは、Reactを用いたサーバサイドレンダリングなどを行う軽量なフレームワークです。Zeit社が開発しており、nextコマンドでプロジェクトを作成することにより、開発環境整備が整った環境が即時に作成できます。

Q&A

解決済

1回答

2053閲覧

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

aquaym

総合スコア13

Next.js

Next.jsは、Reactを用いたサーバサイドレンダリングなどを行う軽量なフレームワークです。Zeit社が開発しており、nextコマンドでプロジェクトを作成することにより、開発環境整備が整った環境が即時に作成できます。

0グッド

0クリップ

投稿2023/05/19 16:14

編集2023/05/19 23:24

実現したいこと

  • 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 }, 2829 }, []); 30 31 return ( 32 <div> 33 {/* ページコンテンツ */} 34 </div> 35 ); 36} 37 38export default MyPage;

試したこと

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

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

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答1

0

ベストアンサー

あまり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
退会済みユーザー

退会済みユーザー

総合スコア0

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

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)); }} />
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.42%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問