質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
Stripe

Stripeとは、米国のオンライン決済システム提供企業、及び同社が提供する決裁システムを指します。Webサイトやモバイルアプリにコードを組み込むことでクレジットカードなどの決済サービスが簡潔に追加できます。

Laravel

LaravelとはTaylor Otwellによって開発された、オープンソースなPHPフレームワークです。Laravelはシンプルで表現的なシンタックスを持ち合わせており、ウェブアプリケーション開発の手助けをしてくれます。

PHP

PHPは、Webサイト構築に特化して開発されたプログラミング言語です。大きな特徴のひとつは、HTMLに直接プログラムを埋め込むことができるという点です。PHPを用いることで、HTMLを動的コンテンツとして出力できます。HTMLがそのままブラウザに表示されるのに対し、PHPプログラムはサーバ側で実行された結果がブラウザに表示されるため、PHPスクリプトは「サーバサイドスクリプト」と呼ばれています。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

Laravel 5

Laravel 5は、PHPフレームワークLaravelの最新バージョンで、2014年11月に発表予定です。ディレクトリ構造がが現行版より大幅に変更されるほか、メソッドインジェクションやFormRequestの利用が可能になります。

Q&A

解決済

2回答

2872閲覧

Stripe Elements決済の実装でstripeTokenを取得できません

退会済みユーザー

退会済みユーザー

総合スコア0

Stripe

Stripeとは、米国のオンライン決済システム提供企業、及び同社が提供する決裁システムを指します。Webサイトやモバイルアプリにコードを組み込むことでクレジットカードなどの決済サービスが簡潔に追加できます。

Laravel

LaravelとはTaylor Otwellによって開発された、オープンソースなPHPフレームワークです。Laravelはシンプルで表現的なシンタックスを持ち合わせており、ウェブアプリケーション開発の手助けをしてくれます。

PHP

PHPは、Webサイト構築に特化して開発されたプログラミング言語です。大きな特徴のひとつは、HTMLに直接プログラムを埋め込むことができるという点です。PHPを用いることで、HTMLを動的コンテンツとして出力できます。HTMLがそのままブラウザに表示されるのに対し、PHPプログラムはサーバ側で実行された結果がブラウザに表示されるため、PHPスクリプトは「サーバサイドスクリプト」と呼ばれています。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

Laravel 5

Laravel 5は、PHPフレームワークLaravelの最新バージョンで、2014年11月に発表予定です。ディレクトリ構造がが現行版より大幅に変更されるほか、メソッドインジェクションやFormRequestの利用が可能になります。

0グッド

0クリップ

投稿2018/09/15 00:54

いまC2Cのマッチングサービスを開発しており、そこでの決済機能としてStripe Elementsを採用することにしました。

開発環境は以下の通りです。
-PHP7.1
-Laravel5.5
-LAMP環境

Stripe Elementsは以下のドキュメントを参考に実装しています。
Card Element Quickstart

#質問したい内容
こちらのドキュメントの工程をすべて完了しました。

決済フォームにクレジットカード情報を入力し、formをsubmitするとstripeTokenが発行されるはずなのですが、僕の実装ではstripeTokenが発行されないといった状況に陥っています。

Stripeドキュメントからコピーして貼り付けたJavaScriptをデバッグしてみると、どうやら以下の箇所がうまく起動していないみたいです。

JavaScript

1// Handle form submission. 2 var form = document.getElementById('payment-form'); 3 form.addEventListener('submit', function(event) { 4 event.preventDefault(); 5 6 stripe.createToken(card).then(function(result) { 7 if (result.error) { 8 // Inform the user if there was an error. 9 var errorElement = document.getElementById('card-errors'); 10 errorElement.textContent = result.error.message; 11 } else { 12 // Send the token to your server. 13 stripeTokenHandler(result.token); 14 } 15 }); 16 }); 17 function stripeTokenHandler(token) { 18 // Insert the token ID into the form so it gets submitted to the server 19 var form = document.getElementById('payment-form'); 20 var hiddenInput = document.createElement('input'); 21 hiddenInput.setAttribute('type', 'hidden'); 22 hiddenInput.setAttribute('name', 'stripeToken'); 23 hiddenInput.setAttribute('value', token.id); 24 form.appendChild(hiddenInput); 25 // Submit the form 26 form.submit(); 27 }

上記のコードは、決済フォームをsubmitした際に発火し、stripeTokenが発行されるという処理だと思うのですが、こちらがどうやらうまく発火していないようです。

しかしながら、なぜこちらがsubmitしても発火されないのかがわからず、つまっております。
どなたか解決策または何か少しでもわかる方がいらっしゃいましたら、教えていただきたいです。

実際に問題が発生しているコードを以下に貼らせていただきます。

reserve.blade.php

PHP

