omise

Omiseで複数の購入ボタンの設置方法

前回の記事

Omise決算額変更

前回は複数の購入ボタンが設置できない為一つのボタンに任意の設定を行うという
実に強引でほんとにこれしか無いの?
という対処法でした

ちゃんとあった

ドキュメントには見当たりませんでしたが
https://github.com/omise/examples/tree/master/omise.js
こちらのexample-4ボタンを通貨毎に用意するというサンプルにありました

手順

準備

商品分のボタンを用意
<form name="checkoutForm" method="post" action="checkout">
  <button type="submit" id="checkout-1">1000ポイント 1000円</button>
  <button type="submit" id="checkout-2">2000ポイント 2000円</button>
  <button type="submit" id="checkout-3">3000ポイント 3000円</button>
</form>

<script type="text/javascript" src='https://cdn2.omise.co/omise.js.gz'></script>

<script type="text/javascript">
    // Set default parameters
    // 共通部分の設定
    OmiseCard.configure({
        key: 'パブリックキー',   //  ここ サンプルコードではpublickeyとなっているので注意
        image: 'https://p4match.com/images/logo.png',
        frameLabel: 'P4MATCH',
        submitLabel: '支払い金額',
        locale: 'ja',
        currency: 'jpy'
    });

    // Configuring your own custom button
    // 各ボタン用の設定
    OmiseCard.configureButton('#checkout-1', {
        frameLabel: '1000ポイントチャージ',
        buttonLabel: '1000ポイント(1000円)',
        amount: 1000,
        });
    });

    OmiseCard.configureButton('#checkout-1', {
        frameLabel: '2000ポイントチャージ',
        buttonLabel: '2000ポイント(2000円)',
        amount: 2000,
        });
    });

    OmiseCard.configureButton('#checkout-1', {
        frameLabel: '3000ポイントチャージ',
        buttonLabel: '3000ポイント(3000円)',
        amount: 3000,
        });
    });

    // Then, attach all of the config and initiate it by 'OmiseCard.attach();' method
    // 設定確定
    OmiseCard.attach();
</script>

以上で複数の商品を並べることが出来ました。

感想

うん、こうだよね。
そんなに特殊なことでも難しいことでもないはずだよね。
という感じです。

問題はOmiseCardクラスのドキュメントが探せないことなんです。
多分これからもサンプルをくまなく探せば問題なく解決できるともうのですが
Omiseさん、もう少しドキュメントお願いします!

追記 サンプルに罠がありハマったところ

パブリックキーを設定する箇所が普通に'publickey'となっていたのでまさか間違いだとは思わず。
別のドキュメント箇所での設定が'key'とあったため気づき修正。

OmiseCard.configure({
    key: 'パブリックキー',   //  ここ サンプルコードではpublickeyとなっているので注意
    image: 'https://p4match.com/images/logo.png',
    frameLabel: 'P4MATCH',
    submitLabel: '支払い金額',
    locale: 'ja',
    currency: 'jpy'
});