Créer un modèle

Créez un modèle de carte.

terminal

$ rails g model card

Ce que vous devez enregistrer en tant que données reçues de PAY.JP est la colonne pour enregistrer l'ID client et l'ID de la carte. Avec ces deux, vous pouvez importer la plupart des données. Le code ci-dessous est également lié au «modèle utilisateur».

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

N'oubliez pas de migrer.

terminal

$ rails db:migrate

Ecrire un fichier JS

Ceci est presque une copie complète du guide officiel (https://pay.jp/docs/payjs-guidance). Officiellement, j'utilise onclick pour déclencher la génération de jetons, mais dans mon cas, cela n'a pas fonctionné, j'ai donc utilisé AddEventListener. Pour le moment, affichez le jeton et vérifiez le fonctionnement.

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_token.addEventListener("click", function() {
    payjp.createToken(numberElement).then(function(r) {
      document.querySelector('#token').innerText = r.error ? r.error.message : r.id
    })
  });
})

Écrire un fichier de vue

Pour le moment, je vais faire une description minimum pour afficher le formulaire. Réécrivons-le plus tard comme vous le souhaitez.

haml:_card_form.html.haml

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

-#En fait l'application.html.Il est préférable de l'écrire dans la partie en-tête telle que haml.
= 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"}
Création de jetons
  %span#token
jeton:

Contrôle de fonctionnement

Jusqu'à présent cette fois, je voudrais résumer la prochaine fois la mise en œuvre de la fonction d'enregistrement de carte.

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