Help us understand the problem. What is going on with this article?

Reactで外部Scriptを動的に読み込む

More than 5 years have passed since last update.

外部scriptを画面遷移するたびに読み込みたい・・・

Webpayが提供しているCheckoutHelperを使うと、数行コピペするだけでCredit決済に必要なクライアント側の機能が実装できます。
参考 : http://engineering.webpay.co.jp/2014/08/26/checkout-helper-usage/
外部Scriptを読み込むことでwebpay仕様のボタン&入力フォームを表示する方式なのですが、renderの中にそのまま書いてもscriptがloadされないので表示されませんでした。

scriptタグをrenderの中に書いてもボタンが表示されてくれない・・・

render() {
  return (
    <div className="payment jumbotron center-block">
      <h1>Payment</h1>
      <form action="/purchase" method="post">
      <script src="https://checkout.webpay.jp/v2/" className="webpay-button" data-key="test_public_bMj6ai5NZbYSbNraz51jkf7j" data-lang="ja"></script>
      </form>
    </div>
  );
}

appendChildでscriptタグを挿入

一応componentDidMountでappendChild、componentWillUnmountでremoveChildすれば表示されるようになりました。
ただ、Reactを通さないDOM操作をするとReactのstate変化で再描画するときに消えてしまったりするのでベストのやり方ではないような・・・。
良い方法あったら教えて下さいm(__)m

import React from 'react';

export default class Payment extends React.Component {

  componentDidMount() {
    var webpayForm = React.findDOMNode(this.refs.webpayForm);
    var script = document.createElement("script");
    script.setAttribute("src","https://checkout.webpay.jp/v2/");
    script.setAttribute("class","webpay-button");
    script.setAttribute("data-key", "test_public_19DdUs78k2lV8PO8ZCaYX3JT");
    script.setAttribute("data-lang", "ja");
    script.setAttribute("data-token-name", "webpayToken");
    script.setAttribute("id", "webpayButton");
    webpayForm.appendChild(script);
  }

  componentWillUnmount() {
    var webpayForm = React.findDOMNode(this.refs.webpayForm);
    webpayForm.removeChild(document.getElementById("webpayButton"));
    //for preventing webpay error
    window.WebPay = void(0);
    window.WebPayCheckoutHelper = void(0);
  }

  render() {
    return (
      <div className="payment jumbotron center-block">
        <h1>Payment</h1>
        <form action="/purchase" method="post" role="form" ref="webpayForm">
        </form>
      </div>
    );
  }
}

CheckoutHelperをSingle page applicationで使うのは辛い・・・

WebpayのCheckoutHelperはSingle page applicationで実装されることを想定されていなくていろいろと辛いです。
再読み込みをすると1度しか読み込みできないというWebpayの仕様にひっかかってしまいます。
こんなエラーがでます。
window.WebPay is already defined. Loading twice?
WebPay CheckoutHelper is already initialized. You cannot place two helpers per page.

componentWillUnmountで以下のようなcodeを入れると回避できるのですが、この対応で問題がないのかあるのかは分かりません。。
window.WebPay = void(0);
window.WebPayCheckoutHelper = void(0);

Single page applicationでwebpay使うときはCheckoutHelper使わない方がいいのかも・・・。

enu-kuro
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
No comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
ユーザーは見つかりませんでした