Aperçu

Il s'agit d'un mémorandum de mise en œuvre de la fonction d'enregistrement / modification / suppression de carte dans l'API PAY.JP. Cette fois, nous résumerons la procédure depuis le token acquis jusqu'à l'enregistrement des informations de la carte.

Par souci de concision, seul le code minimum requis pour l'implémentation est écrit.

Si vous avez des erreurs, nous vous serions reconnaissants de bien vouloir demander une modification.

Soit dit en passant, payjp.js contient de nombreux articles sur la v1, mais il convient de noter que de nombreuses parties sont différentes de la v2 actuelle.

environnement

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

# Ruby Version
ruby:           2.6.5p114
Rails:          6.0.3.3

Conditions préalables

Nous avons même acquis des informations sur les jetons à l'aide de l'API PAY.JP. Voir l'article Dernière fois.

procédure

Modifier vue

Ajoutez un message d'erreur ou un formulaire masqué dans JS.

`haml:_card_form.html.haml`


.CardForm
numéro de carte
  .CardForm__outer{id: "number-form"}
date d'expiration
  .CardForm__outer{id: "expiry-form"}
code de sécurité
  .CardForm__outer{id: "cvc-form"}
  #message    -#Je reçois un message d'erreur ici
  = form_with model: @card, id: "card_form", local: true do |form|
    #card_token   -#Le formulaire caché sera ajouté ici
    = form.submit "Enregistrer la carte", class:"CardForm__button", id: "create_card"

Modifier le contrôleur

Créez des informations client à partir de l'API PAY.JP à l'aide du jeton et stockez-les dans la table Card.

Comme il a été réduit au minimum de description, il est en fait préférable de créer une branche conditionnelle.

`card_controller.rb`


class CardController < ApplicationController
  require 'payjp'
  
  def new
  end
  
  def create
    Payjp.api_key = ENV['PAYJP_SECRET_KEY']  #Initialiser l'API
    customer = Payjp::Customer.create(card: params['payjp_token'])  #Créer des données client à partir de l'identifiant client
    @card = Card.new(
      user_id: current_user.id,          #Lié avec l'ID utilisateur
      customer_id: customer.id,          #Enregistrer l'identifiant client
      card_id: customer.default_card     #Enregistrer les informations de la carte client
    )
    @card.save
  end
end

Modifier le fichier JS

Lorsque vous appuyez sur le bouton Envoyer les informations de la carte, le jeton est utilisé pour créer et envoyer un formulaire caché contenant votre identifiant client et votre identifiant de carte.

`card_form.js`


//Exécuter lorsque le chargement du DOM est terminé
document.addEventListener('DOMContentLoaded', () => {
  //Enregistrez la clé publique et obtenez l'objet de départ
  var payjp = Payjp('pk_test_hogehoge')

  //Obtient les éléments. Si vous souhaitez préparer plusieurs formulaires sur la page, veuillez en obtenir plusieurs
  var elements = payjp.elements()

  // element(Unité de formulaire d'entrée)Générer
  var numberElement = elements.create('cardNumber', {style: style})
  var expiryElement = elements.create('cardExpiry', {style: style})
  var cvcElement = elements.create('cardCvc', {style: style})
 
 //Placer l'élément sur DOM
  numberElement.mount('#number-form')
  expiryElement.mount('#expiry-form')
  cvcElement.mount('#cvc-form')

  //Préparer une fonction pour générer un jeton lorsque le bouton est enfoncé
  create_card.addEventListener("click", function(e) {
    e.preventDefault();
    payjp.createToken(numberElement).then(function(r) {
      if (r.error) {  //Échec d'enregistrement
        document.querySelector('#message').innerText = r.error.message
        regist_card.prop('disabled', false)
      } else {
        $("#card_token").append(  // #card_Ajouter une forme cachée à une partie de jeton
          `<input type="hidden" name="payjp_token" value=${r.id}>
          <input type="hidden" name="card_token" value=${r.card.id}>`
        );
        $("#card_form")[0].submit();  //Soumettre le formulaire
      }
    })
  });
});

référence

Après tout, l'API et le guide officiels sont les plus puissants. Cependant, avant de vous habituer à le lire, vous pouvez vous en faire une idée en regardant la procédure de mise en œuvre réelle sur Qiita, etc.

Référence de l'API PAY.JP https://pay.jp/docs/api/

Guide de l'utilisateur de l'API PAY.JP | PAY.JP https://pay.jp/docs/started
Le blog officiel est également utile, mais sachez que les informations sont souvent anciennes et conformes à la v1.

Utilisation très basique de PAY.JP (édition Ruby) - Blog d'ingénierie PAY.JP https://payjp.hatenablog.com/entry/2017/11/21/191916
Autres articles auxquels j'ai fait référence

Payjp.js V2 avec Rails Implémentation de la fonction d'enregistrement de carte de crédit Application Flima --Qiita https://qiita.com/ta9301/items/6b736390c49c3f40edb6

[HowTo] De la mise en œuvre de la fonction d'achat de produit à l'aide de Pay.jp à la configuration après l'achat du produit https://qiita.com/Tatsu88/items/eb420e372077939a4627

Utilisation de l'API PAY.JP avec Rails ~ Enregistrement de la carte ~ (payjp.js v2)