Ruby on Rails製の自社ECにAmazon paymentsを実装した話（その1）

2016/09/02

今回はRuby on Rails製のオープンソースECパッケージのsolidusを使用している自社ECにAmazon paymentsを導入した際の話をさせてください。

Amazon paymentsとは

Amazonアカウントを使用して、配送先の設定や決済を行える仕組みです。

例えばこの仕組みをECサイトなどに導入すると、配送先やクレジットカードを入力してもらう必要がなく、
お客様に素早く、簡単に、買い物してもらえる。というとても素晴らしいものです。

詳しくはこちら読んだ方がわかりやすいです。
Amazon payments

Solidusとは

SolidusはRuby on Rails製のオープンソースECパッケージです。
前身はSpreeというRailsフレームワークで、Solidusはまだ公開されてから間もないので、Spreeの面影がありまくりです。
困ったことがあったらSolidusでググるよりSpreeでググったほう早いかもです。

solidusio/solidus

なぜ導入したか

ECで買い物する層のユーザーはAmazonアカウントを99%持っているという勝手な妄想で、売り上げの増加する可能性を感じたのと、他に導入してるECをあまり見たことがないので、単純な好奇心から触ってみたいと思ったからです。

あとこの動画に影響もされました。

購入までの流れ

Amazon paymentsを使用した場合の購入フローは以下となります。

商品詳細もしくは、カート画面にて「Amazonアカウントでお支払い」画面をクリック。
Amazonアカウントでのログインダイアログが表示されるのでAmazonで使用しているアカウントの情報を入力。
住所を選択するウィジェットをクレジットカードを選択するウィジェットが表示されるので選択して、確認ページへ。
確認ページで「注文する」ボタンをクリック

これだけで購入が完了します。住所やクレジットカードを入力する必要がないのでとても簡単に購入することができます。

Gemfile

今回は良さそうなGemがあったので、今回はこちらを使ってみました。そのままじゃ使えなかったので、後からところどころ書き直しました。

boomerdigital/solidus_amazon_payments

gem 'solidus_amazon_payments', github: 'boomerdigital/solidus_amazon_payments'

インストール・初期設定

bundle install
bundle exec rails g solidus_amazon_payments:install

インストールすると、管理画面にアマゾンのSetting画面が作成さるので、ご自身のAmazonセラーセントラルのアカウント情報を入力します。
支払い方法追加画面より、Amazonを追加します。プロバイダー：Spree::Gateway::Amazon
自動キャプチャ：いいえ
名称：Amazonアカウントでお支払い
※自動キャプチャは「いいえ」で登録してください。いいえにしないと、このgemだと決済が通らないです。

「Amazonアカウントでお支払い」ボタンの設置

# /views/spree/amazon/_login.html.erb

<script type='text/javascript'>
  window.onAmazonLoginReady = function() {
    amazon.Login.setClientId('<%= SolidusAmazonPayments::Config[:client_id] %>');
  };
</script>
<script type='text/javascript'
  src='https://static-fe.payments-amazon.com/OffAmazonPayments/jp/<%= Spree::Gateway::Amazon.first.preferred_test_mode ? 'sandbox/' : '' %>lpa/js/Widgets.js'>
</script>

<div id="AmazonPayButton"></div>

<script type="text/javascript">
  var authRequest;
  OffAmazonPayments.Button("AmazonPayButton", "<%= SolidusAmazonPayments::Config[:merchant_id] %>", {
    type: "PwA",
    size:  "large",
        authorization: function() {
      loginOptions =
        {scope: "profile postal_code payments:widget payments:shipping_address", popup: "true"};
      authRequest = amazon.Login.authorize (loginOptions, "/amazon_order/address");
    },
    onError: function(error) {
      // your error handling code
    }
  });
</script>

gemからの変更点は一箇所。「Widgets.js」の読み込み先が、us版のものになっているので、これを/jp版に変更しました。

そのあと、ボタンを表示させたい画面にrenderとして埋め込めばボタンが表示されます。

<%= render :partial => 'spree/amazon/login' %>

次回

長くなってしまったので、実際に決済を完了させるところは次回に書きます。
あと、自社ECにAmazon paymentsを導入したい方がいらっしゃいましたらご連絡ください。

メールアドレス：developer@tanaqro.com
電話番号：03-6276-0140

About the Author
Latest Posts

About 上山雄太

Ruby on Rails製の自社ECにAmazon paymentsを実装した話（その1） - 2016-09-02