[Rails]Pay.jpを利用したクレジット決済機能実装　①　~実装の準備・APIの導入~

## はじめに
例によって、某プログラミングスクールの最終課題である、フリマアプリのクローンサイト作成において、購入機能実装時にPay.jpを利用したので、健忘録としてここに記す。


## バージョン情報
ruby  '2.5.1'
Rails '5.2.4.2'

## 実装の流れ
1. <font color="DeepPink">実装の準備・APIの導入</font>　←　今回の実装内容
2. [モデルの作成・クレジットカード登録](https://qiita.com/Shunsuke_i_21/items/cd638e6aebba126683f1)
3. [クレジットカード詳細表示・削除](https://qiita.com/Shunsuke_i_21/items/75c13102c5db3246a6c6)
4. [クレジットカード購入(決済)機能](https://qiita.com/Shunsuke_i_21/items/8745c245205fa182f974)

## 前提条件として
* 記載はhaml記法で
 * [私の参考にしたrailsにhamlを導入するやり方はこちら、、](https://qiita.com/MitsuguSueyoshi/items/f1b0b047553fde49bbc1)

## **いよいよ実装！** PAY.JP登録・APIキーの取得
1. こちらのサイトよりPAY.JPのアカウントを取得ください
[PAY.JP](https://pay.jp/)

2. サインアップした時の様子(若干データは入ってますが、、、)
![08176e7c8385ca2abf50e38656bf182b.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/620292/9f7d5205-6b49-3b22-47cb-e0d843cd3ec5.png)

3. サイドバーから「API」を選択、**テスト秘密鍵**、**テスト公開鍵**を確認
![スクリーンショット 2020-04-21 21.29.14.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/620292/6c7432bc-1e44-9c64-3ac6-8422b9e5c428.png)
(後ほど使います、、、、)

## PAY.JPのgemをインストール！
以下のコードを「gemfile」に記載

```ruby:gemfile
gem 'payjp'
```
忘れずに「bundle install」もしよう(再起動もしましょう)。

```:ターミナル
$ bundle install
$ rails s
```

## 環境変数を使ってAPIキーをアプリに登録
いくつか方法(専用のgemを使うなど)があると思うのですが、今回は```credentials.yml.enc```に記載する方法で実装します。

**注) rails 5.2以降では```Encrypted Credentials```という機能が導入され、シークレットキー等の外部に公開されたくない値などは```config/credentials.yml.enc```に記載することになりました**

[参考にした記事はこちら](https://qiita.com/NaokiIshimura/items/2a179f2ab910992c4d39)

###テスト用シークレットキーを```credentials.yml.enc```に記載
```:ターミナルで実行
EDITOR="vi" bin/rails credentials:edit
```

(シークレットキーとは先ほどPAY.JPで確認したAPIキーのうちのsk_で始まる秘密鍵のことです。今回はテスト環境なの「sk_test_○○」から始まる物です。)

```:credentials.yml.enc
payjp:
 PAYJP_SECRET_KEY: sk_test_ご自身の秘密鍵の値
```

##```application.html.haml```にスクリプトを記載

以下のスクリプト

```haml:
 %script{src: "https://js.pay.jp/", type: "text/javascript"}
```
を```application.html.haml```に追記

(例)

```haml:application.html.haml
%html
  %head
    %meta{:content => "text/html; charset=UTF-8", "http-equiv" => "Content-Type"}/
    %title sampleApp
    %script{src: "https://js.pay.jp", type: "text/javascript"}
    = csrf_meta_tags
    ~-----------------------------
```

###<font color="blue">以上で準備OK！！</font>

##最後に
以上で準備完了です！
次回からいよいよ機能の実装に入っていこうと思います。

＞[2. モデルの作成・クレジットカード登録](https://qiita.com/Shunsuke_i_21/items/cd638e6aebba126683f1)

私自身初めての投稿なので、至らない部分などありましたら、ぜひご指摘お願いします！！

##参考リンク
* [公式リファレンス](https://pay.jp/docs/payjs)
* [公式ガイド](https://pay.jp/docs/api/?ruby#payjp-api)
* [【Ruby on Rails で簡単！】PAY.JPを利用したクレジットカード決済の導入](https://qiita.com/mylevel/items/7462ca28260581509d19)
* [【Rails】payjpを使用した決済機能を実装する①〜クレジットカードの登録編〜
(credentials.yml.encへの秘密鍵記載を参考にさせて頂きました)](https://qiita.com/dice9494/items/4aa04da1056d1f15919e)
* [[HowTo]Pay.jpを用いたクレジットカードの登録機能実装について/カスタムフォーム版
(PAY.JPの詳細情報を参考にさせて頂きました。)](https://qiita.com/Tatsu88/items/23fe4b83d0ff8d78709d)
* [Payjpでクレジットカード登録と削除機能を実装する(Rails)](https://qiita.com/takachan_coding/items/f7e70794b9ca03b559dd)
* [(credentials.yml.encの使い方について参考にさせて頂きました)
Rails5.2から追加された credentials.yml.enc のキホン](https://qiita.com/takachan_coding/items/f7e70794b9ca03b559dd)
* [(hamlの導入に関して参考にさせて頂きました)Railsでhamlを導入する！](https://qiita.com/MitsuguSueyoshi/items/f1b0b047553fde49bbc1)