reactで決済システムのpayjpを使えるようにしたい。

実現したいこと

reactで決済システムのpayjpを使えるようにしたいです。

前提

reactとrailsでアプリを開発中で、決済システムを導入したいと思い、プログラミングスクールで学んだpayjpを導入しようと思い、ガイドに書かれているhttps://pay.jp/docs/payjs-guidance コードをコピペしてみたのですが、undefined payjpというエラーが出て、そこから進めない状態です。

試しに同じアプリ内のindex.htmlに書いてみると、エラーが出ずに、formが表示され、トークンの取得まで動きました。
しかし、コンポーネント内で、formの入力をしたいです。

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

payjp is not defined

該当のソースコード

react
1import React} from 'react'
2
3export default function ChargeForm(props) {
4return (
5<div>
6<script src="https://js.pay.jp/v2/pay.js"></script>
7<div id="v2-demo" class="payjs-outer"></div>
8<button onclick="onSubmit(event)">トークン作成</button>
9<span id="token"></span>
10<script>
11// 公開鍵を登録し、起点となるオブジェクトを取得します
12var payjp = Payjp('pk_test_'pk_test_****************'')
13
14// elementsを取得します。ページ内に複数フォーム用意する場合は複数取得ください
15var elements = payjp.elements()
16
17// element(入力フォームの単位)を生成します
18var cardElement = elements.create('card')
19
20// elementをDOM上に配置します
21cardElement.mount('#v2-demo')
22
23// ボタンが押されたらtokenを生成する関数を用意します
24function onSubmit(event) {
25  payjp.createToken(cardElement).then(function(r) {
26    document.querySelector('#token').innerText = r.error ? r.error.message : r.id
27  })
28}
29</script>
30</div>
31	)
32}