Erstellen Sie ein Modell

Erstellen Sie ein Kartenmodell.

terminal

$ rails g model card

Was Sie als von PAY.JP empfangene Daten speichern müssen, ist die Spalte zum Speichern der "Kunden-ID" und der "Karten-ID". Mit diesen beiden können Sie die meisten Daten einbringen. Der folgende Code ist auch mit dem "Benutzermodell" verknüpft.

migrationfile

class CreateCards < ActiveRecord::Migration[6.0]
  def change
    create_table :cards do |t|
      t.reference :user, null: false
      t.string :customer_id, null: false
      t.string :card_id, null: false
      t.timestamps
    end
  end
end

Vergessen Sie nicht zu migrieren.

terminal

$ rails db:migrate

JS-Datei schreiben

Dies ist fast eine vollständige Kopie des offiziellen Leitfadens (https://pay.jp/docs/payjs-guidance). Offiziell benutze ich onclick, um die Token-Generierung auszulösen, aber in meinem Fall hat es nicht funktioniert, also habe ich AddEventListener verwendet. Zeigen Sie vorerst das Token an und überprüfen Sie den Vorgang.

card_form.js

//Wird ausgeführt, wenn das Laden des DOM abgeschlossen ist
document.addEventListener('DOMContentLoaded', () => {
  //Registrieren Sie den öffentlichen Schlüssel und erhalten Sie das Startobjekt
  var payjp = Payjp('pk_test_hogehoge')

  //Ruft die Elemente ab. Wenn Sie mehrere Formulare auf der Seite vorbereiten möchten, erhalten Sie mehrere
  var elements = payjp.elements()

  // element(Formulareinheit eingeben)Generieren
  var numberElement = elements.create('cardNumber', {style: style})
  var expiryElement = elements.create('cardExpiry', {style: style})
  var cvcElement = elements.create('cardCvc', {style: style})
  //Platziere das Element auf DOM
  numberElement.mount('#number-form')
  expiryElement.mount('#expiry-form')
  cvcElement.mount('#cvc-form')
  
  //Bereiten Sie eine Funktion vor, um beim Drücken der Taste einen Token zu generieren
  create_token.addEventListener("click", function() {
    payjp.createToken(numberElement).then(function(r) {
      document.querySelector('#token').innerText = r.error ? r.error.message : r.id
    })
  });
})

Schreiben Sie eine Ansichtsdatei

Vorerst werde ich eine Mindestbeschreibung erstellen, um das Formular anzuzeigen. Lassen Sie es uns später nach Ihren Wünschen umschreiben.

haml:_card_form.html.haml

:css
  .Payjs__outer {
    border: solid 1px;
  }

-#Eigentlich Anwendung.html.Es ist besser, es in den Header-Teil wie haml zu schreiben.
= javascript_include_tag 'https://js.pay.jp/v2/pay.js'

.Payjs
  .Payjs__outer{id: "number-form"}
  .Payjs__outer{id: "expiry-form"}
  .Payjs__outer{id: "cvc-form"}
  %button{id: "create_token"}
Token-Erstellung
  %span#token
Zeichen:

Funktionsprüfung

Bisher möchte ich diesmal beim nächsten Mal die Implementierung der Kartenregistrierungsfunktion zusammenfassen.

Referenz

Immerhin sind die offizielle API und der Leitfaden am stärksten. Wenn Sie jedoch nicht daran gewöhnt sind, es zu lesen, können Sie ein Gefühl dafür bekommen, während Sie sich das eigentliche Implementierungsverfahren für Qiita usw. ansehen.

PAY.JP API-Referenz https://pay.jp/docs/api/

PAY.JP API Benutzerhandbuch | PAY.JP https://pay.jp/docs/started
Der offizielle Blog ist ebenfalls hilfreich, aber beachten Sie, dass die Informationen oft alt und v1-konform sind.

Sehr einfache Verwendung von PAY.JP (Ruby Edition) --PAY.JP Engineering Blog https://payjp.hatenablog.com/entry/2017/11/21/191916
Andere Artikel, auf die ich mich bezog

Payjp.js V2 mit Rails Implementierung der Kreditkartenregistrierungsfunktion Flima App --Qiita https://qiita.com/ta9301/items/6b736390c49c3f40edb6

[HowTo] Von der Implementierung der Produktkauffunktion mit Pay.jp bis zur Einstellung nach dem Produktkauf https://qiita.com/Tatsu88/items/eb420e372077939a4627