[JAVA] Payjp.js V2 avec Rails Implémentation de la fonction d'enregistrement de carte de crédit Application Flima

Aperçu

Puisqu'il n'y avait pas d'article sur l'implémentation v2 personnalisable à l'aide de payjp.js Je pense que je l'ai partagé. Il y avait beaucoup d'articles d'implémentation dans la v1, mais ...

payjp.js v2 fourni en version bêta

En ce qui concerne payjp.js, qui fournit une fonction de tokenisation des informations de carte, nous avons fourni la version bêta de payjp.js> v2, qui est conforme à la dernière norme PCI-DSS.

Qu'est-ce que payjp.js v2?

payjp.js v2 est une bibliothèque de> génération de formulaires de saisie d'informations de carte conforme à la dernière norme PCI-DSS, en plus de la fonction de tokenisation des informations de carte conventionnelle.

Voir les références et les guides pour les fonctionnalités et les détails. Nous avons également plusieurs démos.

Demande de migration

Concernant l'actuel payjp.js v1, nous prévoyons de déprécier une nouvelle utilisation en même temps que cette version de la v2 (prévue début avril).

Nous nous excusons pour la gêne occasionnée aux magasins membres qui utilisent déjà la v1, mais veuillez migrer vers payjp.js v2.

Concernant la procédure de migration depuis la v1, nous publierons à nouveau un article sur ce blog. Veuillez noter que nous vous informerons du calendrier détaillé de la migration.

Merci pour votre soutien continu à PAY.JP. Référence: Blog PAY.JP

Puisqu'il a été dit que c'est recommandé à partir de maintenant, même un peu Je l'ai écrit parce que j'ai pu le mettre en œuvre avec l'espoir d'aider tout le monde. Guide de l'utilisateur de l'API PAY.JP | PAY.JP Je pense que c'est assez facile à comprendre si vous l'implémentez après avoir vu.

↑ Puisque je suis un jeune ingénieur, je corrigerai toutes les erreurs. Veuillez nous donner votre avis: point_up:

information sur la version

• ruby 2.6.5
• Rails 6.0.3.2

table des matières

1. Créez un compte Payjp
2. Vérifiez l'API
3. Installez Payjp et dotenv Gem
4. Rendre possible la lecture de payjp.js
5. Créez une table à enregistrer
6. Créez un contrôleur
7. Créez un écran d'enregistrement de carte
8. Créez un fichier javascript
9. Créer un itinéraire
10. Enregistrez votre carte

1. Créez un compte Payjp

Créez un compte sur le site Payjp.

2. Vérifiez l'API

Une fois connecté, vérifiez à partir de l'API sur le tableau de bord. Puisque cette fois nous implémentons en mode test, nous utiliserons ** test private key ** et ** test public key **.

3. Installez Payjp et dotenv Gem

Installez le gem payjp

Gemfile

gem 'payjp'
gem 'dotenv'

Une fois décrit dans le Gemfile, il est installé.

terminal

$  bundle install

Créer .env avec la commande tactile

terminal

$cd Répertoire d'applications créé
$ touch .env　

Une fois créée, écrivez l'API en .env. Si vous écrivez ici `` pk_test_000000000000000000000000 '', cela peut ne pas fonctionner dans l'environnement de production,

PAYJP_PRIVATE_KEY=pk_test_000000000000000000000000
PAYJP_SECRET_KEY=sk_test_000000000000000000000000

Si vous utilisez Git, écrivez ce qui suit et ne poussez pas vers un référentiel distant!

.gitnore

.env

4. Rendre possible la lecture de payjp.js

** ★ Décrit dans Haml Cliquez ici pour savoir comment installer haml ↓ ** Présentez le haml avec Rails! | Qiita

