[JAVA] [Rails] Résolution d'erreur lors de la génération de jetons avec PAYJP

Tout en apprenant la programmation, cela conserve ce que vous voulez noter d'une manière qui vous est facile à comprendre.

Je veux présenter PAYJP et mettre en place un système de paiement!

Voici l'objectif que je veux atteindre cette fois.

Vous avez saisi les informations de la carte de test et le paiement est terminé.

Le paiement échoue ...

Tout d'abord, j'ai introduit le joyau payjp, créé un fichier JavaScript comme je l'ai appris et l'ai écrit dans le contrôleur et la vue.

Tapez ensuite les informations de la carte de test et

Appuyez sur le bouton d'achat,

Il revient à l'écran d'origine ... (Hmm ??? Le jeton est vide ???)

En effet, le contrôleur est réglé de manière à ce que l'écran ne change pas si le paiement échoue, et l'erreur est également affichée, mais au début, je n'ai pas compris la cause ...

Voici le code du contrôleur actuel. (Cela peut être difficile à lire, mais comme il sera long, seule la partie action de création est extraite.)

****_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

Voici la description JavaScript pour recevoir les informations de la carte et générer des jetons.

****.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);

Comprendre la situation actuelle

Pour voir ce qui ne va pas, j'ai introduit la gemme pry-rails, j'ai écrit binding.pry dans l'action de création et j'ai vérifié le contenu des params.

pry(#<OrdersController>)> params
=> <ActionController::Parameters {"authenticity_token"=>"pvPlrZPKlxtcYotX8kK4N/OjbTuWNkiq5bOCJxqNI+OYt59wXZuTClFnz7XDmAVWelWQJraGSTdIccYspnstlw==", "item_order"=>{"postal_code"=>"555-0000", "prefecture_id"=>"3", "city"=>"Municipalité", "block_number"=>"adresse", "building_name"=>"Nom du bâtiment", "phone_number"=>"09012345678"}, "controller"=>"orders", "action"=>"create", "id"=>"1"} permitted: false>

Certes, il n'y a pas de «jeton» ... (ʻAuthenticity_token` semble être complètement différent.)

Cela signifie que le jeton n'a peut-être pas été généré correctement.

Ensuite, j'ai utilisé console.log () pour rechercher la description en JavaScript.

const pay = () => {
  Payjp.setPublicKey(process.env.PAYJP_PUBLIC_KEY);
  console.log(process.env.PAYJP_PUBLIC_KEY)
  //Vérifiez si les variables d'environnement ont été définies
  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)
    //Vérifiez si vous avez reçu les informations de la carte
    Payjp.createToken(card, (status, response) => {
      console.log(status)
      //Vérifiez le numéro de statut
      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);

Et comme il est arrêté à binding_pry, si vous vérifiez la console là-bas, Il semble que les informations de la carte ont été reçues fermement! Cependant, le statut est «400», donc le jeton ne peut pas être généré ...

Pourquoi ai-je reçu les informations de la carte? ?? ??

Solution

Par conséquent, j'ai consulté une personne bien informée et j'ai finalement résolu le problème! Il semble qu'il y ait eu une erreur dans la description qui stocke les informations de la carte à acquérir.

De la description de cette partie

****.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")}`,
    };

Si vous écrivez card_number:, card_cvc:, card_exp_month:, card_exp_year:, il semble qu'il ne communique pas correctement avec Payjp.

On m'a dit que cette forme est fixe, Correction de la description en tant que numéro:, 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")}`,
    };

En écrivant

Le statut est également sûr Devient "200"

J'ai pu effectuer un paiement réussi!

Résumé

Lors de l'introduction de «PAYJP», il est nécessaire de décrire les informations de carte acquises dans un format fixe. Vous pouvez utiliser binding_pry et console.log () pour trouver où se situe le problème.