1@extends('layouts.application') 2 3<script src="https://js.stripe.com/v3/"></script> 4 5@section('content') 6 <div class="container"> 7 <div class="row"> 8 <div class="col-md-8 col-md-offset-2"> 9 <form action="{{ route('experiences.complete', $model) }}" method="post" id="payment-form"> 10 {{ csrf_field() }} 11 <div class="form-row"> 12 13 <label for="card-element">お支払い</label> 14 15 <div id="card-element"> 16 <!-- A Stripe Element will be inserted here. --> 17 </div> 18 <!-- Used to display form errors. --> 19 <div id="card-errors" role="alert"></div> 20 21 </div> 22 23 <button class="btn btn-primary">支払う</button> 24 25 </form> 26 </div> 27 </div> 28 </div> 29 30 <script> 31 (function(){ 32 // Create a Stripe client. 33 var stripe = Stripe('{{ config('services.stripe.key')}}'); 34 35 // Create an instance of Elements. 36 var elements = stripe.elements(); 37 38 // Custom styling can be passed to options when creating an Element. 39 // (Note that this demo uses a wider set of styles than the guide below.) 40 var style = { 41 base: { 42 color: '#32325d', 43 lineHeight: '18px', 44 fontFamily: '"Helvetica Neue", Helvetica, sans-serif', 45 fontSmoothing: 'antialiased', 46 fontSize: '16px', 47 '::placeholder': { 48 color: '#aab7c4' 49 } 50 }, 51 invalid: { 52 color: '#fa755a', 53 iconColor: '#fa755a' 54 } 55 }; 56 57 // Create an instance of the card Element. 58 var card = elements.create('card', { 59 style: style, 60 hidePostalCode: true, 61 }); 62 63 // Add an instance of the card Element into the `card-element` <div>. 64 card.mount('#card-element'); 65 66 // Handle real-time validation errors from the card Element. 67 card.addEventListener('change', function(event) { 68 var displayError = document.getElementById('card-errors'); 69 if (event.error) { 70 displayError.textContent = event.error.message; 71 } else { 72 displayError.textContent = ''; 73 } 74 }); 75 76 // Handle form submission. 77 var form = document.getElementById('payment-form'); 78 form.addEventListener('submit', function(event) { 79 event.preventDefault(); 80 81 stripe.createToken(card).then(function(result) { 82 if (result.error) { 83 // Inform the user if there was an error. 84 var errorElement = document.getElementById('card-errors'); 85 errorElement.textContent = result.error.message; 86 } else { 87 // Send the token to your server. 88 stripeTokenHandler(result.token); 89 } 90 }); 91 }); 92 function stripeTokenHandler(token) { 93 // Insert the token ID into the form so it gets submitted to the server 94 var form = document.getElementById('payment-form'); 95 var hiddenInput = document.createElement('input'); 96 hiddenInput.setAttribute('type', 'hidden'); 97 hiddenInput.setAttribute('name', 'stripeToken'); 98 hiddenInput.setAttribute('value', token.id); 99 form.appendChild(hiddenInput); 100 // Submit the form 101 form.submit(); 102 } 103 })(); 104</script> 105@endsection

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答2

0

ベストアンサー

I broke through this difficult question. This was a simple question.

投稿2018/09/18 12:49

退会済みユーザー

退会済みユーザー

総合スコア0

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

0

そもそも form.addEventListener('submit', function(event) { に処理が到達していないということでしょうか?

<button class="btn btn-primary">支払う</button> としていますが <input type="submit"><button type="submit"> を記述しないとformのsubmitイベントは発火しないんじゃないでしょうか。

投稿2018/09/15 03:48

退会済みユーザー

退会済みユーザー

総合スコア0

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

退会済みユーザー

退会済みユーザー

2018/09/15 04:58

回答ありがとうございます! というよりも、単純にformのsubmit時にイベントが発火しないといった状況です。この箇所以外のJSはしっかり動いています。 >そもそも form.addEventListener('submit', function(event) { に処理が到達していないということでしょうか? またtype="submit"を試しにつけみましたが、結果は変わらずでした。
退会済みユーザー

退会済みユーザー

2018/09/15 05:08

> というよりも、単純にformのsubmit時にイベントが発火しないといった状況 は、私の言った状況(そこに処理が到達していない)とは違うのでしょうか?
退会済みユーザー

退会済みユーザー

2018/09/15 06:40

いえ、そこまで処理は到達しています。
退会済みユーザー

退会済みユーザー

2018/09/15 07:03

ああ、そうなのですね。 stripeについては経験がないので、他の回答者さんを待たれるのが良いと思います。
退会済みユーザー

退会済みユーザー

2018/09/15 15:25

そうします。お忙しい中、ありがとうございましたm(_ _)m
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問