Create a model

Create a Card model.

terminal

$ rails g model card

What you need to save as the data received from PAY.JP is the column to save the customer ID and card ID. With these two, you can bring in most of the data. The code below also links with the ʻUser model`.

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

Don't forget to migrate.

terminal

$ rails db:migrate

Write JS file

This is almost a complete copy of the official guide (https://pay.jp/docs/payjs-guidance). Officially I use onclick to fire the token generation, but in my case it didn't work so I used AddEventListener. For the time being, display the token and check the operation.

card_form.js

//Execute when DOM loading is completed
document.addEventListener('DOMContentLoaded', () => {
  //Register the public key and get the starting object
  var payjp = Payjp('pk_test_hogehoge')

  //Gets the elements. If you prepare multiple forms on the page, please get multiple
  var elements = payjp.elements()

  // element(Input form unit)To generate
  var numberElement = elements.create('cardNumber', {style: style})
  var expiryElement = elements.create('cardExpiry', {style: style})
  var cvcElement = elements.create('cardCvc', {style: style})
  //Place element on DOM
  numberElement.mount('#number-form')
  expiryElement.mount('#expiry-form')
  cvcElement.mount('#cvc-form')
  
  //Prepare a function to generate a token when the button is pressed
  create_token.addEventListener("click", function() {
    payjp.createToken(numberElement).then(function(r) {
      document.querySelector('#token').innerText = r.error ? r.error.message : r.id
    })
  });
})

Write a view file

For the time being, I will make a minimum description to display the form. Let's rewrite it later as you like.

haml:_card_form.html.haml

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

-#Actually application.html.It is better to write it in the header part such as 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"}
Token creation
  %span#token
token:

Operation check

So far this time, next time I would like to summarize the implementation of the card registration function.

reference

After all, the official API and guide are the strongest. However, if you are not accustomed to reading it, you can get a feel for it while looking at the actual implementation procedure on Qiita etc.

PAY.JP API Reference https://pay.jp/docs/api/

PAY.JP API User's Guide | PAY.JP https://pay.jp/docs/started
The official blog is also helpful, but be aware that the information is often old and v1 compliant.

Very basic usage of PAY.JP (Ruby edition) --PAY.JP Engineering Blog https://payjp.hatenablog.com/entry/2017/11/21/191916
Other articles that I referred to

Credit card registration function implementation with Payjp.js V2 on Rails Flea market app --Qiita https://qiita.com/ta9301/items/6b736390c49c3f40edb6

[HowTo] From product purchase function implementation using Pay.jp to setting after product purchase https://qiita.com/Tatsu88/items/eb420e372077939a4627