Während der Erstellung einer Frima-App als Schulaufgabe wurde eine Cleca-Registrierungs- / Zahlungsfunktion mit payjp implementiert. Wenn Sie suchen, können Sie den Code finden, weil viele frühere Absolventen Artikel geschrieben haben, aber was machen Sie? Schließlich war es am besten, die offizielle Referenz zu lesen, damit ich beschreiben kann, was ich verstanden habe.
In diesem Artikel ** Was bedeutet es überhaupt, payjp zu verwenden? (API-Beschreibung) ** ** Wie man payjp anruft ** ** Implementierung der Creca-Registrierung ** ** Zahlungsabwicklung durch registrierte Creca **
Ich werde das oben beschriebene beschreiben.
ruby 2.6.5 rails 6.0.3
Selbst wenn ich den Code schreibe, denke ich, dass das Verständnis hier als erster Schritt wichtig ist (ich habe hier nicht viel erwähnt)
payjp ist ein ** API-Typ **. Es gibt verschiedene Erklärungen zur API, wenn Sie sie googeln, aber es fühlt sich an wie ** "Ich werde einige Softwarefunktionen nach außen bereitstellen" **.
Wenn Sie die API erfolgreich gemäß den Anweisungen der Person aufrufen, die sie vorbereitet hat, können Sie einige der Funktionen der Software in Ihrer Anwendung verwenden.
Um ein konkretes Beispiel zu geben, gibt es beispielsweise einen Google Map-Dienst. Durch die Verwendung der von Google bereitgestellten API und das Schreiben des Codes gemäß den Anweisungen ist es möglich, die Google Map in Ihrer eigenen Anwendung anzuzeigen.
** payjp ist auch eine API für Creca, mit der Sie sich registrieren und Zahlungen mit Ihrer Kreditkarte ausführen können. ** **.
Bei der Verwendung der API halte ich es persönlich für wichtig, ** den Ablauf der Vorbereitung durch die andere Partei zu verstehen **.
Betrachtet man den Implementierungsablauf nach dem Erkennen des Obigen, ** Bereiten Sie sich darauf vor, die API so aufzurufen, wie Sie es vorbereitet haben ** ** Kommunizieren und bearbeiten Sie die Bewerbung dort so, wie Sie es vorbereitet haben **
Es wird so sein. Dieses Bild ist wichtig, weil es leichter zu verstehen ist, was die nachfolgende Arbeit tut.
Daher ist es am besten, zu verstehen, wie dies mit den offiziellen Unterlagen der Person zu tun ist, die es erstellt hat. Es ist wie das Lesen der offiziellen Anweisungen.
Als Voraussetzung müssen wir uns bei payjp registrieren und den öffentlichen Testschlüssel und den privaten Testschlüssel abrufen. Dies ist der Schlüssel, der für die API-Authentifizierung erforderlich ist. Die PayJP-Seite hat diese und urteilt, dass wir "Benutzer sind, die verwenden dürfen".
Lesen Sie nach der Registrierung V1 Official Reference. Das Skript, das eingebettet werden soll, sobald Sie darauf zugreifen, wird ordnungsgemäß beschrieben. Wenn Sie etwas weiter unten lesen, wird auch beschrieben, wie Sie sich mit einem öffentlichen Schlüssel authentifizieren. Wir werden die aktuelle Beschreibung im nächsten Abschnitt sehen.
Basierend auf der obigen Aufrufmethode werde ich den eigentlichen Code an die erste Stelle setzen. Danach werde ich den Ablauf erklären.
haml:application.html.haml
!!!
%html
%head
%meta{:content => "text/html; charset=UTF-8", "http-equiv" => "Content-Type"}/
%script{src: "https://js.pay.jp/v1/", type: "text/javascript"}
= csrf_meta_tags
= csp_meta_tag
= stylesheet_link_tag 'application', media: 'all', 'data-turbolinks-track': 'reload'
= javascript_include_tag 'application'
haml:new.html.haml
.creditCreate
.creditCreate__title
%h1 Geben Sie die Kreditkarteninformationen ein
.creditForm
= form_with model: @credit, method: :post, id: "cardCreateForm" do |f|
.creditForm__numberfield
%label(for="cardnumber-input")Kartennummer
%span.creditPoint erforderlich
%br
= f.text_field :card_number, type: "text", class: 'cardnumber-input', id:'card-number', placeholder: "Nur Zahlen halber Breite", maxlength: 16
.creditslist
= image_tag "jcb.gif", class:"creditsIcon"
= image_tag "visa.gif", class:"creditsIcon"
= image_tag "master.gif", class:"creditsIcon"
= image_tag "amex.gif", class:"creditsIcon"
.creditForm__datefield
%Ablaufdatum des Etiketts
%span.creditPoint erforderlich
%br
= f.select :exp_month, [["01",1],["02",2],["03",3],["04",4],["05",5],["06",6],["07",7],["08",8],["09",9],["10",10],["11",11],["12",12]],{} , class: 'dateSelect', name: 'exp_month'
Mond
= f.select :exp_year, [["20",2020],["21",2021],["22",2022],["23",2023],["24",2024],["25",2025],["26",2026],["27",2027],["28",2028],["29",2029]],{} , class: 'dateSelect', name: 'exp_year'
Jahr
.creditForm__securityfield
%Sicherheitscode kennzeichnen
%span.creditPoint erforderlich
%br
= f.text_field :cvc, type: 'text', class: 'securityInput', id: 'cvc', placeholder: '4-stellige oder 3-stellige Nummer auf der Rückseite der Karte', maxlength: "4"
#card_token.creditForm__submitfield
= f.submit 'hinzufügen', class: 'creditsSubmit', id: 'token_submit'
payjp.js
$(function() {
$('#cardCreateForm').on('submit', function(e) {
e.preventDefault()
Payjp.setPublicKey(['PAYJP_PUBLIC_KEY']);
var card = {
number: document.getElementById("card-number").value,
exp_month: document.getElementById("credit_exp_month").value,
exp_year: document.getElementById("credit_exp_year").value,
cvc: document.getElementById("cvc").value
};
if (card.number == "" || card.cvc == "") {
alert("Es gibt eine Eingabeauslassung");
} else {
Payjp.createToken(card, function(status, response) {
if (status === 200 ) {
$("#card_number").removeAttr("name");
$("#cvc").removeAttr("name");
$("#exp_month").removeAttr("name");
$("#exp_year").removeAttr("name");
$("#card_token").append(
$('<input type="hidden" name="payjp-token">').val(response.id)
);
$('#cardCreateForm').get(0).submit();
alert("Die Registrierung war erfolgreich");
} else {
alert("Karteninformationen sind falsch");
}
});
}
});
});
credits_controller.rb
require 'payjp'
def create
Payjp.api_key = ENV['PAYJP_SECRET_KEY']
if params['payjp-token'].blank?
render :new
else
customer = Payjp::Customer.create(
email: current_user.email,
card: params['payjp-token'],
metadata: {user_id: current_user.id}
)
@credit = Credit.new(user_id: current_user.id, customer_id: customer.id, card_id: customer.default_card)
if @credit.save
redirect_to user_path(current_user.id)
else
render :new
end
end
end
Das Obige ist der Code für die Creca-Registrierung. Der Verarbeitungsablauf ist wie folgt. Ich werde entlang dieses Flusses erklären.
** ① Nehmen Sie Einstellungen mit der payjp-API vor ** ** ② Bereiten Sie sich in der js-Datei auf die Registrierung vor, indem Sie beim Absenden des Formulars den Eingabeinhalt und pajyp verknüpfen ** ** ③ Überspringen Sie die Aktion zum Controller und generieren Sie Kundendaten auf payjp. ・ Speichern Sie die mit Kundendaten verknüpfte ID in der Tabelle **
** Schauen wir uns application.html.haml an **
haml:application.html.haml
!!!
%html
%head
%meta{:content => "text/html; charset=UTF-8", "http-equiv" => "Content-Type"}/
%script{src: "https://js.pay.jp/v1/", type: "text/javascript"}
= csrf_meta_tags
= csp_meta_tag
= stylesheet_link_tag 'application', media: 'all', 'data-turbolinks-track': 'reload'
= javascript_include_tag 'application'
Der Skriptteil ist die Beschreibung, die payjp aufruft. Wie Sie anrufen, finden Sie unter Offizielle Referenz. Poste es einfach. Wenn Sie sich die Formel ansehen, veröffentlichen Sie sie einfach.
** Schauen wir uns die js-Datei an. ** **. Da die Beschreibung der Haml-Datei der Formularübermittlung entspricht, ist es einfacher zu verstehen, wenn Sie sie nebeneinander anordnen.
payjp.js
$(function() {
$('#cardCreateForm').on('submit', function(e) {
e.preventDefault()
Payjp.setPublicKey(['PAYJP_PUBLIC_KEY']);
var card = {
number: document.getElementById("card-number").value,
exp_month: document.getElementById("credit_exp_month").value,
exp_year: document.getElementById("credit_exp_year").value,
cvc: document.getElementById("cvc").value
};
if (card.number == "" || card.cvc == "") {
alert("Es gibt eine Eingabeauslassung");
} else {
Payjp.createToken(card, function(status, response) {
if (status === 200 ) {
$("#card_number").removeAttr("name");
$("#cvc").removeAttr("name");
$("#exp_month").removeAttr("name");
$("#exp_year").removeAttr("name");
$("#card_token").append(
$('<input type="hidden" name="payjp-token">').val(response.id)
);
$('#cardCreateForm').get(0).submit();
alert("Die Registrierung war erfolgreich");
} else {
alert("Karteninformationen sind falsch");
}
});
}
});
});
Ich werde es separat erklären.
payjp.js
$(function() {
$('#cardCreateForm').on('submit', function(e) {
e.preventDefault()
In jQuery wird es als das Verhalten definiert, wenn auf eine Formularschaltfläche geklickt wird.
payjp.js
Payjp.setPublicKey(['PAYJP_PUBLIC_KEY']);
Stellen Sie den registrierten und erhaltenen öffentlichen Testschlüssel so ein, dass die Authentifizierung angezeigt wird (die Sie für die Verwendung von payjp registriert haben!). Mit payjp können Sie es verwenden.
Die Methode zum Schreiben von setPublicKey wird plötzlich angezeigt, dies wird jedoch auch durch die in Official Reference angegebene Methode beschrieben. Es ist nur eine Kopie. Hab keine Angst.
payjp.js
var card = {
number: document.getElementById("card-number").value,
exp_month: document.getElementById("credit_exp_month").value,
exp_year: document.getElementById("credit_exp_year").value,
cvc: document.getElementById("cvc").value
};
Es ist eine Beschreibung von JS. Wie Sie beim Schreiben von get element by id sehen können, wird durch Angabe und Angabe der ID jedes Formularfelds jeder Eingabeinhalt definiert und einer Variablen namens card zugewiesen.
payjp.js
if (card.number == "" || card.cvc == "") {
alert("Es gibt eine Eingabeauslassung");
Es ist eine Beschreibung von js. Wenn die Nummer oder der Lebenslauf der definierten variablen Karte leer ist, wird kein Fehler akzeptiert und zurückgegeben.
payjp.js
} else {
Payjp.createToken(card, function(status, response) {
if (status === 200 ) {
$("#card_number").removeAttr("name");
$("#cvc").removeAttr("name");
$("#exp_month").removeAttr("name");
$("#exp_year").removeAttr("name");
$("#card_token").append(
$('<input type="hidden" name="payjp-token">').val(response.id)
);
$('#cardCreateForm').get(0).submit();
alert("Die Registrierung war erfolgreich");
} else {
alert("Karteninformationen sind falsch");
}
});
}
});
});
Generieren Sie Token basierend auf Karteninformationen. Dies ist auch [Offizielle Referenz der payjp-API](https://pay.jp/docs/api/#%E3%83%88%E3%83%BC%E3%82%AF%E3%83%B3%E3% Bitte lesen Sie 82% 92% E4% BD% 9C% E6% 88% 90).
Wenn Sie den Teil zum Generieren von Token lesen, sollten Sie auf der rechten Seite eine Erläuterung der Generierung von Token und die tatsächliche Beschreibungsmethode in Textform sehen.
Plötzlich kam die Beschreibung "Payjp.create ~" heraus, aber dies ist nur die Referenz "Wenn Sie so schreiben, können Sie es tun". Wenn Sie es also richtig lesen, können Sie es einfach tun. Da geschrieben steht, dass hier 4 Werte wie die Zahl übergeben werden müssen, habe ich zuvor 4 Werte in der Kartenvariablen definiert. In der Reihenfolge wird es definiert, weil es hier benötigt wird.
if status === 200 ist der Statuswert, der von payjp zurückgegeben wird, wenn die Karteninformationen gültig sind und der Token korrekt generiert wurde. Wenn Sie daher einen Fehler mit else zurückgeben, wird angezeigt, dass die Registrierung nicht erfolgreich war.
Schauen wir uns das von hier aus genauer an.
payjp.js
$("#card_number").removeAttr("name");
$("#cvc").removeAttr("name");
$("#exp_month").removeAttr("name");
$("#exp_year").removeAttr("name");
Es ist eine Beschreibung von JS und jQuery. Wenn die Karte gültig ist, wird der in jedes Formular eingegebene Wert aus Sicherheitsgründen entfernt (der Vorgang besteht darin, das Namensattribut des durch id angegebenen Formulars zu entfernen).
payjp.js
$("#card_token").append(
$('<input type="hidden" name="payjp-token">').val(response.id)
);
$('#cardCreateForm').get(0).submit();
alert("Die Registrierung war erfolgreich");
Der Vorgang der Rückgabe der von Payjp zurückgegebenen Daten (response.id), wenn die Karte für das Formular gültig ist, wird durch Anhängen ausgeführt. Durch Angabe von type = hidden werden die Daten an das Formular gesendet, obwohl sie für den Benutzer nicht sichtbar sind.
Darüber hinaus werden durch Senden die von Payjp zurückgegebenen Daten anschließend an den Controller gesendet und die Erstellungsaktion ausgeführt.
Dies ist eine Beschreibung für das erfolgreiche Senden von Daten an den Controller. Damit können Sie als nächstes die Verarbeitung des Controllers sehen.
credits_controller.rb
require 'payjp'
def create
Payjp.api_key = ENV['PAYJP_SECRET_KEY']
if params['payjp-token'].blank?
render :new
else
customer = Payjp::Customer.create(
email: current_user.email,
card: params['payjp-token'],
metadata: {user_id: current_user.id}
)
@credit = Credit.new(user_id: current_user.id, customer_id: customer.id, card_id: customer.default_card)
if @credit.save
redirect_to user_path(current_user.id)
else
render :new
end
end
end
Der Prozess kann bisher gut durchgeführt werden, und schließlich werden die Daten von der Steuerung erstellt. Gehen wir Schritt für Schritt.
credits_controller.rb
require 'payjp'
def create
Payjp.api_key = ENV['PAYJP_SECRET_KEY']
if params['payjp-token'].blank?
render :new
Ermöglichen Sie zunächst die Verwendung von payjp mit require'payjp '. Geben Sie als Nächstes SECRET_KEY an, um anzugeben, dass dies der Benutzer ist, der das Recht zur Verwendung von payjp (aufgelistet unter Verwendung von Umgebungsvariablen) angenommen hat.
Darüber hinaus sind die Daten, die gesendet wurden, als die Antwort früher normal war, params ['payjp-token']. Wenn dies der Fall ist, wird der Prozess beschrieben, der ohne Verarbeitung gerendert werden soll.
credits_controller.rb
def create
else
customer = Payjp::Customer.create(
email: current_user.email,
card: params['payjp-token'],
metadata: {user_id: current_user.id} #Dies ist optional
)
Hier werden Payjp-Kundendaten erstellt und dem variablen Kunden zugeordnet. Plötzlich kam diese Art des Schreibens heraus. Wie ich schon oft sagte, [Offizielle Referenz](https://pay.jp/docs/api/#%E9%A1%A7%E5%AE%A2%E3%82%92%E4%BD%9C% Wenn Sie sich E6% 88% 90) ansehen, wird alles gekauft.
Da wir diesmal Kundendaten erstellen möchten, sehen Sie sich die Spalte Kundendaten in der Referenz an. Dann sollten die Beschreibungsmethode von Payjp :: Customer.create und ihre Argumente geschrieben werden.
Sie können leicht sehen, was Sie eingeben müssen, indem Sie sich den Inhalt der Argumente ansehen. ** Auf der Argumentkarte wird beispielsweise angegeben, dass die Token-ID angegeben werden soll, damit Sie sehen können, dass Sie die Token-ID festlegen sollten, die Sie zuvor gesendet haben. ** **.
credits_controller.rb
def create
@credit = Credit.new(user_id: current_user.id, customer_id: customer.id, card_id: customer.default_card)
if @credit.save
redirect_to user_path(current_user.id)
else
render :new
end
end
Von hier aus werden wir über die Tabellenverarbeitung auf der Rails-Seite sprechen. Sie können die Antwortdaten von Payjp-Kunden auch anhand der obigen Referenz überprüfen. Da die zuvor erstellten Payjp-Kundendaten der Variablen customer zugewiesen wurden, können die Antwortdaten in der Tabelle gespeichert werden, indem sie mit customer.id usw. angegeben werden.
(Da es rechtlich nicht möglich ist, Creca-Daten in Ihrer eigenen Tabelle zu speichern, lassen Sie die payjp-Seite die Daten selbst speichern und speichern Sie die Daten customer_id und card in der Tabelle als Link zum Aufrufen dieser Daten. Deshalb.
Es war ein ziemlich langer Satz, also werde ich ihn einfach registrieren, aber das Wichtigste ist, den Fluss zu verstehen und die Referenz zu lesen, und ich denke, das ist alles.
Welche Beschreibung ist für den Zahlungsfluss auf der Grundlage dieser registrierten Daten für die Zahlung beim Lesen der Referenz erforderlich? Was ist für das Argument anzugeben? Ich konnte es ziemlich einfach implementieren, indem ich es mir ansah. (Wie Sie an der Tatsache erkennen können, dass es früher mit der Tabelle verknüpft war, ist es nicht so schwer vorstellbar, dass Sie die für die Zahlung erforderlichen Kartendaten aufrufen und als Argument übergeben sollten.)
Ich war jedoch nicht mit der API vertraut, daher wurde sie mit großer Hilfe aus Qiitas Artikel implementiert. Die Schlussfolgerung ** Die Formel ist die stärkste **, und ich werde sie aufzeichnen, weil es eine Erfahrung war, dass ich dieses Wort mit einem echten Gefühl verstehen konnte.
Recommended Posts