[JAVA] [Rails] Introduction de pay.jp (de la personnalisation de la vue à l'enregistrement)
En premier
Nous avons implémenté la fonction d'enregistrement de carte de crédit requise lors de l'achat de produits avec payjp. Conservez un mémorandum des étapes de la personnalisation de la vue à son enregistrement.
Environnement de développement
・ Rails 5.2.4.2 ・ Rubis 2.5.1
Qu'est-ce que pay.jp
https://pay.jp/docs/started En termes simples, il s'agit d'un service qui gère l'enregistrement et le paiement des cartes de crédit en votre nom. L'utilisation du gem payjp vous aidera à implémenter la fonctionnalité.
Par ailleurs, il est interdit de sauvegarder les informations de la carte elle-même dans la base de données. En appelant les informations stockées dans payjp avec l'identifiant du client ou l'identifiant de la carte, il s'agit d'un mécanisme permettant de répondre à l'acquisition d'informations et au paiement. Le fait est que vous passerez la carte et les informations client créées par payjp et l'identifiant associé, alors enregistrez cet identifiant dans la base de données et référencez-le depuis payjp. Je pense que c'est l'image. En termes de sécurité, il est extrêmement dangereux de stocker des informations de carte de crédit dans la base de données, donc je pense que c'est sous cette forme. (Voir URL ci-dessous) http://payjp-announce.hatenablog.com/entry/2017/11/10/182738
Avant la mise en œuvre des fonctionnalités
・ Après avoir acquis un compte PAY.JP, vérifiez la clé API.
https://pay.jp/
Après vous être enregistré et connecté, cliquez sur la page API pour voir vos clés privées et publiques de test.
・ Ajouter une gemme
gem 'payjp'
gem 'dotenv-rails'
Rendre pay.jp et dotenv disponibles. dotenv est une gemme qui vous permet de lire les variables d'environnement dans un fichier. dotenv, il existe un processus dans lequel vous devez lire la variable d'environnement plus tard, alors ajoutez-la d'abord. Après l'ajout, l'installation du bundle.
Une fois l'installation terminée, créez un fichier .env dans votre répertoire de base.
Entrez les clés privées et publiques que vous avez confirmées précédemment dans le fichier .env.
PAYJP_PRIVATE_KEY ='sk_test_****************:'
PAYJP_KEY ='pk_test_************************'
Puisqu'il est dangereux de divulguer des informations importantes telles que la clé payjp, ajoutez la description suivante au fichier .gitgnore afin qu'elle ne soit pas téléchargée sur git.
/.env
Vous pouvez également saisir le code directement dans la variable d'environnement. https://qiita.com/daisukeshimizu/items/c01f29f8398cc7f5c396
Correction de la vue application.html.haml.
%script{src: "https://js.pay.jp/", type: "text/javascript"}
Ajoutez cette phrase pour que payjp.js puisse être lu par la balise head.
!!!
%html
%head
%meta{content: "text/html; charset=UTF-8", "http-equiv": "Content-Type"}/
%title EcApp
%script{src: "https://js.pay.jp/", type: "text/javascript"}
= csrf_meta_tags
= csp_meta_tag
= stylesheet_link_tag 'application', media: 'all', 'data-turbolinks-track': 'reload'
= javascript_include_tag 'application', 'data-turbolinks-track': 'reload'
%body
= yield
payjp.js est une bibliothèque spécialisée uniquement dans la création de jetons d'informations sur les cartes. Étant donné que la bibliothèque payjp.js est hébergée sur https://js.pay.jp, elle chargera et utilisera ce domaine, donc elle ne fonctionnera pas localement. En lisant ceci, vous pourrez utiliser des méthodes telles que l'acquisition de jetons à partir de payjp.
la mise en oeuvre
1. Créer une vue
<script type = "text / javascript" src = "https://checkout.pay.jp" class = "payjp-button" data-key = "clé publique"> </ script>
Il existe également un moyen d'ajouter une ligne de balise de script et d'utiliser la vue préparée par payjp à l'avance, mais cette fois je veux personnaliser la vue, donc je l'omettrai.
Bien qu'il soit en cours de création, il ressemblera à ceci.
= render partial: "items/header"
.main
% h2 Inscription d'un nouveau membre
= form_with url: creditcards_path, method: :post, id: 'charge-form', html: { name: "inputForm" } do |f|
.main__form
.main__form__registration
Page d'enregistrement de la carte de crédit
.main__form__field
% label.main__form__field__label numéro de carte
= f.text_field: number, name: "number", id: "card_number", type: "text", placeholder: 'half-width numbers only', class: 'main__form__field__box', maxlength: "16"
=image_tag "material/credit/credit.png ", class:"main__form__field__credit-image"
.main__form__field2
% label.main__form__field__label Date d'expiration
= f.select :exp_month, [["--","--"],["01",1],["02",02],["03",03],["04",04],["05",05],["06",6],["07",07],["08",8],["09",9],["10",10],["11",11],["12",12]],{}, class: 'credit-box', name: "exp_month", id:"exp_month"
% span.month mois
= f.select :exp_year, [["--","--"],["2019",2019],["2020",2020],["2021",2021],["2022",2022],["2023",2023],["2024",2024],["2025",2025],["2026",2026],["2027",2027],["2028",2028],["2029",2029]], {}, class: 'credit-box', name: "exp_year", id:"exp_year"
% span.year année
.main__form__field
% label.main__form__field__label code de sécurité
= f.text_field: cvc, nom: "cvc", id: "cvc", type: "text", placeholder: 'Numéro à 4 ou 3 chiffres au dos de la carte', classe: "main__form__field__box", longueur max: "4"
.main__form__field
= f.submit'Register ', id: "token_submit", classe: "main__form__field__submit-btn"
Après cela, la valeur reçue dans le formulaire avec payjp.js est affectée à [payjpToken] en tant que données de jeton, et les données sont envoyées à payjp. Il est obligatoire de spécifier les attributs id et name pour les éléments de formulaire autres que formulaire et bouton d'envoi, respectivement.
2. Créez des données de jeton à envoyer à payjp avec Javascript
Puisque jQuery est utilisé, veuillez le définir s'il n'est pas défini. https://qiita.com/ngron/items/95846bd630a723e00038 Je pense que cet article sera utile.
Une fois que vous pouvez utiliser jQuery Dans le fichier payjp.js, créez des données de jeton à envoyer à payjp et utilisez ce jeton comme clé pour enregistrer les informations de carte de crédit. Après avoir saisi les informations de carte de crédit, nous les implémenterons en utilisant Javascript pour créer un «jeton» basé sur ces informations.
$(document).on('turbolinks:load', function() {
var form = $ ("# charge-form"); // Attribue celui avec l'ID "charge-form" au formulaire.
Payjp.setPublicKey ('pk_test_839895c840d4f91f7e75df7e'); // Ecrivez directement la clé publique afin que vous puissiez vous y référer.
$ (document) .on ("click", "# token_submit", function (e) {// Fonctionne quand e est pressé.
e.preventDefault (); // Tout d'abord, arrêtez le traitement des rails et effectuez d'abord le traitement js.
form.find("input[type=submit]").prop("disabled", true);
var card = {// Récupère les informations de carte de crédit saisies dans la variable card en fonction de l'id et attribue-les à la variable card. ..
number: $("#card_number").val(),
cvc: $("#cvc").val(),
exp_month: $("#exp_month").val(),
exp_year: $("#exp_year").val(),
};
Payjp.createToken (carte, fonction (s, réponse) {// Génère un jeton. Les informations de la carte mentionnées précédemment sont renvoyées sous forme de jeton chiffré.
if (response.error) {// si la valeur était une erreur
alert ('Informations de carte incorrectes');
}
else {// si aucune erreur ne se produit
$("#card_number").removeAttr("name");
$("#cvc").removeAttr("name");
$("#exp_month").removeAttr("name");
$ ("# exp_year"). removeAttr ("name"); // Supprime la valeur car elle n'est pas enregistrée dans la base de données.
var token = response.id;
alerte («Inscription terminée»);
form.append ($ ('<input type = "hidden" name = "payjpToken" />'). val (token)); // Puisque le token est enregistré dans db, insérez le token créé par js dans le formulaire. Il y a.
form.get (0) .submit (); // récupère les données insérées plus tôt dans le formulaire.
}
});
});
});
https://payjp.hatenablog.com/entry/2017/12/05/134933 Organisé en se référant à l'échantillon de payjp.js fourni par pay.jp.
Payjp.setPublicKey('pk_test_xxxxxxxxxxxx'); Si vous ne décrivez pas cela, la communication avec le serveur Payjp ne sera pas effectuée et les jetons ne seront pas émis, alors entrez la clé API que vous avez confirmée précédemment.
- Étant donné que les spécifications sont telles que le bouton ne peut pas être enfoncé sans recharger lorsqu'une erreur se produit encore, nous prévoyons d'ajouter une version corrigée à l'avenir.
3. Créer un modèle et une table
class CreateCards < ActiveRecord::Migration[5.2]
def change
create_table :cards do |t|
t.references :user, foreign_key: true, null: false
t.string :customer_id, null: false
t.string :card_id, null: false
t.timestamps
end
end
end
Il s'agit d'un tableau pour créer un modèle de carte de crédit et enregistrer les informations PAY.JP. -User_id ... id de la table User ・ Customer_id ... identifiant client payjp ・ Card_id ... id de la carte par défaut de payjp Donnez-lui un nom correspondant à la colonne envoyée depuis payjp afin qu'il puisse être enregistré dans la base de données.
class CreditCard < ApplicationRecord
#association
belongs_to :user
#Validation
validates :user_id, :customer_id, :card_id, presence: true
end
4. Créez un routage.
Rails.application.routes.draw do
#devise routage
devise_for :users, controllers: {
registrations: 'users/registrations'
}
devise_scope :user do
post 'users/sign_up', to: 'users/registrations#create'
get 'addresses', to: 'users/registrations#new_address'
post 'addresses', to: 'users/registrations#create_address'
get 'creditcards', to: 'users/registrations#new_credit_card'
post 'creditcards', to: 'users/registrations#pay'
end
Je veux m'inscrire de la même manière que pour un nouvel enregistrement, je le mets donc ensemble dans le contrôleur des enregistrements. Veuillez noter que la description changera lors de la création d'un contrôleur de carte de crédit.
5. Réparez le contrôleur.
class Users::RegistrationsController < Devise::RegistrationsController
def create_address
@user = User.new(session["devise.regist_data"]["user"])
@address = Address.new(address_params)
unless @address.valid?
flash.now[:alert] = @address.errors.full_messages
render :new_address and return
end
@user.addresses.build(@address.attributes)
@user.save
session["devise.regist_data"]["user"].clear
sign_in(:user, @user)
redirect_to creditcards_path # Passer à une nouvelle action pour l'enregistrement d'une carte de crédit
end
def new_credit_card
card = CreditCard.where(user_id: current_user.id)
# Remplacez le hash contenant l'identifiant de l'utilisateur connecté dans la colonne user_id de la carte de crédit dans la carte.
end
nécessitent "payjp" #Allow pour obtenir la clé API.
def pay
Payjp.api_key = ENV ["PAYJP_PRIVATE_KEY"] Nous nous authentifions avec la clé privée pour obtenir la valeur envoyée depuis #payjp.
if params['payjpToken'].blank?
render: new_credit_card Si le payjpToken créé par #JS provient de, réessayez.
else
customer = Payjp :: Customer.create (card: params ['payjpToken'],) La valeur acquise est affectée à la variable #customer.
@creditcard = CreditCard.new(user_id: current_user.id, customer_id: customer.id, card_id: customer.default_card)
if @creditcard.save
redirect_to root_path
else
redirect_to action: "new_credit_card"
end
end
end
L'article officiel était facile à comprendre pour obtenir la valeur de pay.jp, alors j'y ai fait référence. https://pay.jp/docs/api/?ruby#payjp-api
Après avoir enregistré l'adresse au format de l'assistant, je redirige vers l'enregistrement de la carte de crédit, donc je remplis à partir de la méthode create_address. La fonction d'enregistrement à l'aide de devise et l'implémentation au format assistant sont également publiées dans l'article, j'espère donc que vous la trouverez utile. https://qiita.com/Nosuke0808/items/00a8cac860abd68e2688
En passant, j'ai essayé de l'implémenter, et bien que l'implémentation du format de l'assistant utilise le rendu, j'ai pensé qu'il serait préférable de changer d'écran avec redirect_to. Actuellement, si vous rechargez la page lors de l'enregistrement de l'adresse, une erreur de routage se produira. L'apparence de l'utilisateur est la même qu'il s'agisse de render ou de redirect_to, et s'il se recharge et qu'une erreur se produit, il sera inutile, donc lorsque chaque enregistrement est terminé, enregistrez-le dans la base de données et redirigez-le vers la page suivante. J'ai trouvé que c'était bien. Je cherche un moyen d'éviter une erreur lors du rechargement à l'aide de render à l'avenir, mais je prévois de le réécrire en redirect_to.
Ceci termine l'enregistrement de la carte de crédit à l'aide de payjp. Après la mise en œuvre, les données créées par js n'ont pas pu être envoyées à pay.jp et l'acquisition de données à partir de pay.jp ne s'est pas bien déroulée, la mise en œuvre a donc pris du temps. Si vous pouvez le comprendre, ce ne sera pas difficile, donc j'espère que cela sera utile pour ceux qui vont implémenter payjp à partir de maintenant.
Les références
https://techtechmedia.com/payjp-rails/ https://pay.jp/docs/started http://payjp-announce.hatenablog.com/entry/2017/11/10/182738 https://qiita.com/daisukeshimizu/items/c01f29f8398cc7f5c396 https://payjp.hatenablog.com/entry/2017/12/05/134933 https://pay.jp/docs/api/?ruby#payjp-api
Recommended Posts