[JAVA] Einführung von pay.jp

So installieren Sie Pay.jp

Es handelt sich um einen Kreditkartenzahlungsdienst, der mit einer einfachen offenen API eingeführt werden kann.

Why

Die Menge an Code ist sehr gering, und Sie können problemlos ein Formular mit Javascript einreichen, sodass ich es einführen werde (ich werde es weglassen).

Eine Anwendung erstellen

Terminal

% cd ~/projects(wie es Dir gefällt)
% rails _6.0.0_ new payjp_practice -d mysql
% cd payjp_practice
% rails db:create

Modellbildung bestellen

Terminal

% rails g model order

Auftragstabelle erstellen

db/migrate/**************_create_orders.rb

class CreateOrders < ActiveRecord::Migration[6.0]
  def change
    create_table :orders do |t|
      t.integer :price  ,null: false
      t.timestamps
    end
  end
end

Vergiss nicht!

Terminal

% rails db:migrate

Validierung

app/models/order.rb

class Order < ApplicationRecord
  validates :price, presence: true
end

Routing

config/routes.rb

Rails.application.routes.draw do
  root to: 'orders#index'
  resources :orders, only:[:create]
end

bestellt Controller

Terminal

% rails g controller orders

app/controllers/orders_controller.rb

class OrdersController < ApplicationController

  def index
  end

  def create
  end

end

Erstellen Sie eine Ansicht

java:app/views/orders/index.html.erb

<%= form_with  model: @order, id: 'charge-form', class: 'card-form',local: true do |f| %>
  <div class='form-wrap'>
    <%= f.label :price, "Geldbetrag" %>
    <%= f.text_field :price, class:"price", placeholder:"Beispiel)2000" %>
  </div>
  <%= f.submit "Kauf" ,class:"button" %>
<% end %>

CSS-Beschreibung

app/assets/stylesheets/style.css

.card-form{
  width: 500px;
}

.form-wrap{
  display: flex;
  flex-direction: column;
}

.exp_month{
  resize:none;
}

.exp_year{
  resize:none;
}

.input-expiration-date-wrap{
  display: flex;
}


.button{
  margin-top: 30px;
  height: 30px;
  width: 100px;
}

Controller-Bearbeitung

app/controllers/orders_controller.rb

class OrdersController < ApplicationController

  def index
    @order = Order.new
  end

  def create
    @order = Order.new(order_params)
    if @order.valid?
      @order.save
      return redirect_to root_path
    else
      render 'index'
    end
  end

  private

  def order_params
    params.require(:order).permit(:price)
  end

end

Teilvorlage

java:app/views/orders/index.html.erb

<%= form_with  model: @order, id: 'charge-form', class: 'card-form',local: true do |f| %>
  <%= render 'layouts/error_messages', model: @order %>
  <div class='form-wrap'>
<%#Kürzung%>

Beschreibung anzeigen

java:app/views/orders/index.html.erb

<%= form_with  model: @order, id: 'charge-form', class: 'card-form',local: true do |f| %>
  <%= render 'layouts/error_messages', model: @order %>
  <div class='form-wrap'>
    <%= f.label :price, "Geldbetrag" %>
    <%= f.text_field :price, class:"price", placeholder:"Beispiel)2000" %>
  </div>
  <div class='form-wrap'>
    <%= f.label :number,  "Kartennummer" %>
    <%= f.text_field :number, class:"number", placeholder:"Kartennummer(Alphanumerische Zeichen halber Breite)", maxlength:"16" %>
  </div>
  <div class='form-wrap'>
    <%= f.label :cvc ,"ＣＶＣ" %>
    <%= f.text_field :cvc, class:"cvc", placeholder:"4-stellige oder 3-stellige Nummer auf der Rückseite der Karte", maxlength:"3" %>
  </div>
  <div class='form-wrap'>
    <p>Haltbarkeitsdatum</p>
    <div class='input-expiration-date-wrap'>
      <%= f.text_field :exp_month, class:"exp_month", placeholder:"Beispiel)3" %>
      <p>Mond</p>
      <%= f.text_field :exp_year, class:"exp_year", placeholder:"Beispiel)24" %>
      <p>Jahr</p>
    </div>
  </div>
  <%= f.submit "Kauf" ,class:"button" %>
<% end %>

Turbolinks entfernen und Code hinzufügen

java:app/views/layouts/application.html.erb

<%#Kürzung%>
    <%= stylesheet_link_tag 'application', media: 'all'  %>
    <%= javascript_pack_tag 'application' %>
<%#Kürzung%>

app/javascript/packs/application.js

//Kürzung
require("@rails/ujs").start()
// require("turbolinks").start() //Auskommentieren
require("@rails/activestorage").start()
require("channels")
//Kürzung

Lesen Sie payjp.js

java:app/views/layouts/application.html.erb

<%#Kürzung%>
    <%= csrf_meta_tags %>
    <%= csp_meta_tag %>
    <script type="text/javascript" src="https://js.pay.jp/v1/"></script>
    <%= stylesheet_link_tag 'application', media: 'all' %>
    <%= javascript_pack_tag 'application' %>
<%#Kürzung%>

Bereit zum Tokenisieren

app/javascript/packs/application.js

//Kürzung
require("@rails/ujs").start()
// require("turbolinks").start()
require("@rails/activestorage").start()
require("channels")
require("../card")
//Kürzung

Ereignisauslösung

app/javascript/card.js

const pay = () => {
  const form = document.getElementById("charge-form");
  form.addEventListener("submit", (e) => {
    e.preventDefault();
    console.log("Ereignis beim Senden des Formulars ausgelöst")
  });
};

window.addEventListener("load", pay);

Einstellung des öffentlichen Schlüssels

app/javascript/card.js

const pay = () => {
  Payjp.setPublicKey("pk_test_******************"); // PAY.Öffentlicher Schlüssel für JP-Test
  const form = document.getElementById("charge-form");
  form.addEventListener("submit", (e) => {
    e.preventDefault();
    console.log("Ereignis beim Senden des Formulars ausgelöst")
  });
};

window.addEventListener("load", pay);

Formularinformationen abrufen

app/javascript/card.js

const pay = () => {
  Payjp.setPublicKey("pk_test_******************"); // PAY.Öffentlicher Schlüssel für JP-Test
  const form = document.getElementById("charge-form");
  form.addEventListener("submit", (e) => {
    e.preventDefault();

    const formResult = document.getElementById("charge-form");
    const formData = new FormData(formResult);

    const card = {
      number: formData.get("order[number]"),
      cvc: formData.get("order[cvc]"),
      exp_month: formData.get("order[exp_month]"),
      exp_year: `20${formData.get("order[exp_year]")}`,
    };
  });
};

window.addEventListener("load", pay);

Tokenisierung von Karteninformationen

app/javascript/card.js

const pay = () => {
  Payjp.setPublicKey("pk_test_******************"); // PAY.Öffentlicher Schlüssel für JP-Test
  const form = document.getElementById("charge-form");
  form.addEventListener("submit", (e) => {
    e.preventDefault();

    const formResult = document.getElementById("charge-form");
    const formData = new FormData(formResult);

    const card = {
      number: formData.get("order[number]"),
      cvc: formData.get("order[cvc]"),
      exp_month: formData.get("order[exp_month]"),
      exp_year: `20${formData.get("order[exp_year]")}`,
    };

    Payjp.createToken(card, (status, response) => {
      if (status == 200) {
        const token = response.id;
        console.log(token)
      }
    });
  });
};

window.addEventListener("load", pay);

Lassen Sie uns dies überprüfen, indem Sie die von pay.jp erstellten Testkarteninformationen einmal eingeben!

Kartennummer 4242424242424242 (16 Ziffern) CVC 123 Ablaufdatum Zukunft ab Registrierung (25.04. Usw.)

Fügen Sie den Token-Wert in das Formular ein

app/javascript/card.js

const pay = () => {
  Payjp.setPublicKey("pk_test_******************"); // PAY.Öffentlicher Schlüssel für JP-Test
  const form = document.getElementById("charge-form");
  form.addEventListener("submit", (e) => {
    e.preventDefault();

    const formResult = document.getElementById("charge-form");
    const formData = new FormData(formResult);

    const card = {
      number: formData.get("order[number]"),
      cvc: formData.get("order[cvc]"),
      exp_month: formData.get("order[exp_month]"),
      exp_year: `20${formData.get("order[exp_year]")}`,
    };

    Payjp.createToken(card, (status, response) => {
      if (status == 200) {
        const token = response.id;
        const renderDom = document.getElementById("charge-form");
        const tokenObj = `<input value=${token} name='token'>`;
        renderDom.insertAdjacentHTML("beforeend", tokenObj);
        debugger;
      }
    });
  });
};

window.addEventListener("load", pay);

Token-Wert ausblenden

app/javascript/card.js

const pay = () => {
  Payjp.setPublicKey("pk_test_******************"); // PAY.Öffentlicher Schlüssel für JP-Test
  const form = document.getElementById("charge-form");
  form.addEventListener("submit", (e) => {
    e.preventDefault();

    const formResult = document.getElementById("charge-form");
    const formData = new FormData(formResult);

    const card = {
      number: formData.get("order[number]"),
      cvc: formData.get("order[cvc]"),
      exp_month: formData.get("order[exp_month]"),
      exp_year: `20${formData.get("order[exp_year]")}`,
    };

    Payjp.createToken(card, (status, response) => {
      if (status == 200) {
        const token = response.id;
        const renderDom = document.getElementById("charge-form");
        const tokenObj = `<input value=${token} name='token' type="hidden"> `;
        renderDom.insertAdjacentHTML("beforeend", tokenObj);
        debugger;
      }
    });
  });
};

window.addEventListener("load", pay);

Kreditkarteninformationen löschen

app/javascript/card.js

const pay = () => {
  Payjp.setPublicKey("pk_test_******************"); // PAY.Öffentlicher Schlüssel für JP-Test
  const form = document.getElementById("charge-form");
  form.addEventListener("submit", (e) => {
    e.preventDefault();

    const formResult = document.getElementById("charge-form");
    const formData = new FormData(formResult);

    const card = {
      number: formData.get("order[number]"),
      cvc: formData.get("order[cvc]"),
      exp_month: formData.get("order[exp_month]"),
      exp_year: `20${formData.get("order[exp_year]")}`,
    };

    Payjp.createToken(card, (status, response) => {
      if (status == 200) {
        const token = response.id;
        const renderDom = document.getElementById("charge-form");
        const tokenObj = `<input value=${token} name='token' type="hidden"> `;
        renderDom.insertAdjacentHTML("beforeend", tokenObj);
      }

      document.getElementById("order_number").removeAttribute("name");
      document.getElementById("order_cvc").removeAttribute("name");
      document.getElementById("order_exp_month").removeAttribute("name");
      document.getElementById("order_exp_year").removeAttribute("name");
    });
  });
};

window.addEventListener("load", pay);

Senden Sie Formularinformationen an die Serverseite

app/javascript/card.js

const pay = () => {
  Payjp.setPublicKey("pk_test_******************"); // PAY.Öffentlicher Schlüssel für JP-Test
  const form = document.getElementById("charge-form");
  form.addEventListener("submit", (e) => {
    e.preventDefault();

    const formResult = document.getElementById("charge-form");
    const formData = new FormData(formResult);

    const card = {
      number: formData.get("order[number]"),
      cvc: formData.get("order[cvc]"),
      exp_month: formData.get("order[exp_month]"),
      exp_year: `20${formData.get("order[exp_year]")}`,
    };

    Payjp.createToken(card, (status, response) => {
      if (status == 200) {
        const token = response.id;
        const renderDom = document.getElementById("charge-form");
        const tokenObj = `<input value=${token} name='token' type="hidden"> `;
        renderDom.insertAdjacentHTML("beforeend", tokenObj);
      }

      document.getElementById("order_number").removeAttribute("name");
      document.getElementById("order_cvc").removeAttribute("name");
      document.getElementById("order_exp_month").removeAttribute("name");
      document.getElementById("order_exp_year").removeAttribute("name");

      document.getElementById("charge-form").submit();
    });
  });
};

window.addEventListener("load", pay);

Starke Parameterbearbeitung

app/controllers/orders_controller.rb

#Kürzung

  private

  def order_params
    params.require(:order).permit(:price).merge(token: params[:token])
  end

end

Zum Bestellmodell hinzugefügt

app/models/order.rb

class Order < ApplicationRecord
  attr_accessor :token
  validates :price, presence: true
end

Wir stellen vor: Gem

Gemfile

#Kürzung
gem 'payjp'

Beschreibung der Zahlungsabwicklung und Refactoring

app/controllers/orders_controller.rb

class OrdersController < ApplicationController

  def index
    @order = Order.new
  end

  def create
    @order = Order.new(order_params)
    if @order.valid?
      pay_item
      @order.save
      return redirect_to root_path
    else
      render 'index'
    end
  end

  private

  def order_params
    params.require(:order).permit(:price).merge(token: params[:token])
  end

  def pay_item
    Payjp.api_key = "sk_test_***********"  #Eigene Bezahlung.Schreiben Sie den privaten JP-Testschlüssel
    Payjp::Charge.create(
      amount: order_params[:price],  #Produktpreis
      card: order_params[:token],    #Kartenmarker
      currency: 'jpy'                 #Währungstyp (japanischer Yen)
    )
  end

end

Validierung

app/models/order.rb

class Order < ApplicationRecord
  attr_accessor :token
  validates :price, presence: true
  validates :token, presence: true
end

Umgebungsvariablen (für Mac Catalina und höher)

Terminal

% vim ~/.zshrc
#Drücken Sie i, um in den Einfügemodus zu wechseln und Folgendes hinzuzufügen. Löschen Sie nicht die vorhandene Beschreibung.
export PAYJP_SECRET_KEY='sk_test_************'
export PAYJP_PUBLIC_KEY='pk_test_************'
#Drücken Sie nach der Bearbeitung die Esc-Taste:Geben Sie zum Speichern und Beenden wq ein

Terminal

#Bearbeitet.Laden Sie zshrc neu, um die hinzugefügten Umgebungsvariablen zu verwenden
% source ~/.zshrc

Einladung von Umgebungsvariablen, denen ein privater Schlüssel zugewiesen wurde

app/controllers/orders_controller.rb

#Kürzung
def pay_item
   Payjp.api_key = ENV["PAYJP_SECRET_KEY"]
   Payjp::Charge.create(
     amount: order_params[:price],
     card: order_params[:token],
     currency:'jpy'
   )
end

Umgebungsvariablen mit JavaScript aufrufen

Terminal

% touch config/initializers/webpacker.rb

config/initializers/webpacker.rb

Webpacker::Compiler.env["PAYJP_PUBLIC_KEY"] = ENV["PAYJP_PUBLIC_KEY"]

app/javascript/card.js

const pay = () => {
 Payjp.setPublicKey(process.env.PAYJP_PUBLIC_KEY);
  //Kürzung

Zusammenfassung

Obwohl es einfach war, gab es möglicherweise viele Beschreibungen. Da es sich jedoch um eine relativ einfache Zahlungsfunktion handelt, die in der API eingeführt wurde, kann es sinnvoll sein, sie zu unterdrücken. In den meisten Fällen fügen Sie dem Original Spalten usw. hinzu. Es wird daher empfohlen, langsam in der richtigen Reihenfolge zu schreiben! das ist alles!