Überblick

Dies ist ein Memorandum zur Implementierung der Funktion zum Registrieren / Ändern / Löschen von Karten in der PAY.JP-API. Dieses Mal werden wir den Vorgang vom erworbenen Token bis zur Registrierung der Karteninformationen zusammenfassen.

Der Kürze halber wird nur der für die Implementierung erforderliche Mindestcode geschrieben.

Wenn Sie Fehler haben, würden wir uns freuen, wenn Sie eine Bearbeitung anfordern könnten.

Übrigens hat payjp.js viele Artikel über v1, aber es sollte beachtet werden, dass es viele Teile gibt, die sich von der aktuellen v2 unterscheiden.

Umgebung

# OS Version
ProductName:	Mac OS X
ProductVersion:	10.15.7
BuildVersion:	19H2

# Ruby Version
ruby:           2.6.5p114
Rails:          6.0.3.3

Voraussetzungen

Wir haben sogar Token-Informationen mithilfe der PAY.JP-API erfasst. Siehe den Artikel Letztes Mal.

Verfahren

Ansicht bearbeiten

Fügen Sie eine Fehlermeldung oder ein verstecktes Formular in JS hinzu.

`haml:_card_form.html.haml`


.CardForm
Kartennummer
  .CardForm__outer{id: "number-form"}
Haltbarkeitsdatum
  .CardForm__outer{id: "expiry-form"}
Sicherheitscode
  .CardForm__outer{id: "cvc-form"}
  #message    -#Ich erhalte hier eine Fehlermeldung
  = form_with model: @card, id: "card_form", local: true do |form|
    #card_token   -#Verstecktes Formular wird hier hinzugefügt
    = form.submit "Karte registrieren", class:"CardForm__button", id: "create_card"

Controller bearbeiten

Verwenden Sie das Token, um Kundeninformationen aus der PAY.JP-API zu erstellen und in der Kartentabelle zu speichern.

Da es auf die Mindestbeschreibung reduziert wurde, ist es tatsächlich besser, eine bedingte Verzweigung zu erstellen.

`card_controller.rb`


class CardController < ApplicationController
  require 'payjp'
  
  def new
  end
  
  def create
    Payjp.api_key = ENV['PAYJP_SECRET_KEY']  #API initialisieren
    customer = Payjp::Customer.create(card: params['payjp_token'])  #Erstellen Sie Kundendaten aus der Kunden-ID
    @card = Card.new(
      user_id: current_user.id,          #Verknüpft mit Benutzer-ID
      customer_id: customer.id,          #Kunden-ID speichern
      card_id: customer.default_card     #Speichern Sie die Kundenkarteninformationen
    )
    @card.save
  end
end

JS-Datei bearbeiten

Wenn Sie auf die Schaltfläche Karteninformationen senden klicken, wird mit dem Token ein verstecktes Formular erstellt und gesendet, das Ihre Kunden- und Karten-ID enthält.

`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_card.addEventListener("click", function(e) {
    e.preventDefault();
    payjp.createToken(numberElement).then(function(r) {
      if (r.error) {  //Registrierungsfehler
        document.querySelector('#message').innerText = r.error.message
        regist_card.prop('disabled', false)
      } else {
        $("#card_token").append(  // #card_Fügen Sie dem Token-Teil ein verstecktes Formular hinzu
          `<input type="hidden" name="payjp_token" value=${r.id}>
          <input type="hidden" name="card_token" value=${r.card.id}>`
        );
        $("#card_form")[0].submit();  //Formular abschicken
      }
    })
  });
});

Referenz

Immerhin sind die offizielle API und der Leitfaden am stärksten. Bevor Sie sich jedoch an das Lesen gewöhnen, können Sie sich ein Bild davon machen, 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

Verwenden der PAY.JP-API mit Rails ~ Kartenregistrierung ~ (payjp.js v2)