Credit card registration function implementation with Payjp.js V2 on Rails Flea market app

Overview

Since there was no article on customizable v2 implementation using payjp.js I think I shared it. There were a lot of implementation articles in v1, but ...

payjp.js v2 provided in beta

Regarding payjp.js, which provides a tokenization function for card information, we have provided beta of payjp.js> v2, which is compliant with the latest PCI-DSS.

What is payjp.js v2?

payjp.js v2 is a card information input form> generation library that complies with the latest PCI-DSS, in addition to the conventional card information tokenization function.

See references and guides for features and details. We also have multiple demos.

Request for migration

Regarding the current payjp.js v1, at the same time as this release of v2 (scheduled for early April), new use is deprecated.> We are planning to do so soon.

We apologize for the inconvenience caused to the member stores that are already using v1, but please migrate to payjp.js v2.

Regarding the migration procedure from v1, we will publish an article on this blog again. Please note that we will inform you about the detailed migration schedule.

Thank you for your continued support of PAY.JP. Reference: PAY.JP Blog

Since it was said that this is recommended from now on, even a little I've implemented it with the hope of helping everyone, so I'll write it down. PAY.JP API User's Guide | PAY.JP I think that it is quite easy to understand if you implement it after seeing.

↑ Since I am a fledgling engineer, I will correct any mistakes. Please give us your opinion: point_up:

version information

• ruby 2.6.5
• Rails 6.0.3.2

table of contents

1. Create a Payjp account
2. Check the API
3. Install Payjp and dotenv Gem
4. Make it possible to read payjp.js
5. Create a table to save
6. Create a controller
7. Create a card registration screen
8. Create javascript file
9. Create a routing
10. Register your card

1. Create a Payjp account

Create an account on the Payjp site.

2. Check the API

After logging in, check from the API on the dashboard. Since this time we are implementing in test mode, we will use ** test private key ** and ** test public key **.

3. Install Payjp and dotenv Gem

Install the payjp gem

Gemfile

gem 'payjp'
gem 'dotenv'

Once described in the Gemfile, it is installed.

terminal

$  bundle install

Create .env with touch command

terminal

$cd Created app directory
$ touch .env　

If you can create it, write the API in .env. If you write 'pk_test_000000000000000000000000' here, it may not work in the production environment,

PAYJP_PRIVATE_KEY=pk_test_000000000000000000000000
PAYJP_SECRET_KEY=sk_test_000000000000000000000000

If you're using Git, don't push to a remote repository by writing:

.gitnore

.env

4. Make it possible to read payjp.js

** ★ Described in Haml Click here for how to install haml ↓ ** Introduce haml with Rails! | Qiita

