[JAVA] [Rails] Implementieren Sie die Registrierungs- / Löschfunktion für Kreditkarten in PAY.JP
Einführung
Wir haben PAY.JP eingeführt, um Kreditkartenzahlungen mit einer persönlichen App durchzuführen. In der Einleitung gab es einen kleinen Stolperstein, daher habe ich ihn als Memorandum aufgeführt.
Voraussetzungen
- Rails 5.2.4.2
- Ruby 2.5.1 --Verwenden Sie ein Gerät
- Verwenden Sie haml --Verwenden Sie VS Code
Verfahren
- PAY.JP Registrierung
- PAY.JP in die App einführen / vorbereiten
- Erstellen Sie ein Modell
- Migrationsdatei
- Erstellen eines Controllers
- Einführung von Gon
- Erstellen einer JS-Datei
PAY.JP Registrierung
Registrieren Sie sich unter der folgenden URL. PAY.JP
Wenn die Registrierung abgeschlossen ist, werden Sie zum obigen Bildschirm weitergeleitet. (Weil es verwendet wurde, sind die Verkäufe hoch.) Anfangs befindet es sich im Testmodus. Um eine echte Transaktion durchzuführen, müssen Sie sich bewerben und in den Live-Modus wechseln. Dieses Mal verwende ich den Testmodus, da er für den persönlichen Gebrauch und nicht für kommerzielle Zwecke bestimmt ist.
Verwenden Sie den Inhalt von "API" in der Menüleiste.
Ich werde diesen privaten Testschlüssel und den öffentlichen Testschlüssel für meine App verwenden.
PAY.JP in die App einführen und vorbereiten
Fügen Sie Gemfile Folgendes hinzu
gem 'payjp'
Von hier aus werden wir uns darauf vorbereiten, ein Eingabeformular für Karteninformationen zu erstellen. Es gibt jedoch zwei Möglichkeiten, dies zu tun.
Informationen zur Tokenisierung von Karteninformationen
- Auschecken
- Benutzerdefiniert
Beim Checkout
<form action="/pay" method="post">
<script src="https://checkout.pay.jp/" class="payjp-button" data-key=""></script>
</form>
Wenn Sie das Obige beschreiben, können Sie das von PAYJP erstellte Formular verwenden.
Dieses Mal wollte ich das Formular selbst anpassen, also habe ich Folgendes getan:
Fügen Sie dem Hauptteil von application.html.haml Folgendes hinzu.
%script{src: "https://js.pay.jp", type: "text/javascript"}
Zusätzlich zu den oben genannten wird offiziell auch der öffentliche Schlüssel beschrieben, aber ich habe ihn separat beschrieben (später beschrieben).
Schreiben Sie als Nächstes den öffentlichen und den privaten Schlüssel von PAYJP in credentials.yml.enc.
- Verwenden Sie die Funktion Encrypted Credentials aus der Rails 5.2-Serie. Mit dieser Funktion können Sie einfach Werte verwalten, die aus Sicherheitsgründen nicht an Dritte weitergegeben werden sollen, z. B. API-Schlüssel.
Zum Bearbeiten der Datei ist eine kleine Vorbereitung erforderlich. Stellen Sie zunächst so ein, dass VS Code vom Terminal aus gestartet werden kann. Drücken Sie im VSCode gleichzeitig "Befehl + Umschalt + P", um die Befehlspalette zu öffnen. Geben Sie dann "shell" ein. Im Menü wird der Eintrag "Install'code 'Befehl in PATH" angezeigt. Klicken Sie darauf. Auf diese Weise können Sie jetzt VS Code starten, indem Sie "Code" vom Terminal aus eingeben.
Bearbeiten Sie als Nächstes den Inhalt der folgenden Datei.
$ pwd
#Stellen Sie sicher, dass Sie sich in Ihrem App-Verzeichnis befinden
$ EDITOR='code --wait' rails credentials:edit
Nach einer Weile wird die Datei wie unten gezeigt geöffnet.
Schreiben Sie hier wie folgt. Beachten Sie, dass es verschachtelt ist.
payjp:
PAYJP_SECRET_KEY: sk_test_...
PAYJP_PUBLIC_KEY: pk_test_...
Wenn Sie Ihren eigenen Schlüssel schreiben, speichern Sie ihn und schließen Sie die Datei ”New credentials encrypted and saved.” Wird an das Terminal ausgegeben, ist es also abgeschlossen.
Sie können mit dem folgenden Befehl überprüfen, ob es gespeichert wurde.
$ rails c
$ Rails.application.credentials[:payjp][:PAYJP_SECRET_KEY]
$ Rails.application.credentials[:payjp][:PAYJP_PUBLIC_KEY]
Modell erstellen
Dieses Mal werden wir es das Kartenmodell nennen. Ich habe es wie folgt erstellt.
class Card < ApplicationRecord
belongs_to :user
has_one :order, dependent: :nullify
require 'payjp'
Payjp.api_key = Rails.application.credentials.dig(:payjp, :PAYJP_SECRET_KEY)
def self.create_card_to_payjp(params)
#Erstellen Sie ein Token
token = Payjp::Token.create({
card: {
number: params['number'],
cvc: params['cvc'],
exp_month: params['valid_month'],
exp_year: params['valid_year']
}},
{'X-Payjp-Direct-Token-Generate': 'true'}
)
#Erstellen Sie Kundeninformationen basierend auf dem oben erstellten Token
Payjp::Customer.create(card: token.id)
end
Da die EC-Site in der persönlichen Anwendung erstellt wurde, ist die Zuordnung Benutzer und Bestellung.
Karteninformationen werden hier mit einem Token versehen.
Eine Tabelle erstellen
Ich habe eine Tabelle mit folgendem Inhalt erstellt.
class CreateCards < ActiveRecord::Migration[5.2]
def change
create_table :cards do |t|
t.string :customer_id, null: false
t.string :card_id, null: false
t.references :user, null: false, foreign_key: true
t.timestamps
end
end
end
Ich wusste es zuerst nicht, aber customer_id und card_id müssen als Spalten im Mast erstellt werden. Datensätze werden wie folgt in der Tabelle registriert.
Controller erstellen
Dieses Mal habe ich den Controller mit 4 Aktionen wie folgt konfiguriert.
class CardsController < ApplicationController
before_action :set_card, only: [:new, :show, :destroy]
before_action :set_payjpSecretKey, except: :new
before_action :set_cart
before_action :set_user
require "payjp"
def new
redirect_to action: :show, id: current_user.id if @card.present?
@card = Card.new
gon.payjpPublicKey = Rails.application.credentials[:payjp][:PAYJP_PUBLIC_KEY]
end
def create
render action: :new if params['payjpToken'].blank?
customer = Payjp::Customer.create(
card: params['payjpToken']
)
@card = Card.new(
card_id: customer.default_card,
user_id: current_user.id,
customer_id: customer.id
)
if @card.save
flash[:notice] = 'Die Kreditkartenregistrierung ist abgeschlossen'
redirect_to action: :show, id: current_user.id
else
flash[:alert] = 'Kreditkartenregistrierung fehlgeschlagen'
redirect_to action: :new
end
end
def show
redirect_to action: :new if @card.blank?
customer = Payjp::Customer.retrieve(@card.customer_id)
default_card_information = customer.cards.retrieve(@card.card_id)
@card_info = customer.cards.retrieve(@card.card_id)
@exp_month = default_card_information.exp_month.to_s
@exp_year = default_card_information.exp_year.to_s.slice(2,3)
customer_card = customer.cards.retrieve(@card.card_id)
@card_brand = customer_card.brand
case @card_brand
when "Visa"
@card_src = "icon_visa.png "
when "JCB"
@card_src = "icon_jcb.png "
when "MasterCard"
@card_src = "icon_mastercard.png "
when "American Express"
@card_src = "icon_amex.png "
when "Diners Club"
@card_src = "icon_diners.png "
when "Discover"
@card_src = "icon_discover.png "
end
end
def destroy
customer = Payjp::Customer.retrieve(@card.customer_id)
@card.destroy
customer.delete
flash[:notice] = 'Kreditkarte gelöscht'
redirect_to controller: :users, action: :show, id: current_user.id
end
private
def set_card
@card = Card.where(user_id: current_user.id).first
end
def set_payjpSecretKey
Payjp.api_key = Rails.application.credentials[:payjp][:PAYJP_SECRET_KEY]
end
def set_cart
@cart = current_cart
end
def set_user
@user = current_user
end
end
Darüber hinaus haben wir ein Juwel namens "gon" eingeführt, um zu vermeiden, dass der öffentliche PAYJP-Schlüssel in eine JS-Datei geschrieben wird, die später beschrieben wird. Es ist eine Erkennung, dass es verwendet wird, wenn Sie Ruby-Variablen in JS-Dateien verwenden möchten.
Einführung von Gon
Fügen Sie Gemfile Folgendes hinzu
gem 'gon'
Fügen Sie dem Hauptteil von application.html.haml Folgendes hinzu.
= include_gon(init: true)
Jetzt können Sie loslegen.
Erstellen einer JS-Datei
Erstellen Sie von hier aus eine JS-Datei, die mit new.html.haml funktioniert und von der neuen Aktion des Controllers aufgerufen wird. Schreiben Sie zuerst new.html.haml.
- Bezüglich der Kartennummer usw., die in das Formular eingegeben werden soll, verwenden Sie bitte die auf der offiziellen Seite unten. Hier ist die in der API verwendete Testkarte.
.cardNew
.title
Geben Sie die Kreditkarteninformationen ein
.cardForm
= form_with model: @card, id: "form" do |f|
.cardForm__number
= f.label :Kartennummer, class: "cardForm__number__title"
%span.must_überprüfen erforderlich
.cardForm__field
= f.text_field :card_number, id: "card_number", placeholder: "Nur Zahlen halber Breite", class: "form-group__input", maxlength: 16
.cardForm__image
= image_tag(image_path('cards/icon_visa.png'), class: 'visa', width: 58, height: 28)
= image_tag(image_path('cards/icon_mastercard.png'), class: 'master', width: 47, height: 36)
= image_tag(image_path('cards/icon_jcb.png'), class: 'jcb', width: 40, height: 30)
= image_tag(image_path('cards/icon_amex.png'), class: 'amex', width: 40, height: 30)
= image_tag(image_path('cards/icon_diners.png'), class: 'diners', width: 45, height: 32)
= image_tag(image_path('cards/icon_discover.png'), class: 'discover', width: 47, height: 30)
.cardForm__expirationdate
.cardForm__expirationdate__details
= f.label :Haltbarkeitsdatum
%span.must_überprüfen erforderlich
%br
.cardForm__expirationdate__choice
.cardForm__expirationdate__choice__month
= f.select :expiration_month, options_for_select(["01", "02", "03", "04", "05", "06", "07", "08", "09", "10", "11", "12"]), {}, {id: "exp_month", name: "exp_month", type: "text"}
= f.label :Mond, class: "cardForm__expirationdate__choice__month__label"
.cardForm__expirationdate__choice__year
= f.select :expiration_year, options_for_select((2020..2030)), {}, {id: "exp_year", name: "exp_year", type: "text"}
= f.label :Jahr, class: "cardForm__expirationdate__choice__year__label"
.cardForm__securitycode
.cardForm__securitycode__details
.cardForm__securitycode__details__title
= f.label :Sicherheitscode, class: "label"
%span.must_überprüfen erforderlich
.cardForm__securitycode__details__field
= f.text_field :cvc, id: "cvc", class: "cvc", placeholder: "Kartenrückseite 3~4-stellige Nummer", maxlength: "4"
.cardForm__securitycode__details__hatena
= link_to "Wie lautet die Nummer auf der Rückseite der Karte??", "#", class: "cardForm__securitycode__details__hatena__link"
#card_token
= f.submit "zu registrieren", id: "token_submit", url: cards_path, method: :post
Erstellen Sie als Nächstes eine JS-Datei, die der obigen Ansichtsdatei entspricht.
$(document).on('turbolinks:load', function() {
$(function() {
Payjp.setPublicKey(gon.payjpPublicKey);
$("#token_submit").on('click', function(e){
e.preventDefault();
let card = {
number: $('#card_number').val(),
cvc:$('#cvc').val(),
exp_month: $('#exp_month').val(),
exp_year: $('#exp_year').val()
};
Payjp.createToken(card, function(status, response) {
if (response.error) {
$("#token_submit").prop('disabled', false);
alert("Die Karteninformationen sind falsch.");
}
else {
$("#card_number").removeAttr("name");
$("#cvc").removeAttr("name");
$("#exp_month").removeAttr("name");
$("#exp_year").removeAttr("name");
let token = response.id;
$("#form").append(`<input type="hidden" name="payjpToken" value=${token}>`);
$("#form").get(0).submit();
alert("Die Registrierung wurde abgeschlossen");
}
});
});
});
});
Wenn Sie die Registrierungsschaltfläche (= f.submit "submit", id: "token_submit") in der Ansichtsdatei drücken, wird JS ausgelöst. Die Token-Erstellung erfolgt mit einer Methode namens Payjp.createToken.
Damit ist die Kartenregistrierung abgeschlossen.
Abschließend werde ich kurz die Löschfunktion beschreiben. Ich habe in show.html.haml eine Schaltfläche zum Löschen installiert, die ich mit der folgenden Show-Aktion aufrufe.
.payment
.payment__content
.payment__content__title
Karteninformationen
.payment__content__box
.payment__content__box__cardImage
= image_tag "cards/#{@card_src}", width: 40, height: 28
.payment__content__box__details
.payment__content__box__details__cardNumber
= "Kartennummer:**** **** **** " + @card_info.last4
.payment__content____boxdetails__cardMMYY
= "Haltbarkeitsdatum:" + @exp_month + " / " + @exp_year
.payment__cardDelete
= button_to "löschen", card_path(@card.id), {method: :delete, id: 'charge-form', name: "inputForm", class: "payment__cardDelete__deleteBtn"}
Nächstes Mal werde ich die Zahlungsfunktion mit der registrierten Karte beschreiben.
Recommended Posts