개요

PAY.JP API에서의 카드 등록/변경/삭제 기능 구현의 각서입니다.
이번에는 구현을 위한 준비로서 토큰 취득까지의 순서를 정리해 나갑니다.
※간결하기 위해서 실장을 위해서 필요한 최소한의 코드만 쓰고 있습니다.

뭔가 실수 등 있으면 편집 요청을 주시면 감사하겠습니다.

덧붙여서 payjp.js는 v1에 관한 기사는 많지만 현행의 v2와는 다른 부분이 많기 때문에 주의가 필요합니다.

구현 준비편 ← 지금 여기
htps : // 이 m / 닛 sy7, k / ms / 9790, f5, 1, c2863, 62
카드 등록편
htps : // 이 m / 닛 sy7 오 k / ms / 음 6789 3b99654 473
카드 갱신・삭제편
htps : // 이 m / 닛 sy7, k / ms / 0, d52954f8f, d772, 3

환경

# OS Version
ProductName:    Mac OS X
ProductVersion: 10.15.7
BuildVersion:   19H2

# Ruby Version
ruby:           2.6.5p114
Rails:          6.0.3.3

절차

PAY.JP에 등록

등록·로그인 후의 화면에서 API 를 선택.
テスト鍵 와 本番鍵 가 준비되어 있습니다만, テスト鍵 쪽을 사용합니다.

필요한 gem 설치

Gemfile

gem 'payjp'
gem 'dotenv-rails'

dotenv-rails 는 환경 변수를 관리하는 gem이므로 필수는 아니지만, 비밀키를 직접 코드에 기술하는 일이 없는 형태를 취합시다.
기술 후에는 bundle install 도 잊지 말아 둡시다.

환경 변수 정의

앱 디렉토리에 .env 파일을 만들고 다음과 같이 작성합니다.

.env

PAYJP_SECRET_KEY = '先ほど確認したテスト秘密鍵'
PAYJP_PUBLIC_KEY = '先ほど確認したテスト公開鍵'

이렇게 하면 키를 변수화할 수 있습니다.ENV[PAYJP_SECRET_KEY] 에서 동작을 확인할 수 있습니다.

terminal

[1] pry(main)> require 'dotenv-rails'
=> true
[2] pry(main)> ENV['PAYJP_SECRET_KEY']
=> "sk_test_hogehoge"

덧붙여서 파일명을 rails console 라고 하면 개발 환경, .env.development 라고 하면 프로덕션 환경이라고 하는 형태로 코드는 그대로로 환경 마다 변수를 구분할 수가 있습니다.
그 근처의 자세한 것은 공식 github ( htps : // 기주 b. 코 m / b Keepe rs / Doten v )를 참조.

※.env 파일은 github에 push하지 않는 것. .gitignore로 설정해 둡시다.

모델 만들기

Card 모델을 만듭니다.

terminal

$ rails g model card

PAY.JP에서받는 데이터로 저장해야하는 것은 .env.production와 顧客ID를 저장하는 열입니다.
이 두 가지가 있으면 대부분의 데이터를 가져올 수 있습니다.
아래 코드에서는 カードID 와의 연결도 실시하고 있습니다.

migrationfile

class CreateCards < ActiveRecord::Migration[6.0]
  def change
    create_table :cards do |t|
      t.reference :user, null: false
      t.string :customer_id, null: false
      t.string :card_id, null: false
      t.timestamps
    end
  end
end

잊지 마세요.

terminal

$ rails db:migrate

JS 파일 작성

공식 가이드( htps : // 파 y. jp/do cs/pa yjs-guydanse ) 의 거의 환사입니다.
공식에서는 토큰 생성의 발화에 onclick을 사용하고 있습니다만, 제 경우에는 잘 동작하지 않았으므로 AddEventListener를 사용했습니다.
우선 토큰을 표시하여 동작을 확인합니다.

card_form.js

// DOM読み込みが完了したら実行
document.addEventListener('DOMContentLoaded', () => {
  // 公開鍵を登録し、起点となるオブジェクトを取得します
  var payjp = Payjp('pk_test_hogehoge')

  // elementsを取得します。ページ内に複数フォーム用意する場合は複数取得ください
  var elements = payjp.elements()

  // element(入力フォームの単位)を生成します
  var numberElement = elements.create('cardNumber', {style: style})
  var expiryElement = elements.create('cardExpiry', {style: style})
  var cvcElement = elements.create('cardCvc', {style: style})

  // elementをDOM上に配置します
  numberElement.mount('#number-form')
  expiryElement.mount('#expiry-form')
  cvcElement.mount('#cvc-form')

  // ボタンが押されたらtokenを生成する関数を用意します
  create_token.addEventListener("click", function() {
    payjp.createToken(numberElement).then(function(r) {
      document.querySelector('#token').innerText = r.error ? r.error.message : r.id
    })
  });
})

뷰 파일 작성

우선 폼을 표시시키기 위해 최소한의 기술을 합니다. 나중에 원하는대로 다시 작성합시다.

_card_form.html.haml

:css
  .Payjs__outer {
    border: solid 1px;
  }

-# 実際はapplication.html.haml等のヘッダー部分に書いたほうが良いです。
= javascript_include_tag 'https://js.pay.jp/v2/pay.js'

.Payjs
  .Payjs__outer{id: "number-form"}
  .Payjs__outer{id: "expiry-form"}
  .Payjs__outer{id: "cvc-form"}
  %button{id: "create_token"}
    トークン作成
  %span#token
    トークン：

동작 확인

이런 식의 폼이 가능하므로 테스트 카드( htps : // 파 y. jp / cs / st 또는 rd )에서 원하는 카드 번호를 입력하여 동작을 확인합니다.

토큰 생성이 확인되었습니다.

이번은 여기까지, 다음번은 카드 등록 기능의 실장에 대해 정리해 가고 싶습니다.

참고

결국 소식 API와 가이드가 최강입니다.
단지 익숙하지 않은 사이에는 Qiita등에서 실제의 실장 순서를 보면서 감각을 잡으면 이해가 빨라진다고 생각합니다.

PAY.JP API 참조
htps : // 파 y. jp/도cs/아피/

PAY.JP API 사용 가이드 | PAY.JP
htps : // 파 y. jp / cs / s r d

공식 블로그도 참고가 됩니다만, 정보가 낡고 v1 준거로 쓰여지고 있는 경우가 많기 때문에 주의가 필요합니다.

매우 기본적인 PAY.JP 사용법(Ruby편) - PAY.JP Engineering Blog
htps : // 파 yjp. 하테나 bぉg. 코m/엔트리/2017/11/21/191916

기타 참고로 한 기사 등

Rails에서 Payjp.js V2에서 신용 카드 등록 기능 구현 프리마 앱 - Qiita
h tps:// 퀵했다. 작은 m/그 외 9301/있어 MS/6b736390C49c3f40 그림 DB6

[HowTo]Pay.jp를 이용한 상품 구입 기능 구현부터 상품 구입 후 설정까지
htps : // 이 m / 타츠 88 / ms / 에 b420 에 372077939 4627