** Edelstein verwenden ** devise PAY.JP for Ruby Gon gem
Es scheint jedoch gesetzlich verboten zu sein, dass Betreiber von EU-Websites Kartennummern haben. Daher können solche Informationen nicht in der Datenbank registriert werden. Stattdessen müssen Sie Ihre PayJP-ID registrieren.
** Kartenregistrierungsablauf ** ・ Der Endbenutzer gibt die Kartennummer usw. ein und klickt auf Senden ・ Daten werden an payjp gesendet und der Kartentoken zurückgegeben. ・ Erstellen Sie einen Kunden (Eigentümer) aus dem zurückgegebenen Karten-Token ・ Registrieren Sie die Kunden-ID und die Karten-ID in der Datenbank anhand der erstellten Kundeninformationen
In meinem Fall ist der Verein
user has_one :card
card belongs_to :user
Kartentisch
migrate/***create_cards.rb
t.references :user, foreign_key: true,index:{unique: true}
t.string :customer_id, null: false
t.string :card_id, null: false
Fügen wir nun der Gemfile- und Bundle-Installation Folgendes hinzu.
Gemfile
gem 'payjp'
gem 'gon'
** Hier ist Gon ** Ein Juwel, mit dem Sie Ruby-Variablen an JQuery (Javascript) übergeben können.
** Es mag falsch sein, aber ** Ich denke, dass CSS und JQuery (Javascript) vom Verifikationstool des Browsers gesehen werden können. Daher halte ich es für eine gute Idee, den Schlüssel direkt in JQuery (Javascript) einzubetten. Ein Testschlüssel mag in Ordnung sein, aber Sie können keinen Testschlüssel in der Produktion verwenden. Es gibt auch eine Möglichkeit, es in credentials.yml zu schreiben, aber da persönliche Schlüssel persönlich sind, halte ich es für wünschenswert, sie einzeln zu verwalten.
Nach Abschluss der Installation können Sie gon verwenden. von application.html.haml Oben hinzugefügt javascript_include_tag
ruby:app/views/layouts/application.html.haml
= include_gon
= javascript_include_tag 'application'
app/controllers/card_controller.rb
def new
gon.api_key = ENV["PAYJP_PUBLIC_KEY"]
end
Weil nicht auf jeder Seite kartenbezogene js geladen werden müssen Diesmal Ich habe folgendes direkt in card / new.html.haml geschrieben.
ruby:app/views/card/new.html.haml
:javascript
let payjp = Payjp(gon.api_key);
Nachdem die Umgebungsvariablen von JQuery gelesen wurden, scheint der Schlüssel nicht verfügbar zu sein. Wenn Sie mitentwickeln, registrieren Sie jede Person, die es benötigt, in payjp und schreiben Sie es in die Umgebungsvariable.
Da die neue Aktion oben ausgeführt wurde, erstellen Sie ein Registrierungsformular.
javascript:app/views/card/new.html.haml
= form_with url: card_index_path,local:true,id:"cardNew__form" do |f| //card_index_Pfad ist der Pfad zur Erstellungsaktion des Kartencontrollers
%input#cardNew__form--inputHidden{type:"hidden",name:"payjp-token"}
#cardNew__form--input
#cardNew__form--errMessage
= f.submit "zu registrieren",id:"cardNew__form--submit"
%script{src: "https://js.pay.jp/v2/pay.js", type: "text/javascript"}
:javascript //Hier ist JQuery.
let payjp = Payjp(gon.api_key); //Das ist gon.
let elements = payjp.elements();
let cardElement = elements.create('card');
cardElement.mount('#cardNew__form--input');
//Bis zu diesem Punkt wurden die von PAYJP vorbereiteten Eingabefelder erstellt. Ein Punkt der Karte ist süß, also werde ich sie so verwenden, wie sie ist^^
$(".cardNew").on("click","#cardNew__form--submit",
function(e){
e.preventDefault();
payjp.createToken(cardElement).then(function(response){ //Senden Sie hier die Karteninformationen an payjp und erhalten Sie den Karten-Token.
if(response.error){
$('#cardNew__form--errMessage').text(response.error.message);
}else{
$("#cardNew__form--inputHidden").attr("value",response.id); //response.id ist ein Kartenmarker. Hier geben Sie den Namen ein="payjp-token"Geben Sie den Wert an.
$("#cardNew__form").submit();
}
});
}
);
Kartennummer: 424242424242 ↑ Das Ablaufdatum liegt in der Zukunft, und CVC scheint alles zu sein. Testkarte
Drücken Sie nun auf Senden und der Token wird an die Erstellungsaktion gesendet. card_index_path ist der Pfad zur Erstellungsaktion. Wenn Sie es nicht gut sehen, passen Sie es bitte mit CSS an.
app/controllers/card_controller.rb
def create
if params["payjp-token"].blank?
render :new
else
Payjp.api_key = ENV["PAYJP_SECRET_KEY"]
customer = Payjp::Customer.create( #Erstellen Sie hier einen Kunden, der dem Karten-Token zugeordnet ist.
card: params["payjp-token"]
)
@card = Card.new(
user_id: current_user.id,
customer_id: customer.id, #Dies ist die ID des Kunden.
card_id: customer.default_card #Dies ist die ID der dem Kunden zugeordneten Karte.
)
if @card.save
redirect_to new_card_path
else
render :new
end
end
end
Ich denke, dass Sie die Karte bis zu diesem Zeitpunkt in der DB registrieren können. Wenn Sie es einfacher machen möchten, gehen Sie zu hier.
=form_with url: card_index_path,local:true,id:"new_form" do |f|
%script{src:"https://checkout.pay.jp/",class:"payjp-button","data-key":"#{@api_key}"}
Kopieren Sie den öffentlichen Datenschlüssel und fügen Sie ihn in Ihren öffentlichen Schlüssel ein Erstellen Sie @ape_key mit neuem Controller. URL ist die gleiche wie zuvor. id ist beliebig. Ich habe den Unterricht nicht ausprobiert, also weiß ich es nicht. Was den Controller betrifft, so ist der neue die Gon-Spezifikation
@api_key = ENV["PAYJP_PUBLIC_KEY"]
Ich denke, es ist in Ordnung, wenn Sie es einstellen. Es scheint ein Token als Wert des Parameters payjp-token zu senden. Allein damit scheint ein qualitativ hochwertiger Karteneingabebildschirm abgeschlossen zu sein. Es ist wunderbar.
Referenzprimärquelle PAY.JP Announcement payjp.js v2 Referenz payjp.js v2 Guide Kunden erstellen
Referenzblog [Rails] Ich habe das Verfahren zur Implementierung der Zahlungsfunktion mit PAYJP kurz zusammengefasst Implementieren von Funktionen zum Registrieren und Löschen von Kreditkarten mit Payjp (Rails)
Als Fluss
Klicken Sie zum Kaufen auf der Produktdetailseite Bestätigen Sie den Kauf auf der Kaufbestätigungsseite Kartenzahlung Erstellen Sie eine Zahlungs-ID und wer sie gekauft hat, in der Zahlungstabelle Reduzieren Sie das Bestandsfeld in der Artikeltabelle und aktualisieren Sie es
Verband
item has_many :payments
payment belogs_to :item
Zahlungstabelle
***create_payments.rb
t.string :charge_id, null: false
t.references :user, foreign_key: true
t.references :item, foreign_key: true
t.integer :quantity, null: false
haml:views/payments/new.html.haml
= form_with url:item_payments_path,local:true,id:"new_form" do |f|
= f.number_field :quantity
= f.submit "Kaufen" #Ich habe Angst vor etwas, deshalb versuche ich, Daten wie den Geldbetrag nicht zu überspringen. Nur die Anzahl der Einkäufe.
payments_controller.rb
def create
item = Item.find(params[:item_id]) #Verschachteln Sie das Routing so, dass es die ID des Elements enthält.
item.stock -= params[:quantity].to_i #Subtrahieren Sie die Anzahl der Einkäufe vom Artikelbestand. Alles was Sie tun müssen, ist zu aktualisieren
payment = Payment.new(payment_params)
Payjp.api_key = ENV["PAYJP_SECRET_KEY"]
charge = Payjp::Charge.create( #Machen Sie es sich hier gemütlich.
amount: item.price.to_i * params[:quantity].to_i, #Abrechnungsbetrag
customer: Card.find_by(user_id: current_user.id).customer_id, #Kunde
currency: 'jpy' #Japanische YEN
)
payment.charge_id = charge.id #Ich habe die Zahlungs-ID in die zuvor generierte Zahlungsinstanz eingefügt. Keine Notwendigkeit zu trennen. wie es Dir gefällt^^
if payment.save && item.update(stock: item.stock)
redirect_to root_path
else
render "new"
end
end
private
def payment_params
params.permit(
:item_id,
:quantity,
).merge(user_id: current_user.id)
end
Es ist so. Verschiedene Teile wurden aus Gründen der Klarheit weggelassen. Wenn Sie die Verschachtelung des Routings nicht kennen
config/routes.rb
resources :items do
resources :payments,only: [:new,:create]
end
Es ist so.
Ich denke, das wird wahrscheinlich funktionieren.
Referenzprimärquelle payjp.js API-Handbuch [PAY.JP-Ladeobjekt](https://pay.jp/docs/api/#charge%E3%82%AA%E3%83%96%E3%82%B8%E3%82%A7%E3%82 % AF% E3% 83% 88) ↑ Ich habe es weggelassen, aber für diejenigen, die die letzten 4 Ziffern der Karte oder VIZA anzeigen möchten (bitte Retrieve verwenden)
Referenzblog Einführung eines Zahlungssystems mit Payjp mit Rails
In meinem Fall Routing
config/routes.rb
resources :card,only: [:new,:create,:destroy]
card_index POST /card(.:format) card#create
new_card GET /card/new(.:format) card#new
card DELETE /card/:id(.:format) card#destroy
Also habe ich die obige Ansicht geändert. Was sich geändert hat, ist von wenn nach sonst oben Es ist nur das Definitionsurteil von Gon of JQuery.
view/card/new.html.haml
- if current_user.card
#cardNew__form
#cardNew__form--type= @card.brand.upcase
#cardNew__form--num= "**** **** **** #{@card.last4}"
#cardNew__form--name= @card.name
=link_to "Löschen","/card/#{current_user.card.id}"
- else
= form_with url: card_index_path,local:true,id:"cardNew__form" do |f|
%input#cardNew__form--inputHidden{type:"hidden",name:"payjp-token"}
#cardNew__form--input
#cardNew__form--errMessage
= f.submit "zu registrieren",id:"cardNew__form--submit"
%script{src: "https://js.pay.jp/v2/pay.js", type: "text/javascript"}
:javascript
if(typeof gon != 'undefined'){
const style = {
base: {
backgroundColor:'#ffffff',
'::placeholder': {
color: '#bbbbbb',
}
},
invalid: {
color: 'red',
}
}
let payjp = Payjp(gon.api_key);
let elements = payjp.elements();
let cardElement = elements.create('card', {style: style});
cardElement.mount('#cardNew__form--input');
$(".cardNew").on("click","#cardNew__form--submit",
function(e){
e.preventDefault();
payjp.createToken(cardElement).then(function(response){
if(response.error){
$('#cardNew__form--errMessage').text(response.error.message);
}else{
$("#cardNew__form--inputHidden").attr("value",response.id);
$("#cardNew__form").submit();
}
});
}
);
}
card_controller.rb
def new
if current_user.card
Payjp.api_key = ENV["PAYJP_SECRET_KEY"]
customer = Payjp::Customer.retrieve(current_user.card.customer_id)
@card = customer.cards.retrieve(current_user.card.card_id)
else
gon.api_key = ENV["PAYJP_PUBLIC_KEY"]
end
end
Recommended Posts