[JAVA] [Rails] Fehlerbehebung beim Generieren von Token mit PAYJP

Während Sie das Programmieren lernen, bleibt das, was Sie notieren möchten, auf eine Weise erhalten, die für Sie leicht verständlich ist.

Ich möchte PAYJP vorstellen und ein Zahlungssystem implementieren!

Hier ist das Ziel, das ich dieses Mal bringen möchte.

Sie haben die Testkarteninformationen eingegeben und die Zahlung wurde abgeschlossen.

Zahlung ist nicht erfolgreich ...

Zuerst habe ich das Juwel "payjp" eingeführt, eine JavaScript-Datei erstellt, wie ich gelernt habe, und sie in den Controller und die Ansicht geschrieben.

Geben Sie dann die Testkarteninformationen und ein

Drücken Sie die Kauftaste,

Es kehrt zum ursprünglichen Bildschirm zurück ... (Hmm ??? Der Token ist leer ???)

Dies liegt daran, dass der Controller so eingestellt ist, dass sich der Bildschirm nicht ändert, wenn die Zahlung nicht erfolgreich ist, und der Fehler ebenfalls angezeigt wird, aber zuerst habe ich die Ursache nicht verstanden ...

Hier ist der Code für den aktuellen Controller. (Es mag schwierig zu lesen sein, aber da es lang sein wird, wird nur der Teil zum Erstellen einer Aktion extrahiert.)

****_controller.rb

  def create
    @order = ItemOrder.new(order_params)
    if @order.valid?
      pay_item
      @order.save
      return redirect_to root_path
    else
      render 'new'
    end
  end

Hier ist die JavaScript-Beschreibung zum Empfangen von Karteninformationen und zum Generieren von Token.

****.js

const pay = () => {
  Payjp.setPublicKey(process.env.PAYJP_PUBLIC_KEY);
  const form = document.getElementById("charge-form");
  form.addEventListener("submit", (e) => {
    e.preventDefault();
 
    const formResult = document.getElementById("charge-form");
    const formData = new FormData(formResult);

    const card = {
      card_number: formData.get("card-number"),
      card_cvc: formData.get("card-cvc"),
      card_exp_month: formData.get("card-exp-month"),
      card_exp_year: `20${formData.get("card-exp-year")}`,
    };
    Payjp.createToken(card, (status, response) => {
      if (status == 200) {
        const token = response.id;
        const renderDom = document.getElementById("charge-form");
        const tokenObj = `<input value=${token} type="hidden" name='token'>`;
        renderDom.insertAdjacentHTML("beforeend", tokenObj);
      }
      document.getElementById("card-number").removeAttribute("name");
      document.getElementById("card-cvc").removeAttribute("name");
      document.getElementById("card-exp-month").removeAttribute("name");
      document.getElementById("card-exp-year").removeAttribute("name");
 
      document.getElementById("charge-form").submit();
      document.getElementById("charge-form").reset();
    });
  });
 };
 window.addEventListener("load", pay);

Die aktuelle Situation verstehen

Um zu sehen, was schief gelaufen ist, habe ich den Edelstein "Pry-Rails" eingeführt, "Binding.pry" in die Aktion "create" geschrieben und den Inhalt der "params" überprüft.

pry(#<OrdersController>)> params
=> <ActionController::Parameters {"authenticity_token"=>"pvPlrZPKlxtcYotX8kK4N/OjbTuWNkiq5bOCJxqNI+OYt59wXZuTClFnz7XDmAVWelWQJraGSTdIccYspnstlw==", "item_order"=>{"postal_code"=>"555-0000", "prefecture_id"=>"3", "city"=>"Gemeinde", "block_number"=>"Adresse", "building_name"=>"Gebäudename", "phone_number"=>"09012345678"}, "controller"=>"orders", "action"=>"create", "id"=>"1"} permitted: false>

Natürlich gibt es kein "Token" ... (Authenticity_token scheint völlig anders zu sein.)

Dies bedeutet, dass das Token möglicherweise nicht ordnungsgemäß generiert wurde.

Als nächstes habe ich console.log () verwendet, um die Beschreibung in JavaScript nachzuschlagen.

const pay = () => {
  Payjp.setPublicKey(process.env.PAYJP_PUBLIC_KEY);
  console.log(process.env.PAYJP_PUBLIC_KEY)
  //Überprüfen Sie, ob die Umgebungsvariablen definiert wurden
  const form = document.getElementById("charge-form");
  form.addEventListener("submit", (e) => {
    e.preventDefault();
 
    const formResult = document.getElementById("charge-form");
    const formData = new FormData(formResult);

    const card = {
      card_number: formData.get("card-number"),
      card_cvc: formData.get("card-cvc"),
      card_exp_month: formData.get("card-exp-month"),
      card_exp_year: `20${formData.get("card-exp-year")}`,
    };
    console.log(card)
    //Überprüfen Sie, ob Sie die Karteninformationen erhalten haben
    Payjp.createToken(card, (status, response) => {
      console.log(status)
      //Überprüfen Sie die Statusnummer
      if (status == 200) {
        const token = response.id;
        const renderDom = document.getElementById("charge-form");
        const tokenObj = `<input value=${token} type="hidden" name='token'>`;
        renderDom.insertAdjacentHTML("beforeend", tokenObj);
      }
      document.getElementById("card-number").removeAttribute("name");
      document.getElementById("card-cvc").removeAttribute("name");
      document.getElementById("card-exp-month").removeAttribute("name");
      document.getElementById("card-exp-year").removeAttribute("name");
 
      document.getElementById("charge-form").submit();
      document.getElementById("charge-form").reset();
    });
  });
 };
 window.addEventListener("load", pay);

Und da es bei binding_pry gestoppt wird, wenn Sie die Konsole dort überprüfen, Es scheint, dass die Karteninformationen fest empfangen wurden! Der Status ist jedoch "400", sodass das Token nicht generiert werden kann ...

Warum habe ich die Karteninformationen erhalten? ?? ??

Lösung

Deshalb habe ich mich mit einer sachkundigen Person beraten und es endlich gelöst! Es scheint, dass in der Beschreibung, in der die zu erfassenden Karteninformationen gespeichert sind, ein Fehler aufgetreten ist.

Von der Beschreibung dieses Teils

****.js

const card = {
      card_number: formData.get("card-number"),
      card_cvc: formData.get("card-cvc"),
      card_exp_month: formData.get("card-exp-month"),
      card_exp_year: `20${formData.get("card-exp-year")}`,
    };

Wenn Sie "card_number:", "card_cvc:", "card_exp_month:", "card_exp_year:" schreiben, scheint die Kommunikation mit Payjp nicht korrekt zu sein.

Mir wurde gesagt, dass diese Form fest ist, Die Beschreibung wurde korrigiert als "number:", "cvc:", "exp_month:", "exp_year:".

const card = {
      number: formData.get("card-number"),
      cvc: formData.get("card-cvc"),
      exp_month: formData.get("card-exp-month"),
      exp_year: `20${formData.get("card-exp-year")}`,
    };

Durch das Schreiben

Der Status ist auch sicher Wird "200"

Ich konnte erfolgreich bezahlen!

Zusammenfassung

Bei der Einführung von "PAYJP" müssen die erfassten Karteninformationen in einem festen Format beschrieben werden. Sie können binding_pry und console.log () verwenden, um herauszufinden, wo das Problem liegt.