[JAVA] [Rails] Einführung von pay.jp (von der Ansichtsanpassung bis zur Registrierung)
Zunaechst
Wir haben die Kreditkartenregistrierungsfunktion implementiert, die beim Kauf von Produkten mit payjp erforderlich ist. Halten Sie ein Memorandum von Schritten von der Anpassung der Ansicht bis zur Registrierung bereit.
Entwicklungsumgebung
・ Schienen 5.2.4.2 ・ Ruby 2.5.1
Was ist pay.jp?
https://pay.jp/docs/started Einfach ausgedrückt handelt es sich um einen Dienst, der die Registrierung und Zahlung von Kreditkarten in Ihrem Namen übernimmt. Die Verwendung des PayJP-Edelsteins hilft Ihnen bei der Implementierung der Funktion.
Es ist übrigens verboten, die Karteninformationen selbst in der DB zu speichern. Durch Aufrufen der in payjp gespeicherten Informationen mit der Kunden- oder Karten-ID wird auf die Erfassung und Zahlung von Informationen reagiert. Der Punkt ist, dass Sie die von payjp erstellten Karten- und Kundeninformationen und die zugehörige ID übergeben. Speichern Sie diese ID also in der Datenbank und verweisen Sie von payjp darauf. Ich denke das ist das Bild. In Bezug auf die Sicherheit ist es äußerst gefährlich, Kreditkarteninformationen in der Datenbank zu speichern. Ich denke, dies liegt in dieser Form vor. (Siehe URL unten) http://payjp-announce.hatenablog.com/entry/2017/11/10/182738
Vor der Implementierung der Funktion
・ Überprüfen Sie nach dem Erwerb eines PAY.JP-Kontos den API-Schlüssel.
https://pay.jp/
Klicken Sie nach der Registrierung und Anmeldung auf die API-Seite, um Ihre privaten und öffentlichen Testschlüssel anzuzeigen.
・ Edelstein hinzufügen
gem 'payjp'
gem 'dotenv-rails'
Stellen Sie pay.jp und dotenv zur Verfügung. dotenv ist ein Juwel, mit dem Sie Umgebungsvariablen in einer Datei lesen können. dotenv, es gibt einen Prozess, bei dem Sie die Umgebungsvariable später lesen müssen. Fügen Sie sie also zuerst hinzu. Nach dem Hinzufügen Bundle installieren.
Erstellen Sie nach Abschluss der Installation eine ENV-Datei in Ihrem Home-Verzeichnis.
Geben Sie die privaten und öffentlichen Schlüssel ein, die Sie zuvor in der ENV-Datei bestätigt haben.
PAYJP_PRIVATE_KEY ='sk_test_****************:'
PAYJP_KEY ='pk_test_************************'
Da es gefährlich ist, wenn wichtige Informationen wie der PayJP-Schlüssel verloren gehen, fügen Sie der .gitgnore-Datei die folgende Beschreibung hinzu, damit sie nicht auf git hochgeladen wird.
/.env
Sie können den Code auch direkt in die Umgebungsvariable eingeben. https://qiita.com/daisukeshimizu/items/c01f29f8398cc7f5c396
Behobene Ansicht application.html.haml.
%script{src: "https://js.pay.jp/", type: "text/javascript"}
Fügen Sie diesen Satz hinzu, damit payjp.js vom head-Tag gelesen werden kann.
!!!
%html
%head
%meta{content: "text/html; charset=UTF-8", "http-equiv": "Content-Type"}/
%title EcApp
%script{src: "https://js.pay.jp/", type: "text/javascript"}
= csrf_meta_tags
= csp_meta_tag
= stylesheet_link_tag 'application', media: 'all', 'data-turbolinks-track': 'reload'
= javascript_include_tag 'application', 'data-turbolinks-track': 'reload'
%body
= yield
payjp.js ist eine Bibliothek, die sich nur auf das Tokenisieren von Karteninformationen spezialisiert hat. Da die Bibliothek payjp.js unter https://js.pay.jp gehostet wird, wird diese Domain geladen und verwendet, sodass sie lokal nicht funktioniert. Wenn Sie dies lesen, können Sie Methoden wie die Token-Erfassung von payjp verwenden.
Implementierung
1. Ansicht erstellen
<script type = "text / javascript" src = "https://checkout.pay.jp" class = "payjp-button" data-key = "öffentlicher Schlüssel"> </ script>
Es gibt auch eine Möglichkeit, eine Zeile Skript-Tag hinzuzufügen und die von payjp im Voraus erstellte Ansicht zu verwenden. Dieses Mal möchte ich die Ansicht jedoch anpassen, damit ich sie weglasse.
Obwohl es gerade erstellt wird, wird es so aussehen.
= render partial: "items/header"
.main
% h2 Registrierung eines neuen Mitglieds
= form_with url: creditcards_path, method: :post, id: 'charge-form', html: { name: "inputForm" } do |f|
.main__form
.main__form__registration
Kreditkartenregistrierungsseite
.main__form__field
% label.main__form__field__label Kartennummer
= f.text_field: number, name: "number", id: "card_number", type: "text", platzhalter: 'nur halbbreiten zahlen', klasse: 'main__form__field__box', maxlength: "16"
=image_tag "material/credit/credit.png ", class:"main__form__field__credit-image"
.main__form__field2
% label.main__form__field__label Ablaufdatum
= f.select :exp_month, [["--","--"],["01",1],["02",02],["03",03],["04",04],["05",05],["06",6],["07",07],["08",8],["09",9],["10",10],["11",11],["12",12]],{}, class: 'credit-box', name: "exp_month", id:"exp_month"
% span.month month
= f.select :exp_year, [["--","--"],["2019",2019],["2020",2020],["2021",2021],["2022",2022],["2023",2023],["2024",2024],["2025",2025],["2026",2026],["2027",2027],["2028",2028],["2029",2029]], {}, class: 'credit-box', name: "exp_year", id:"exp_year"
% span.year year
.main__form__field
% label.main__form__field__label Sicherheitscode
= f.text_field: cvc, name: "cvc", id: "cvc", typ: "text", platzhalter: '4- oder 3-stellige nummer auf der rückseite der karte', klasse: "main__form__field__box", maxlength: "4"
.main__form__field
= f.submit'Register ', id: "token_submit", class: "main__form__field__submit-btn"
Danach wird der im Formular mit payjp.js empfangene Wert [payjpToken] als Token-Daten zugewiesen und die Daten werden an payjp gesendet. Es ist obligatorisch, ID- und Namensattribute für andere Formularelemente als Formular- bzw. Senden-Schaltfläche anzugeben.
2. Erstellen Sie Token-Daten, die mit Javascript an payjp gesendet werden sollen
Da jQuery verwendet wird, legen Sie es bitte fest, wenn es nicht gesetzt ist. https://qiita.com/ngron/items/95846bd630a723e00038 Ich denke, dieser Artikel wird hilfreich sein.
Sobald Sie jQuery verwenden können Erstellen Sie in der Datei payjp.js Token-Daten, die an payjp gesendet werden sollen, und verwenden Sie dieses Token als Schlüssel zum Registrieren von Kreditkarteninformationen. Nachdem die Kreditkarteninformationen eingegeben wurden, implementieren wir sie mithilfe von Javascript, um basierend auf diesen Informationen ein "Token" zu erstellen.
$(document).on('turbolinks:load', function() {
var form = $ ("# Charge-Form"); // Weisen Sie die Form mit der ID "Charge-Form" zu.
Payjp.setPublicKey ('pk_test_839895c840d4f91f7e75df7e'); // Schreiben Sie den öffentlichen Schlüssel direkt, damit Sie darauf verweisen können.
$ (document) .on ("click", "# token_submit", Funktion (e) {// Funktioniert, wenn e gedrückt wird.
e.preventDefault (); // Stoppen Sie zuerst die Schienenverarbeitung und führen Sie zuerst die js-Verarbeitung durch.
form.find("input[type=submit]").prop("disabled", true);
var card = {// Ruft die in die Kartenvariable eingegebenen Kreditkarteninformationen basierend auf der ID ab und weist sie der Kartenvariablen zu. ..
number: $("#card_number").val(),
cvc: $("#cvc").val(),
exp_month: $("#exp_month").val(),
exp_year: $("#exp_year").val(),
};
Payjp.createToken (Karte, Funktion (en), Antwort) {// Token generieren. Die zuvor genannten Karteninformationen werden als verschlüsseltes Token zurückgegeben.
if (response.error) {// wenn der Wert ein Fehler war
alert ('Falsche Karteninformationen');
}
sonst {// wenn kein Fehler auftritt
$("#card_number").removeAttr("name");
$("#cvc").removeAttr("name");
$("#exp_month").removeAttr("name");
$ ("# exp_year"). removeAttr ("name"); // Löschen Sie den Wert, da er nicht in der Datenbank gespeichert ist.
var token = response.id;
Alarm ("Registrierung abgeschlossen");
form.append ($ ('<input type = "hidden" name = "payjpToken" />'). val (token)); // Da das Token in db gespeichert ist, fügen Sie das von js erstellte Token in das Formular ein. Es gibt.
form.get (0) .submit (); // ruft die Daten ab, die früher in das Formular eingefügt wurden.
}
});
});
});
https://payjp.hatenablog.com/entry/2017/12/05/134933 Anhand der Stichprobe von payjp.js, die von pay.jp bereitgestellt wird.
Payjp.setPublicKey('pk_test_xxxxxxxxxxxx'); Wenn Sie dies nicht beschreiben, wird keine Kommunikation mit dem Payjp-Server durchgeführt und es werden keine Token ausgegeben. Geben Sie daher den zuvor bestätigten API-Schlüssel ein.
- Da die Spezifikationen so sind, dass die Taste nicht ohne erneutes Laden gedrückt werden kann, wenn immer noch ein Fehler auftritt, planen wir, in Zukunft eine korrigierte Version hinzuzufügen.
3. Erstellen Sie ein Modell und eine Tabelle
class CreateCards < ActiveRecord::Migration[5.2]
def change
create_table :cards do |t|
t.references :user, foreign_key: true, null: false
t.string :customer_id, null: false
t.string :card_id, null: false
t.timestamps
end
end
end
Dies ist eine Tabelle zum Erstellen eines Kreditkartenmodells und zum Speichern von PAY.JP-Informationen. -User_id ... ID der Benutzertabelle ・ Customer_id ... payjp Kunden-ID ・ Card_id ... ID der Standardkarte von payjp Machen Sie einen Namen, der der von payjp gesendeten Spalte entspricht, damit er in der Datenbank registriert werden kann.
class CreditCard < ApplicationRecord
#Verband
belongs_to :user
#Validierung
validates :user_id, :customer_id, :card_id, presence: true
end
4. Erstellen Sie ein Routing.
Rails.application.routes.draw do
#devise routing
devise_for :users, controllers: {
registrations: 'users/registrations'
}
devise_scope :user do
post 'users/sign_up', to: 'users/registrations#create'
get 'addresses', to: 'users/registrations#new_address'
post 'addresses', to: 'users/registrations#create_address'
get 'creditcards', to: 'users/registrations#new_credit_card'
post 'creditcards', to: 'users/registrations#pay'
end
Ich möchte mich genauso registrieren wie eine neue Registrierung, also habe ich sie im Registrierungs-Controller zusammengestellt. Bitte beachten Sie, dass sich die Beschreibung beim Erstellen eines Kreditkartencontrollers ändert.
5. Reparieren Sie den Controller.
class Users::RegistrationsController < Devise::RegistrationsController
def create_address
@user = User.new(session["devise.regist_data"]["user"])
@address = Address.new(address_params)
unless @address.valid?
flash.now[:alert] = @address.errors.full_messages
render :new_address and return
end
@user.addresses.build(@address.attributes)
@user.save
session["devise.regist_data"]["user"].clear
sign_in(:user, @user)
redirect_to creditcards_path # Wechseln Sie zu einer neuen Aktion für die Kreditkartenregistrierung
end
def new_credit_card
card = CreditCard.where(user_id: current_user.id)
#Substituieren Sie den Hash mit der ID des angemeldeten Benutzers in der Spalte user_id der Kreditkarte auf der Karte.
end
erfordern "payjp" #Allow, um den API-Schlüssel zu erhalten.
def pay
Payjp.api_key = ENV ["PAYJP_PRIVATE_KEY"] Wir authentifizieren uns mit dem privaten Schlüssel, um den von #payjp gesendeten Wert zu erhalten.
if params['payjpToken'].blank?
render: new_credit_card Wenn das von #JS erstellte payjpToken von stammt, versuchen Sie es erneut.
else
customer = Payjp :: Customer.create (card: params ['payjpToken'],) Der erfasste Wert wird der Variablen #customer zugewiesen.
@creditcard = CreditCard.new(user_id: current_user.id, customer_id: customer.id, card_id: customer.default_card)
if @creditcard.save
redirect_to root_path
else
redirect_to action: "new_credit_card"
end
end
end
Der offizielle Artikel war leicht zu verstehen, um den Wert von pay.jp zu erhalten, also habe ich darauf verwiesen. https://pay.jp/docs/api/?ruby#payjp-api
Nachdem ich die Adresse im Assistentenformat registriert habe, leite ich zur Kreditkartenregistrierung um, also fülle ich sie über die Methode create_address aus. Die Registrierungsfunktion mit devise und die Implementierung im Assistentenformat sind ebenfalls im Artikel enthalten. Ich hoffe, Sie finden sie hilfreich. https://qiita.com/Nosuke0808/items/00a8cac860abd68e2688
Nebenbei habe ich versucht, es zu implementieren, und obwohl die Implementierung des Assistentenformats Render verwendet, dachte ich, es wäre besser, die Bildschirme mit redirect_to zu wechseln. Derzeit tritt ein Routing-Fehler auf, wenn Sie die Seite beim Registrieren der Adresse neu laden. Das Erscheinungsbild des Benutzers ist das gleiche, unabhängig davon, ob es gerendert oder umgeleitet wird. Wenn es neu geladen wird und ein Fehler auftritt, ist es unbrauchbar. Wenn jede Registrierung abgeschlossen ist, speichern Sie es in der Datenbank und leiten Sie es auf die nächste Seite um. Ich fand das gut. Ich suche nach einer Möglichkeit, um einen Fehler beim erneuten Laden mit render in Zukunft zu vermeiden, aber ich plane, ihn in redirect_to umzuschreiben.
Damit ist die Registrierung der Kreditkarte mit payjp abgeschlossen. Nach der Implementierung konnten die von js erstellten Daten nicht an pay.jp gesendet werden, und die Datenerfassung aus pay.jp verlief nicht gut, sodass die Implementierung lange dauerte. Wenn Sie es verstehen können, wird es nicht schwierig sein, also hoffe ich, dass es für diejenigen hilfreich sein wird, die von nun an payjp implementieren werden.
Verweise
https://techtechmedia.com/payjp-rails/ https://pay.jp/docs/started http://payjp-announce.hatenablog.com/entry/2017/11/10/182738 https://qiita.com/daisukeshimizu/items/c01f29f8398cc7f5c396 https://payjp.hatenablog.com/entry/2017/12/05/134933 https://pay.jp/docs/api/?ruby#payjp-api
Recommended Posts