###まずはじめに

Pay.jpとは
シンプルなAPIと豊富なライブラリで簡単にクレジットカード決済を導入できます。
ApplePayに対応していたり定期課金を組むことができます。
今回は開発環境での実装をイメージしているので後ほど出てくる各鍵はテストキーを使用しています。

##導入
Pay.jpの登録
まずはアカウントを取得をします。
登録完了しログインすると下記のようになります。

gemのインストール

Gemfile

gem 'payjp'
```:fist_tone1::point_up:
**インストール**

bundle install



##環境変数の設定
まず、プロジェクト直下に.envファイルを新たに作成し、以下のように編集しましょう。

PAYJP_PUBLIC_KEY='自身のアカウントのテスト公開鍵'
PAYJP_SECRET_KEY='自身のアカウントのテスト秘密鍵'

各キーはPay.jpマイページのAPIより確認ができます。
<img width="1664" alt="Pay.jp api_view.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/498194/b3b84802-e932-c8a2-8f62-5c9e82c5ab83.png">

そしてこの.envファイルをGithubにあげないよう .gitignoreに下記追記をします。

```ruby:.gitignore
/.env

##controller

支払い機能を管理するコントローラーを作成しpayアクションを定義します。
私の場合はPurchasesControllerを作成し記載しております。

app/controllers/purchases_controller.rb


  def index
  end

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

Charge.createで売り上げ作成処理をしているのかと思います。
amountは売り上げ金額（ここではviewから取得したparams[:amount]を売上高とします。）、
cardはクレジットカードのトークンを使っての決済を表し、
currencyは 'jpy'とすることで日本円での決済としています。

また、indexに「カードで支払う」ボタンを設置します。

##ルーティング

payアクションのルートを追記します。

route.rb


resources :purchases
post 'purchases/pay' => 'purchases#pay'

##view

ここまできたらあとはビューに支払い用のモーダルを設置する処理をするだけですね。

app/views/purchases/index.html.haml


= form_with local: true, url: purchases_pay_path do |form|
  = form.number_field :amount
  %script.payjp-button{"data-key" => "自身のアカウントのテスト公開鍵", src: "https://checkout.pay.jp", type: "text/javascript"}

なんとこれだけでindex.html.hamlに表示される「カードで支払う」ボタンを押すだけで下記のようなモーダルが出てくるんです。

忘れずに支払い完了後のviewも用意します。

app/views/purchases/pay.html.haml


支払いが完了しました

= link_to 'Topへ', root_path

ここまで完了したら実際に試してみましょう！
index.html.hamlに記載した「カードで支払う」ボタンを押して、モーダルを開き必要な情報を入力します。
カード番号はあらかじめPay.jpで用意しているテスト用の共通カード番号'4242 4242 4242 4242'、
有効期限は現在から未来の日付、CVC番号は3桁の適当な数字、名前も適当な名前を入力して「カードで支払う」ボタンをクリック。

すると下記のようにpay.html.hamlの画面になれば完了です。
※CSSを当ててないのでシンプルですがご了承ください。

実際にPay.jpにアクセスし売り上げの画面を見て、支払い済みとなっていれば問題ないです。

##さいごに

今回は開発環境についてですが、本番環境の際はもう少し考慮する点はあるかと思います。
が、皆さんならやってくれると信じてます。

ここから発展して定期課金などはまたの機会でご紹介できればなんて思ってます。

ありがとうございました。