[JAVA] Payjp.js V2 mit Rails Implementierung der Kreditkartenregistrierungsfunktion Flima App
Überblick
Da es keinen Artikel zur anpassbaren v2-Implementierung mit payjp.js gab Ich glaube, ich habe es geteilt. Es gab viele Implementierungsartikel in Version 1, aber ...
payjp.js v2 in der Beta bereitgestellt
In Bezug auf payjp.js, das eine Tokenisierungsfunktion für Karteninformationen bietet, haben wir die Betaversion von payjp.js> v2 bereitgestellt, die mit dem neuesten PCI-DSS kompatibel ist.
Was ist payjp.js v2?
payjp.js v2 ist ein Karteninformations-Eingabeformular> Generierungsbibliothek, die zusätzlich zur herkömmlichen Funktion zur Tokenisierung von Karteninformationen dem neuesten PCI-DSS entspricht.
Siehe Referenzen und Anleitungen für Funktionen und Details. Wir haben auch mehrere Demos.
Antrag auf Migration
In Bezug auf die aktuelle Version von payjp.js v1 planen wir, die neue Verwendung gleichzeitig mit dieser Version von v2 (geplant für Anfang April) zu verwerfen.
Wir entschuldigen uns für die Unannehmlichkeiten, die Mitgliedsgeschäften entstehen, die bereits Version 1 verwenden. Migrieren Sie jedoch bitte zu payjp.js Version 2.
In Bezug auf das Migrationsverfahren von Version 1 werden wir erneut einen Artikel in diesem Blog veröffentlichen. Bitte beachten Sie, dass wir Sie über den detaillierten Migrationsplan informieren.
Vielen Dank für Ihre fortgesetzte Unterstützung von PAY.JP. Referenz: PAY.JP Blog
Da wurde gesagt, dass dies von nun an sogar ein wenig empfohlen wird Ich habe es aufgeschrieben, weil ich es in der Hoffnung umsetzen konnte, allen zu helfen. PAY.JP API-Benutzerhandbuch | PAY.JP Ich denke, dass es ziemlich leicht zu verstehen ist, wenn Sie es nach dem Sehen implementieren.
↑ Da ich ein junger Ingenieur bin, werde ich alle Fehler korrigieren. Bitte geben Sie uns Ihre Meinung: point_up:
Versionsinformation
- ruby 2.6.5
- Rails 6.0.3.2
Inhaltsverzeichnis
- Erstellen Sie ein Payjp-Konto
- Überprüfen Sie die API
- Installieren Sie Payjp und dotenv Gem
- Ermöglichen Sie das Lesen von payjp.js
- Erstellen Sie eine Tabelle zum Speichern
- Erstellen Sie einen Controller
- Erstellen Sie einen Kartenregistrierungsbildschirm
- Erstellen Sie eine Javascript-Datei
- Erstellen Sie eine Route
- Registrieren Sie Ihre Karte
1. Erstellen Sie ein Payjp-Konto
Erstellen Sie ein Konto auf der Website Payjp.
2. Überprüfen Sie die API
Überprüfen Sie nach dem Anmelden die API im Dashboard.
Da wir diesmal im Testmodus implementieren, werden wir ** privaten Testschlüssel ** und ** öffentlichen Schlüssel testen ** verwenden.
3. Installieren Sie Payjp und dotenv Gem
Installieren Sie das Juwel payjp
Gemfile
gem 'payjp'
gem 'dotenv'
Einmal in der Gemfile beschrieben, wird es installiert.
terminal
$ bundle install
Erstellen Sie .env mit dem Touch-Befehl
terminal
$cd App-Verzeichnis erstellt
$ touch .env
Schreiben Sie die API nach der Erstellung in .env. Wenn Sie hier "pk_test_000000000000000000000000" schreiben, funktioniert dies möglicherweise nicht in der Produktionsumgebung.
PAYJP_PRIVATE_KEY=pk_test_000000000000000000000000
PAYJP_SECRET_KEY=sk_test_000000000000000000000000
Wenn Sie Git verwenden, schreiben Sie Folgendes und pushen Sie nicht in ein Remote-Repository!
.gitnore
.env
4. Ermöglichen Sie das Lesen von payjp.js
** ★ Beschrieben in Haml Klicken Sie hier, um zu installieren, wie Haml installiert wird ↓ ** Haml mit Rails vorstellen! | Qiita
Fügen Sie `% script {src:" https://js.pay.jp/ "hinzu und geben Sie:" text / javascript "} wie folgt ein. ``
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"} #Beschreiben Sie dieses Skript
= 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. Erstellen Sie eine Tabelle zum Speichern
Erstellen Sie mit dem folgenden Befehl eine Datenbanktabelle zum Speichern von PayJP-Daten
terminal
$ rails g model Card user_id:integer customer_id:string card_id:string
Wenn Sie einen Befehl erteilen, wird in db eine Migrationsdatei erstellt. Überprüfen Sie daher den Inhalt
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
Machen Sie eine Migration.
terminal
$ rails db:migrate
Da es verboten ist, die Karteninformationen selbst in der Datenbank zu speichern, Informationen erhalten Sie, indem Sie die in payjp gespeicherten Informationen mit der Kunden- oder Karten-ID aufrufen.
6. Erstellen Sie einen Controller
Erstellen Sie einen Controller mit dem folgenden Befehl
terminal
$ rails g controller card
pp/controllers/card_controller.rb
class CardsController < ApplicationController
require 'payjp' #Jetzt können Sie die pajp-Methode verwenden
def new
card = Card.where(user_id: current_user.id)
redirect_to action: "show" if card.exists?
end
def pay #Erstellen Sie eine Datenbank für payjp und Card
Payjp.api_key = ENV["PAYJP_SECRET_KEY"]
if params['payjp_token'].blank?
redirect_to action: "new"
else
customer = Payjp::Customer.create(
description: 'Registrierungstest', #OK ohne
email: current_user.email, #OK ohne
card: params['payjp_token'],
metadata: {user_id: current_user.id}
) #Nur für den Fall, Benutzer in Metadaten_Sie müssen die ID nicht eingeben
@card = Card.new( #Kartentabellendaten erstellen
user_id: current_user.id, #Hier aktuell_user.Da es einen Ausweis gibt, möchte ich mich im Voraus anmelden
customer_id: customer.id, #Kunde oben definiert
card_id: customer.default_card # .default_Bei Verwendung einer Karte werden die mit der Kundendefinition verknüpften Karteninformationen abgerufen. Wenn dies null ist, wird die Karte des oben genannten Kunden angezeigt: params['payjp_token']Wird oft nicht gelesen
)
if @card.save
redirect_to action: "show"
else
redirect_to action: "pay"
end
end
end
def delete #Löschen Sie die Payjp- und Kartendatenbank
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 #Senden Sie an die Karte Daten payjp und rufen Sie Informationen ab
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. Erstellen Sie einen Kartenregistrierungsbildschirm
** Hier ist v2, was sich ein wenig von v1 unterscheidet! !! !! !! ** ** **
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 "zu registrieren", class:"btn", id: "info_submit"
Wenn Sie allein pay.js in Javascript schreiben, werden die folgenden Elemente in der asynchronen Kommunikation angezeigt!
8. Erstellen Sie eine Javascript-Datei
Halten Sie [JQuery in Rails] bereit (https://qiita.com/ngron/items/95846bd630a723e00038) und schreiben Sie Folgendes (Bevor Sie js schreiben, payjp.js v2 Guide und payjp.js v2 Reference Es ist einfacher zu verstehen, wenn Sie Folgendes lesen und dann die folgende Beschreibung eingeben: point_up :)
app/assets/javascripts/pay.js
$(window).bind("load", function(){
if (document.URL.match(/cards/)){
//↑ Zu URl/crads/Feuer nur wenn es gibt
var payjp = Payjp('pk_test_*************0')
//↑ Registrieren Sie den öffentlichen Schlüssel und holen Sie sich das Startobjekt
var elements = payjp.elements();
//↑ Elemente abrufen.
var numberElement = elements.create('cardNumber');
var expiryElement = elements.create('cardExpiry');
var cvcElement = elements.create('cardCvc');
//↑ Element generieren
numberElement.mount('#number-form');
expiryElement.mount('#expiry-form');
cvcElement.mount('#cvc-form');
//↑ Element auf DOM platzieren
var submit_btn = $("#info_submit");
submit_btn.click(function (e) {
e.preventDefault();
payjp.createToken(numberElement).then(function (response) {
//↑↑ Erstellen Sie hier einen Token//Übergeben Sie ein beliebiges Element als Argument von createToken
if (response.error) { //Wenn die Kommunikation fehlschlägt
alert(response.error.message)
regist_card.prop('disabled', false)
} else {
alert("Die Registrierung wurde abgeschlossen");
$("#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();
//↑↑ Hier eingeben='hidden'Und setzen Sie den Token auf Senden
$("#card_number").removeAttr("name");
$("#cvc-from").removeAttr("name");
$("#exp_month").removeAttr("name");
$("#exp_year").removeAttr("name");
//↑↑ Hier wird die Beschreibung mit removeAttr gelöscht
};
});
});
}
});
8. Bestätigungs- / Löschbildschirm erstellen
Wenn Sie sich registrieren können, wird die Aktion zum Anzeigen der Kartennummer mit einer Umleitung verschoben. Bereiten Sie einen Bestätigungs- / Löschbildschirm vor.
haml:app/cards/show.html.haml
.creditShow
%Etikett Registrierung Kreditkarteninformationen
%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: "" }
%Schaltfläche löschen
9. Erstellen Sie eine Route
Dies hängt von den Spezifikationen der Anwendung ab. Bitte vereinbaren Sie dies, da wir die Beschreibung nach der Implementierung weitergeben.
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
Nachdem die Beschreibung der Route und der MVC vollständig ist, können Sie sich registrieren.
10. Registrieren Sie Ihre Karte
Registrierung im Testmodus payjp test card Hier beschrieben
- Kartennummer: 4242424242424242
- Ablaufdatum: 20.12
- CVC: 123
- Kartenname: YUI ARAGAKI
Bitte registrieren Sie sich unter http: // localhost: 3000 / maps / new /: entspannt: Wenn Sie sich registrieren können, klicken Sie hier → Dashboard-Kunden Wird sich in widerspiegeln!
Referenzartikel
PAY.JP API Implementieren von Funktionen zum Registrieren und Löschen von Kreditkarten mit Payjp (Rails) | Qiita So aktivieren Sie jQuery in Rails ｜ Qiita Implementierung der Kauffunktion mit Payjp in Rails ｜ Qiita [Rails] Ich habe das Verfahren zur Implementierung der Zahlungsfunktion mit PAYJP kurz zusammengefasst
Recommended Posts