Ajoutez `% script {src:" https://js.pay.jp/ ", tapez:" text / javascript "} comme suit. ''

ruby:app/views/layouts/application.html.haml

%html
  %head
    %meta{:content => "text/html; charset=UTF-8", "http-equiv" => "Content-Type"}/
    %title hogehoge
    %script{src: "https://js.pay.jp/v2/pay.js"} 　　#Décrivez ce script
    = csp_meta_tag
    = csrf_meta_tag
    = stylesheet_link_tag    'application', media: 'all', 'data-turbolinks-track': 'reload'
    = javascript_include_tag 'application', 'data-turbolinks-track': 'reload'
  %body
    = yield

5. Créez une table à enregistrer

Créez une table de base de données pour stocker les données payjp avec la commande suivante

terminal

$ rails g model Card user_id:integer customer_id:string card_id:string

Lorsque vous commandez, un fichier de migration est créé dans db, vérifiez donc le contenu

db/migrate/2020800********_create_cards.rb

class CreateCards < ActiveRecord::Migration[6.0]
  def change
    create_table :cards do |t|
      t.integer :user_id, null: false
      t.string :customer_id, null: false
      t.string :card_id, null: false
      t.timestamps
    end
  end
end

Faites une migration.

terminal

$ rails db:migrate

Puisqu'il est interdit de stocker les informations de la carte elle-même dans la base de données, Les informations peuvent être obtenues en appelant les informations stockées dans payjp avec l'identifiant client ou l'identifiant de la carte.

Méthode de vente à tempérament révisée

Prise en charge des informations de carte non passantes

6. Créez un contrôleur

Créez un contrôleur avec la commande suivante

terminal

$ rails g controller card

pp/controllers/card_controller.rb

class CardsController < ApplicationController

  require 'payjp' #Vous pouvez maintenant utiliser la méthode pajp

  def new
    card = Card.where(user_id: current_user.id)
    redirect_to action: "show" if card.exists?
  end

  def pay　　#Créer une base de données pour payjp et Card
    Payjp.api_key = ENV["PAYJP_SECRET_KEY"]
    if params['payjp_token'].blank?
      redirect_to action: "new"
    else
      customer = Payjp::Customer.create(
      description: 'Test d'inscription', #OK sans
      email: current_user.email, #OK sans
      card: params['payjp_token'],
      metadata: {user_id: current_user.id}
      ) #Juste au cas où, utilisateur dans les métadonnées_Vous n'êtes pas obligé de saisir l'identifiant
      @card = Card.new(                  #Création de données de table de cartes
        user_id: current_user.id,        #Ici courant_user.Puisqu'il y a un identifiant, permettez-moi de me connecter à l'avance
        customer_id: customer.id,        #client défini ci-dessus
        card_id: customer.default_card  # .default_En utilisant une carte, les informations de carte associées à la définition du client sont extraites. Si cette valeur est nulle, la carte du client ci-dessus: params['payjp_token']N'est souvent pas lu
      )
      if @card.save
        redirect_to action: "show"
      else
        redirect_to action: "pay"
      end
    end
  end



  def delete #Supprimer la base de données Payjp et Card
    card = Card.find_by(user_id: current_user.id)
    if card.blank?
    else
      Payjp.api_key = ENV["PAYJP_SECRET_KEY"]
      customer = Payjp::Customer.retrieve(card.customer_id)
      customer.delete
      card.delete
    end
      redirect_to action: "new"
  end

  def show #Envoyer à la carte des données payjp et récupérer des informations
    card = Card.find_by(user_id: current_user.id)
    if card.blank?
      redirect_to action: "new" 
    else
      Payjp.api_key = ENV["PAYJP_SECRET_KEY"]
      customer = Payjp::Customer.retrieve(card.customer_id)
      @default_card_information = customer.cards.retrieve(card.card_id)
    end
  end

end

7. Créez un écran d'enregistrement de carte

** Voici la v2, qui est un peu différente de la v1! !! !! !! ** **

haml:new_credit.html.haml

      .form-group
        %p#number-form.payjs-outer
        %p#expiry-form.payjs-outer
        %p#cvc-form.payjs-outer
      .form-group
        = form_with url: pay_cards_path, method: :post,id: "card_form" do |f|
          #card_token
          = f.submit "s'inscrire", class:"btn", id: "info_submit"

Avec cela seul, si vous écrivez pay.js en javascript, les éléments suivants apparaîtront en communication asynchrone!

8. Créez un fichier javascript

Avoir JQuery disponible dans Rails et écrire ce qui suit (Avant d'écrire js, payjp.js v2 Guide et payjp.js v2 Reference Il est plus facile de comprendre si vous lisez ce qui suit, puis entrez la description suivante: point_up :)

app/assets/javascripts/pay.js

$(window).bind("load", function(){ 
  if (document.URL.match(/cards/)){
  //↑ Vers URl/crads/Feu seulement quand il y a

    var payjp = Payjp('pk_test_*************0')
     //↑ Enregistrez la clé publique et récupérez l'objet de départ

    var elements = payjp.elements();
　　　//↑ Récupérez des éléments.

    var numberElement = elements.create('cardNumber');
    var expiryElement = elements.create('cardExpiry');
    var cvcElement = elements.create('cardCvc');
　　//↑ Générer un élément

    numberElement.mount('#number-form');
    expiryElement.mount('#expiry-form');
    cvcElement.mount('#cvc-form');
　　　//↑ Placer l'élément sur DOM

    var submit_btn = $("#info_submit");
    submit_btn.click(function (e) {
      e.preventDefault();
      payjp.createToken(numberElement).then(function (response) {
　　　　//↑↑ Créez un jeton ici//Passez n'importe quel élément comme argument de createToken

        if (response.error) {  //Lorsque la communication échoue
          alert(response.error.message)
          regist_card.prop('disabled', false)
        } else {
          alert("L'inscription est terminée");
          $("#card_token").append(
            `<input type="hidden" name="payjp_token" value=${response.id}>
            <input type="hidden" name="card_token" value=${response.card.id}>`
          );
          $('#card_form')[0].submit();
        　 //↑↑ Ici tapez='hidden'Et mettre le jeton en soumission

          $("#card_number").removeAttr("name");
          $("#cvc-from").removeAttr("name");
          $("#exp_month").removeAttr("name");
        　$("#exp_year").removeAttr("name");
　　　　　　//↑↑ Ici, la description est supprimée avec removeAttr
        };
      });
    }); 
  }
});

8. Créer un écran de confirmation / suppression

Si vous pouvez vous inscrire, l'action carte # show sera déplacée avec une redirection. Préparez un écran de confirmation / suppression.

haml:app/cards/show.html.haml

.creditShow
  %étiquette Enregistrement informations de carte de crédit
  %br
  = "**** **** **** " + @default_card_information.last4
  %br
  - exp_month = @default_card_information.exp_month.to_s
  - exp_year = @default_card_information.exp_year.to_s.slice(2,3)
  = exp_month + " / " + exp_year
  = form_tag(delete_cards_path, method: :post, id: 'charge-form',  name: "inputForm") do
    %input{ type: "hidden", name: "card_id", value: "" }
    %bouton supprimer

9. Créer un itinéraire

Cela dépend des spécifications de l'application, mais veuillez l'organiser car nous partagerons la description une fois qu'elle aura été implémentée.

config/routes.rb

resources :cards, only: [:new, :show,] do
    collection do
      post 'show', to: 'cards#show'
      post 'pay', to: 'cards#pay'
      post 'delete', to: 'cards#delete'
    end
  end

Maintenant que la description de l'itinéraire et du MVC est terminée, vous pouvez vous inscrire.

10. Enregistrez votre carte

Inscription en mode test carte de test payjp Décrit ici

• Numéro de carte: 4242424242424242
• Date d'expiration: 20/12
• CVC: 123 --Nom de la carte: YUI ARAGAKI

Veuillez vous inscrire sur http: // localhost: 3000 / cards / new /: détendu: Si vous pouvez vous inscrire, cliquez ici → Clients du tableau de bord Sera reflété dans!

Article de référence

PAY.JP API Implémentation des fonctions d'enregistrement et de suppression de carte de crédit avec Payjp (Rails) ｜ Qiita Comment activer jQuery dans Rails ｜ Qiita Implémentation de la fonction d'achat à l'aide de Payjp dans Rails ｜ Qiita [Rails] J'ai brièvement résumé la procédure de mise en œuvre de la fonction de paiement en utilisant PAYJP