CheckoutHelperのデザイン変更、モバイル環境への対応を行いました

CheckoutHelperのデザインが新しくなり、iOSやAndroid上のブラウザでも視認でき、動作するようになりました。

images

1
https://checkout.webpay.jp/v1

を読み込んでご利用頂いておりましたが

を読み込むことでご利用頂けます。

なお、今回の更新に合わせてデフォルトの言語設定をWebPayのAPIと同様に英語に変更しています。 日本語での表示の場合には、data-lang="ja"を与える必要がございます。

デモ

以下のボタンをクリックすると、新たなCheckoutHelperをお試し頂けます。

上記のデモは以下のコードをHTMLに埋め込むことで実現しています。

1
2
3
<form action="/purchase" method="post">
  <script src="https://checkout.webpay.jp/v2/" class="webpay-button" data-key="test_public_19DdUs78k2lV8PO8ZCaYX3JT" data-partial="true" data-lang="ja"></script>
</form>

モバイル環境への対応

従来、モバイル環境ではレイアウトが最適化されていない、タップによる操作に対応していない等の問題があり PCのみでのご利用を推奨しておりましたが、v2からは

  • iOS7上の最新版のSafari, Chrome
  • Android4.0以降での最新版のChrome, Firefox, デフォルトブラウザ(com.android.browser)

での動作が可能となっております。

iOS7上のSafariでの表示例

images

その他、CheckoutHelperについての詳細はWebPayのドキュメントをご参照ください。