Lors de la création d'une application frima comme affectation scolaire, une fonction d'inscription / de paiement cleca a été mise en œuvre à l'aide de payjp. Si vous recherchez, vous pouvez trouver le code parce que de nombreux anciens diplômés ont écrit des articles, mais que faites-vous? Après tout, il était préférable de lire la référence officielle, je vais donc décrire ce que j'ai compris.
Dans cet article ** Que signifie utiliser payjp en premier lieu? (Description de l'API) ** ** Comment appeler payjp ** ** Mise en œuvre de l'enregistrement Creca ** ** Mise en œuvre du paiement par Creca enregistré **
Je décrirai ce qui précède.
ruby 2.6.5 rails 6.0.3
Même si j'écris le code, je pense que comprendre ici est important dans un premier temps (je n'ai pas beaucoup parlé ici)
payjp est un ** type d'API **. Il y a diverses explications sur l'API lorsque vous recherchez sur Google, mais cela ressemble à ** "Je vais fournir certaines fonctions logicielles à l'extérieur" **.
En appelant avec succès l'API selon les instructions de la personne qui l'a préparée, vous pourrez utiliser certaines des fonctions du logiciel dans votre application.
Pour donner un exemple concret, il existe un service Google Map, par exemple. En utilisant l'API fournie par google et en écrivant le code selon les instructions, il est possible d'afficher la carte google sur votre propre application.
** payjp est également une API liée à Creca, et vous pouvez l'utiliser pour vous inscrire et effectuer des paiements avec votre carte de crédit. ** **
Lors de l'utilisation de l'API, ce que je pense personnellement est important, c'est de ** comprendre le déroulement de la préparation par l'autre partie **.
Compte tenu du flux de mise en œuvre après avoir reconnu ce qui précède, ** Préparez-vous à appeler l'API comme vous l'avez préparé ** ** Communiquez et traitez avec l'application là-bas comme vous l'avez préparé **
Ce sera comme ça. Cette image est importante car elle permet de mieux comprendre ce que fait le travail ultérieur.
Par conséquent, l'approche la plus appropriée est de ** comprendre comment le faire avec la documentation officielle de la personne qui l'a préparé **. C'est comme lire les instructions officielles.
En guise de prérequis, enregistrons-nous auprès de payjp et obtenons la clé publique de test et la clé privée de test. Il s'agit de la clé requise pour l'authentification API. Le côté payjp a ces derniers et juge que nous sommes des "utilisateurs autorisés à utiliser".
Après vous être enregistré, lisez Référence officielle V1. Le script qui doit être intégré dès que vous y accédez est correctement décrit. De plus, si vous lisez un peu plus bas, il décrit également comment s'authentifier avec une clé publique. Nous verrons la description réelle dans la section suivante.
Sur la base de la méthode d'appel ci-dessus, je vais mettre le code réel en premier. Après cela, j'expliquerai le déroulement.
haml:application.html.haml
!!!
%html
%head
%meta{:content => "text/html; charset=UTF-8", "http-equiv" => "Content-Type"}/
%script{src: "https://js.pay.jp/v1/", type: "text/javascript"}
= csrf_meta_tags
= csp_meta_tag
= stylesheet_link_tag 'application', media: 'all', 'data-turbolinks-track': 'reload'
= javascript_include_tag 'application'
haml:new.html.haml
.creditCreate
.creditCreate__title
%h1 Saisir les informations de la carte de crédit
.creditForm
= form_with model: @credit, method: :post, id: "cardCreateForm" do |f|
.creditForm__numberfield
%label(for="cardnumber-input")numéro de carte
%span.creditPoint requis
%br
= f.text_field :card_number, type: "text", class: 'cardnumber-input', id:'card-number', placeholder: "Numéros demi-largeur uniquement", maxlength: 16
.creditslist
= image_tag "jcb.gif", class:"creditsIcon"
= image_tag "visa.gif", class:"creditsIcon"
= image_tag "master.gif", class:"creditsIcon"
= image_tag "amex.gif", class:"creditsIcon"
.creditForm__datefield
%date d'expiration de l'étiquette
%span.creditPoint requis
%br
= f.select :exp_month, [["01",1],["02",2],["03",3],["04",4],["05",5],["06",6],["07",7],["08",8],["09",9],["10",10],["11",11],["12",12]],{} , class: 'dateSelect', name: 'exp_month'
Mois
= f.select :exp_year, [["20",2020],["21",2021],["22",2022],["23",2023],["24",2024],["25",2025],["26",2026],["27",2027],["28",2028],["29",2029]],{} , class: 'dateSelect', name: 'exp_year'
Année
.creditForm__securityfield
%étiquette code de sécurité
%span.creditPoint requis
%br
= f.text_field :cvc, type: 'text', class: 'securityInput', id: 'cvc', placeholder: 'Numéro à 4 ou 3 chiffres au dos de la carte', maxlength: "4"
#card_token.creditForm__submitfield
= f.submit 'ajouter', class: 'creditsSubmit', id: 'token_submit'
payjp.js
$(function() {
$('#cardCreateForm').on('submit', function(e) {
e.preventDefault()
Payjp.setPublicKey(['PAYJP_PUBLIC_KEY']);
var card = {
number: document.getElementById("card-number").value,
exp_month: document.getElementById("credit_exp_month").value,
exp_year: document.getElementById("credit_exp_year").value,
cvc: document.getElementById("cvc").value
};
if (card.number == "" || card.cvc == "") {
alert("Il y a une omission d'entrée");
} else {
Payjp.createToken(card, function(status, response) {
if (status === 200 ) {
$("#card_number").removeAttr("name");
$("#cvc").removeAttr("name");
$("#exp_month").removeAttr("name");
$("#exp_year").removeAttr("name");
$("#card_token").append(
$('<input type="hidden" name="payjp-token">').val(response.id)
);
$('#cardCreateForm').get(0).submit();
alert("L'enregistrement fut un succès");
} else {
alert("Les informations de la carte sont incorrectes");
}
});
}
});
});
credits_controller.rb
require 'payjp'
def create
Payjp.api_key = ENV['PAYJP_SECRET_KEY']
if params['payjp-token'].blank?
render :new
else
customer = Payjp::Customer.create(
email: current_user.email,
card: params['payjp-token'],
metadata: {user_id: current_user.id}
)
@credit = Credit.new(user_id: current_user.id, customer_id: customer.id, card_id: customer.default_card)
if @credit.save
redirect_to user_path(current_user.id)
else
render :new
end
end
end
Ce qui précède est le code d'enregistrement Creca. Le flux de traitement est le suivant. Je vais expliquer le long de ce flux.
** ① Définissez les paramètres à l'aide de l'API payjp ** ** ② Dans le fichier js, préparez l'enregistrement en liant le contenu d'entrée et le pajyp lors de la soumission du formulaire ** ** ③ Passer l'action au contrôleur, générer des données client sur payjp, enregistrer l'identifiant associé aux données client dans le tableau **
** Regardons application.html.haml **
haml:application.html.haml
!!!
%html
%head
%meta{:content => "text/html; charset=UTF-8", "http-equiv" => "Content-Type"}/
%script{src: "https://js.pay.jp/v1/", type: "text/javascript"}
= csrf_meta_tags
= csp_meta_tag
= stylesheet_link_tag 'application', media: 'all', 'data-turbolinks-track': 'reload'
= javascript_include_tag 'application'
La partie script est la description qui appelle payjp. La procédure d'appel est décrite dans Référence officielle. Postez-le simplement. Si vous regardez la formule, vous la publiez simplement.
** Regardons le fichier js. ** ** Puisque la description correspond au fichier haml de la soumission du formulaire, il sera plus facile à comprendre si vous les disposez côte à côte.
payjp.js
$(function() {
$('#cardCreateForm').on('submit', function(e) {
e.preventDefault()
Payjp.setPublicKey(['PAYJP_PUBLIC_KEY']);
var card = {
number: document.getElementById("card-number").value,
exp_month: document.getElementById("credit_exp_month").value,
exp_year: document.getElementById("credit_exp_year").value,
cvc: document.getElementById("cvc").value
};
if (card.number == "" || card.cvc == "") {
alert("Il y a une omission d'entrée");
} else {
Payjp.createToken(card, function(status, response) {
if (status === 200 ) {
$("#card_number").removeAttr("name");
$("#cvc").removeAttr("name");
$("#exp_month").removeAttr("name");
$("#exp_year").removeAttr("name");
$("#card_token").append(
$('<input type="hidden" name="payjp-token">').val(response.id)
);
$('#cardCreateForm').get(0).submit();
alert("L'enregistrement fut un succès");
} else {
alert("Les informations de la carte sont incorrectes");
}
});
}
});
});
Je vais l'expliquer séparément.
payjp.js
$(function() {
$('#cardCreateForm').on('submit', function(e) {
e.preventDefault()
Dans jQuery, il est défini comme le comportement lorsqu'un bouton de formulaire est cliqué.
payjp.js
Payjp.setPublicKey(['PAYJP_PUBLIC_KEY']);
Définissez la clé publique de test enregistrée et obtenue pour afficher l'authentification (que vous avez enregistrée pour utiliser payjp!). Avec cela, payjp vous permettra de l'utiliser.
La méthode d'écriture de setPublicKey apparaît soudainement, mais elle est également décrite par la méthode spécifiée dans Référence officielle. C'est juste une copie. N'aie pas peur.
payjp.js
var card = {
number: document.getElementById("card-number").value,
exp_month: document.getElementById("credit_exp_month").value,
exp_year: document.getElementById("credit_exp_year").value,
cvc: document.getElementById("cvc").value
};
C'est une description de JS. Comme vous pouvez le voir dans la manière d'écrire get element by id, en spécifiant et en spécifiant l'id de chaque champ de formulaire, chaque contenu d'entrée est défini et affecté à une variable appelée card.
payjp.js
if (card.number == "" || card.cvc == "") {
alert("Il y a une omission d'entrée");
C'est une description de js. Lorsque le numéro ou le cvc de la carte de variable définie est vide, il n'accepte pas et renvoie une erreur.
payjp.js
} else {
Payjp.createToken(card, function(status, response) {
if (status === 200 ) {
$("#card_number").removeAttr("name");
$("#cvc").removeAttr("name");
$("#exp_month").removeAttr("name");
$("#exp_year").removeAttr("name");
$("#card_token").append(
$('<input type="hidden" name="payjp-token">').val(response.id)
);
$('#cardCreateForm').get(0).submit();
alert("L'enregistrement fut un succès");
} else {
alert("Les informations de la carte sont incorrectes");
}
});
}
});
});
Générez des jetons en fonction des informations de la carte. Il s'agit également de [Référence officielle de l'API payjp](https://pay.jp/docs/api/#%E3%83%88%E3%83%BC%E3%82%AF%E3%83%B3%E3% Veuillez lire 82% 92% E4% BD% 9C% E6% 88% 90).
Si vous lisez la partie de la génération de jetons, vous devriez voir une explication textuelle de la façon dont les jetons sont générés et la méthode de description réelle sur le côté droit.
Soudain, la description "Payjp.create ~" est sortie, mais ce n'est que la référence disant "Si vous écrivez de cette façon, vous pouvez le faire", donc si vous le lisez correctement, vous pouvez le faire. Puisqu'il est écrit qu'il est nécessaire de passer quatre valeurs telles que le nombre ici, j'ai défini quatre valeurs pour la variable de la carte plus tôt. Dans l'ordre, il est défini car il est nécessaire ici.
if status === 200 est la valeur de statut retournée par payjp lorsque les informations de la carte sont valides et que le token est généré correctement. Par conséquent, renvoyer une erreur avec else indique "lorsque l'enregistrement a échoué".
Regardons de plus près d'ici.
payjp.js
$("#card_number").removeAttr("name");
$("#cvc").removeAttr("name");
$("#exp_month").removeAttr("name");
$("#exp_year").removeAttr("name");
C'est une description de JS et jQuery. Si la carte est valide, la valeur saisie dans chaque formulaire est supprimée du point de vue de la sécurité (le processus consiste à supprimer l'attribut name du formulaire spécifié par id).
payjp.js
$("#card_token").append(
$('<input type="hidden" name="payjp-token">').val(response.id)
);
$('#cardCreateForm').get(0).submit();
alert("L'enregistrement fut un succès");
Le processus de retour des données (response.id) renvoyées par Payjp lorsque la carte est valide au formulaire est effectué par append. En spécifiant type = hidden, les données sont envoyées au formulaire, bien qu'elles soient invisibles pour l'utilisateur.
En plus de cela, en soumettant, les données renvoyées par Payjp sont envoyées au contrôleur après cela, et l'action de création est effectuée.
C'est une description de l'envoi réussi des données au contrôleur. Avec cela, vous pouvez voir le traitement du contrôleur ensuite.
credits_controller.rb
require 'payjp'
def create
Payjp.api_key = ENV['PAYJP_SECRET_KEY']
if params['payjp-token'].blank?
render :new
else
customer = Payjp::Customer.create(
email: current_user.email,
card: params['payjp-token'],
metadata: {user_id: current_user.id}
)
@credit = Credit.new(user_id: current_user.id, customer_id: customer.id, card_id: customer.default_card)
if @credit.save
redirect_to user_path(current_user.id)
else
render :new
end
end
end
Le processus peut être bien fait jusqu'à présent, et finalement les données sont créées par le contrôleur. Allons-y étape par étape.
credits_controller.rb
require 'payjp'
def create
Payjp.api_key = ENV['PAYJP_SECRET_KEY']
if params['payjp-token'].blank?
render :new
Tout d'abord, activez payjp avec require'payjp '. Ensuite, spécifiez SECRET_KEY pour indiquer que c'est l'utilisateur qui pensait avoir le droit d'utiliser payjp (répertorié à l'aide de variables d'environnement).
En plus de cela, les données envoyées lorsque la réponse était normale auparavant sont params ['payjp-token'], donc si tel est le cas, le processus de rendu sans traitement est décrit.
credits_controller.rb
def create
else
customer = Payjp::Customer.create(
email: current_user.email,
card: params['payjp-token'],
metadata: {user_id: current_user.id} #Ceci est facultatif
)
Ici, les données client Payjp sont créées et affectées à la variable client. Soudain, cette façon d'écrire est apparue. Comme je l'ai souvent dit, [Référence officielle](https://pay.jp/docs/api/#%E9%A1%A7%E5%AE%A2%E3%82%92%E4%BD%9C% Si vous regardez E6% 88% 90), tout est acheté.
Puisque ce que nous voulons faire cette fois-ci, c'est créer des données client, regardez la colonne de données client dans la référence. Ensuite, la méthode de description de Payjp :: Customer.create et ses arguments doivent être écrits.
Vous pouvez facilement voir ce qu'il faut mettre en regardant le contenu des arguments. ** Par exemple, l'argument carte dit de spécifier l'ID de jeton, vous pouvez donc voir que vous devez définir l'ID de jeton que vous avez défini pour envoyer plus tôt. ** **
credits_controller.rb
def create
@credit = Credit.new(user_id: current_user.id, customer_id: customer.id, card_id: customer.default_card)
if @credit.save
redirect_to user_path(current_user.id)
else
render :new
end
end
De là, nous parlerons du traitement de la table côté Rails. Vous pouvez également vérifier les données de réponse des clients Payjp en vous référant à la référence ci-dessus. Étant donné que les données client Payjp créées précédemment ont été affectées à la variable client, les données de réponse peuvent être sauvegardées dans le tableau en le spécifiant avec customer.id etc.
(Comme il n'est légalement pas possible de sauvegarder les données Creca dans votre propre table, demandez au payjp de sauvegarder les données lui-même et de sauvegarder les données customer_id et de la carte dans la table en tant que lien pour appeler ces données. Voilà pourquoi.
Cela a été une phrase assez longue, donc je vais juste l'enregistrer, mais l'important est de ** comprendre le flux et lire la référence **, et je pense que c'est tout.
Concernant le flux de paiement par carte basé sur ces données enregistrées, quel type de description est nécessaire pour le paiement à la lecture de la référence? Que spécifier pour l'argument? J'ai pu l'implémenter assez facilement en le regardant. (Comme vous pouvez le voir du fait qu'il était lié à la table plus tôt, il n'est pas si difficile d'imaginer que vous devriez appeler les données de la carte requises pour le paiement et les transmettre comme argument.)
Cependant, comme je n'étais pas familier avec l'API, elle a été implémentée à l'aide de l'article de Qiita. Cependant, la conclusion ** La formule est la plus forte **, et je vais l'enregistrer car c'était une expérience que j'ai pu comprendre ce mot avec un réel sentiment.
Recommended Posts