Add `% script {src:" https://js.pay.jp/ ", type:" text / javascript "} as follows. ``

ruby:app/views/layouts/application.html.haml

%html
  %head
    %meta{:content => "text/html; charset=UTF-8", "http-equiv" => "Content-Type"}/
    %title hogehoge
    %script{src: "https://js.pay.jp/v2/pay.js"} 　　#Describe this script
    = csp_meta_tag
    = csrf_meta_tag
    = stylesheet_link_tag    'application', media: 'all', 'data-turbolinks-track': 'reload'
    = javascript_include_tag 'application', 'data-turbolinks-track': 'reload'
  %body
    = yield

5. Create a table to save

Create a database table to store payjp data with the following command

terminal

$ rails g model Card user_id:integer customer_id:string card_id:string

When you command, a migration file is created in db, so check the contents

db/migrate/2020800********_create_cards.rb

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

Make a migration.

terminal

$ rails db:migrate

Since it is prohibited to save the card information itself in the database, Information can be obtained by calling the information stored in payjp with the customer id or card id.

Revised Installment Sales Law

Request for Card information non-passage support

6. Create a controller

Create a controller with the following command

terminal

$ rails g controller card

pp/controllers/card_controller.rb

class CardsController < ApplicationController

  require 'payjp' #Now you can use the pajp method

  def new
    card = Card.where(user_id: current_user.id)
    redirect_to action: "show" if card.exists?
  end

  def pay　　#Create database for payjp and Card
    Payjp.api_key = ENV["PAYJP_SECRET_KEY"]
    if params['payjp_token'].blank?
      redirect_to action: "new"
    else
      customer = Payjp::Customer.create(
      description: 'Registration test', #OK without
      email: current_user.email, #OK without
      card: params['payjp_token'],
      metadata: {user_id: current_user.id}
      ) #User in metadata just in case_You don't have to enter the id
      @card = Card.new(                  #Creating card table data
        user_id: current_user.id,        #Here current_user.Since there is an id, let me sign in in advance
        customer_id: customer.id,        #customer defined above
        card_id: customer.default_card  # .default_By using card, the card information linked at the time of customer definition is pulled. If this is null, the above customer's card: params['payjp_token']Is often not read
      )
      if @card.save
        redirect_to action: "show"
      else
        redirect_to action: "pay"
      end
    end
  end



  def delete #Delete Payjp and Card databases
    card = Card.find_by(user_id: current_user.id)
    if card.blank?
    else
      Payjp.api_key = ENV["PAYJP_SECRET_KEY"]
      customer = Payjp::Customer.retrieve(card.customer_id)
      customer.delete
      card.delete
    end
      redirect_to action: "new"
  end

  def show #Send to Card data payjp and retrieve information
    card = Card.find_by(user_id: current_user.id)
    if card.blank?
      redirect_to action: "new" 
    else
      Payjp.api_key = ENV["PAYJP_SECRET_KEY"]
      customer = Payjp::Customer.retrieve(card.customer_id)
      @default_card_information = customer.cards.retrieve(card.card_id)
    end
  end

end

7. Create a card registration screen

** Here is v2, which is a little different from v1! !! !! !! ** **

haml:new_credit.html.haml

      .form-group
        %p#number-form.payjs-outer
        %p#expiry-form.payjs-outer
        %p#cvc-form.payjs-outer
      .form-group
        = form_with url: pay_cards_path, method: :post,id: "card_form" do |f|
          #card_token
          = f.submit "sign up", class:"btn", id: "info_submit"

With this alone, if you write pay.js in javascript, the following elements will appear in asynchronous communication!

8. Create javascript file

Have JQuery available in Rails and write the following (Before writing js, payjp.js v2 Guide and payjp.js v2 Reference It is easier to understand if you read the following and then enter the following description: point_up :)

app/assets/javascripts/pay.js

$(window).bind("load", function(){ 
  if (document.URL.match(/cards/)){
  //↑ To URl/crads/Fire only when there is

    var payjp = Payjp('pk_test_*************0')
     //↑ Register the public key and get the starting object

    var elements = payjp.elements();
　　　//↑ Get elements.

    var numberElement = elements.create('cardNumber');
    var expiryElement = elements.create('cardExpiry');
    var cvcElement = elements.create('cardCvc');
　　//↑ Generate element

    numberElement.mount('#number-form');
    expiryElement.mount('#expiry-form');
    cvcElement.mount('#cvc-form');
　　　//↑ Place element on DOM

    var submit_btn = $("#info_submit");
    submit_btn.click(function (e) {
      e.preventDefault();
      payjp.createToken(numberElement).then(function (response) {
　　　　//↑↑ Create a token here//Pass any one Element as an argument of createToken

        if (response.error) {  //When communication fails
          alert(response.error.message)
          regist_card.prop('disabled', false)
        } else {
          alert("Registration has been completed");
          $("#card_token").append(
            `<input type="hidden" name="payjp_token" value=${response.id}>
            <input type="hidden" name="card_token" value=${response.card.id}>`
          );
          $('#card_form')[0].submit();
        　 //↑↑ Here type='hidden'And put the token on submit

          $("#card_number").removeAttr("name");
          $("#cvc-from").removeAttr("name");
          $("#exp_month").removeAttr("name");
        　$("#exp_year").removeAttr("name");
　　　　　　//↑↑ Here, the description is deleted with removeAttr
        };
      });
    }); 
  }
});

8. Create confirmation / deletion screen

If you can register, the card # show action will move by redirecting. Prepare a confirmation / delete screen.

haml:app/cards/show.html.haml

.creditShow
  %label Registered credit card information
  %br
  = "**** **** **** " + @default_card_information.last4
  %br
  - exp_month = @default_card_information.exp_month.to_s
  - exp_year = @default_card_information.exp_year.to_s.slice(2,3)
  = exp_month + " / " + exp_year
  = form_tag(delete_cards_path, method: :post, id: 'charge-form',  name: "inputForm") do
    %input{ type: "hidden", name: "card_id", value: "" }
    %button delete

9. Create a routing

It depends on the specifications of the application, but we will share the description once it was implemented, so please arrange it.

config/routes.rb

resources :cards, only: [:new, :show,] do
    collection do
      post 'show', to: 'cards#show'
      post 'pay', to: 'cards#pay'
      post 'delete', to: 'cards#delete'
    end
  end

Now that the description of route and MVC is complete, you can register.

10. Register your card

Registration in test mode payjp test card Described here

--Card number: 4242424242424242 --Expiration date: 12/20

• CVC: 123 --Card name: YUI ARAGAKI

Please register at http: // localhost: 3000 / cards / new /: relaxed: If you can register, click here → Dashboard Customers Will be reflected in!

Reference article

PAY.JP API Implement credit card registration and deletion function with Payjp (Rails) ｜ Qiita How to enable jQuery in Rails ｜ Qiita Implementing the purchase function using Payjp with Rails ｜ Qiita [Rails] I briefly summarized the procedure for implementing the payment function using PAYJP