回答編集履歴
1
onLoadについてのコードを追記しました。
test
CHANGED
|
@@ -21,3 +21,45 @@
|
|
|
21
21
|
|
|
22
22
|
[Components: <Script> | Next.js](https://nextjs.org/docs/pages/api-reference/components/script#onload)
|
|
23
23
|
|
|
24
|
+
### 追記です。
|
|
25
|
+
|
|
26
|
+
コメントありがとうございます。
|
|
27
|
+
|
|
28
|
+
> ただ、グローバル変数の中身が空なのか、サンプルのスクリプトは動きませんでした。
|
|
29
|
+
|
|
30
|
+
onLoadとか、onReadyとか、
|
|
31
|
+
スクリプトの読み込みが終わったことが保証されたタイミングで
|
|
32
|
+
処理しないといけないのかなと思っています。
|
|
33
|
+
|
|
34
|
+
> onLoad
|
|
35
|
+
> 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.
|
|
36
|
+
> (機械翻訳)サードパーティ製のスクリプトの中には、コンテンツのインスタンス化や関数の呼び出しのために、スクリプトの読み込みが完了した後に、ユーザーがJavaScriptコードを一度実行することを求めるものがあります。ロード戦略としてafterInteractiveかlazyOnloadのどちらかを使ってスクリプトをロードしている場合、onLoadプロパティを使えばロード後にコードを実行することができます。
|
|
37
|
+
> https://nextjs.org/docs/pages/api-reference/components/script#onload
|
|
38
|
+
|
|
39
|
+
該当のソースコードのように
|
|
40
|
+
_app.tsxでスクリプトを読み込んで、
|
|
41
|
+
Order.tsxで変数を使うという方法はちょっとわからないのですが、
|
|
42
|
+
(propsなどで渡していく感じになるのでしょうか？)
|
|
43
|
+
Order.tsxでスクリプトを読み込んで、
|
|
44
|
+
`Paidy.configure`メソッドを呼び出すところまでは確認できました。
|
|
45
|
+
|
|
46
|
+
```ts
|
|
47
|
+
<Script
|
|
48
|
+
src="https://apps.paidy.com/"
|
|
49
|
+
onLoad={() => {
|
|
50
|
+
var config = {
|
|
51
|
+
"api_key": "pk_0000_000000000000000",
|
|
52
|
+
"logo_url": "http://www.paidy.com/images/logo.png",
|
|
53
|
+
"closed": function (callbackData: any) {
|
|
54
|
+
/*
|
|
55
|
+
Data returned in the callback:
|
|
56
|
+
*/
|
|
57
|
+
}
|
|
58
|
+
};
|
|
59
|
+
const paidyHandler = Paidy.configure(config);
|
|
60
|
+
console.log(JSON.stringify(paidyHandler))
|
|
61
|
+
// [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}
|
|
62
|
+
}}
|
|
63
|
+
/>
|
|
64
|
+
```
|
|
65
|
+
|