Railsで単発決済システム(Pay.jp)を実装

Pay.jpを使用した決済システムの実装方法です。

# Goals

以下のようなアプリを作成します。
金額を入力して「カードを支払う」をクリックすると、支払いのウィンドウが表示されます。
クレジットカード情報を入力し「カードを支払う」をクリックすると支払いが完了します。

![FireShot Capture 127 - SamplePayjp - http___localhost_3000_.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/288694/cd0f7148-2488-f2c8-de46-cd9695d88f59.png)


# PAY.JPの会員登録

[PAY.JP公式ページ](https://pay.jp/)より会員登録をします。

ログインすると以下の画面が表示されます。

![FireShot Capture 122 - PAY.JP - 決済手数料2.59% クレジットカード決済代行サービス - https___pay.jp_d_.jpeg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/288694/395e14ad-04dd-e740-e239-1c4235ada6b1.jpeg)

左の「API」を選択するとAPIキーの情報が表示されます。
今回はテストアプリなので<font color=red>テスト秘密鍵</font>と<font color=red>テスト公開鍵</font>を使用します。

![FireShot Capture 123 - PAY.JP - 決済手数料2.59% クレジットカード決済代行サービス - https___pay.jp_d_settings.jpeg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/288694/8b3e7d8f-d438-ebac-7707-83374283dcce.jpeg)

# サンプルアプリの作成

Railsのプロジェクトを作成したら、Gemfileを開き以下をグローバルに追記します。

```
gem 'payjp'
```

インストールします。

```
bundle install
```

# 環境変数の設定

## ローカル環境
環境変数の設定には`dotenv-rails`というを使用します。

`dotenv-rails`のインストールは、`Gemfile`のグローバルへ`gem 'dot-env'`を記載して`bundle install`を実行してください。

使用方法は、プロジェクト直下に.envファイルを作成し、以下のように編集しましょう。
***<font color=red>注：.envがリモートリポジトリへアップされないようにgit.ignorへ追加しましょう<font>***

```ruby
PAYJP_PUBLIC_KEY='テスト公開鍵'
PAYJP_SECRET_KEY='テスト秘密鍵'
```

これでローカル環境での環境変数の設定は完了です。

## ViewとControllerの作成

以下を実行してControllerとViewを作成します。

```
rails g controller products index pay
```

## View

### `app/views/products/index.html.erb`

「カードで支払う」ボタンを設置します。
このボタンをクリックするだけで、支払い用のモーダルウィンドウが表示されます。

```html
<%= form_with local: true, url: products_pay_path do |form| %>
  金額：<%= form.text_field :amount %>
  <script
    type="text/javascript"
    src="https://checkout.pay.jp"
    class="payjp-button"
    data-key="<%= ENV["PAYJP_PUBLIC_KEY"] %>">
  </script>
<% end %>
```

![FireShot Capture 126 - SamplePayjp - http___localhost_3000_.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/288694/bbcce31f-b1d3-29b8-f1da-a3fb6ce604d3.png) ![FireShot Capture 124 - SamplePayjp - http___localhost_3000_.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/288694/985b82ad-aee4-c144-3157-b7422dace350.png)

### `app/views/products/pay.html.erb`

支払い完了の旨を表示します。

```html
支払いが完了しました

<br>
<%= link_to 'Topへ', root_path %>
```


# Controller

payメソッドを編集します。

```ruby
def pay
  Payjp.api_key = ENV["PAYJP_SECRET_KEY"]
  Payjp::Charge.create(
    :amount => params[:amount],
    :card => params['payjp-token'],
    :currency => 'jpy'
  )
end
```

# 動作確認

金額(50〜)を入力し、「カードで支払う」をクリックします。

支払い情報ウィンドウにクレジットカード情報を入力し「カードで支払う」をクリックします。
- カード：[テストカード](https://pay.jp/docs/testcard)に記載の番号
- 有効期限：未来の年月
- CVC番号：３桁の適当な数字
- 名前：任意の名前

![FireShot Capture 128 - SamplePayjp - http___localhost_3000_.jpeg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/288694/7bf4d8bd-e061-1a0f-91c4-187d5ffb2d87.jpeg)

「支払いが完了しました」の画面が表示されれば成功です。

[Webのダッシュボード](https://pay.jp/d/)で売り上げデータが更新されていることが確認できます。

![FireShot Capture 129 - PAY.JP - 決済手数料2.59% クレジットカード決済代行サービス - https___pay.jp_d_.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/288694/919e7dc2-ea58-2aae-0aba-cbce53dd21c8.png)


# 最後に

返金は「[売上一覧](https://pay.jp/d/charges)」->「課金ID」->「売上返金」から。

本番運用する際は、ほかにもいろいろ考慮する点がありますが、最低限の実装であれば、ものすごく簡単ですね。

参考
- [Pay.jp](https://pay.jp/)
- [PAY.JP API 利用ガイドPAY.JP API 利用ガイド](https://pay.jp/docs/started)