常連

## テーマ、知りたいこと

LaravelでのECサイト構築について

## 背景、状況

私は現在、Laravelを使用してECサイトを構築するプロジェクトを計画しています。決済システムとしてStripeを組み込む予定ですが、具体的な構築方法についていくつか不明点があり、アドバイスを求めています。


## 状況
・Laravelでの管理画面: Laravelを使って管理画面を構築し、ここで商品管理を行う予定です。

・Stripeでの商品追加: Stripe APIを叩いて、Stripeに商品を追加する予定です。

## 検討事項
・LaravelとStripeの商品情報の同期: Laravelで商品情報を管理し、Stripe APIを通じてStripeに商品情報を追加する方法と、Stripeで商品を追加した後、Webhookを使用してLaravel側に商品情報を同期させる方法のどちらが効果的でしょうか？

・商品情報の同期の必要性: そもそも、LaravelとStripe間で商品情報を同期する必要はあるのでしょうか？それとも、別々に管理する方が良いのでしょうか？

## 期待する回答
・LaravelとStripeを用いたECサイト構築の経験者の意見

・商品情報の管理・同期に関するベストプラクティス

・Stripeを用いた商品管理における注意点や懸念事項

皆様の貴重な意見や経験を共有いただければと思います。よろしくお願いいたします。

 LaravelとStripeを使用したECサイト構築のベストプラクティス

Vue.jsでStripeを用いて決済処理を実装しています。
（今回の質問には関係ないかと思いますが、サーバー側はLaravel8系）

Stripeのフォームをモーダルで表示させるところまではうまく行きましたが、
そこから先、axiosをやる前でエラーが出てしまいます。
![イメージ説明](ff635d87717051962b409cbd90b76ca9.png)
order_checkの「クレジットカード」をクリックすると↓
![イメージ説明](e135bb7b63b2d75e99372921926a1c4d.png)
クレジットカード入力フォームが出て（Stripe.jsで実装）、お支払をクリックでaxios送信したいのですが、その前でエラーが出ます。

以下、コードです。

■ShopOrderCheck.vue　（order_checkページのVueコンポーネント。）
Stripeフォーム用コンポーネントの親コンポーネント
```
<template>
    <div>
        <main class="page-form">          
          <div class="bg-secondary-lighten-1 py-10">
            <div class="container">
              <div class="grouping shadow-md mb-6 md:w-10/12 max-w-screen-sm mx-auto">                
                <div class="flex items-center">                  
                  <div class="w-7/12">
                    <h3 class="font-bold text-lg">{{ product.name }}</h3>                    
                  </div>
                </div>
                <form class="form form--check" action="../epsilon/order_ep.php" method="POST" id="order_form">
                  <div class="form__group">
                    <label class="form__label">メールアドレス</label>
                    <div>
                      <div>{{ request.buy_email }}<p style="color:#D31004;" class="text-sm">※正しいメールアドレスかをご確認ください。</p></div>
                    </div>
                  </div>
                  <div class="form__group">
                    <label class="form__label">名前</label>
                    <div>
                      <div>{{ request.buy_name }}<p style="color:#D31004;" class="text-sm">※ご入力いただいたお名前で領収書を発行いたします。</p></div>
                    </div>
                  </div>
                  <div class="form__group">
                    <label class="form__label">名前フリガナ</label>
                    <div>
                      <div>{{ request.buy_namekana }}</div>
                    </div>
                  </div>                                    
                </form>
                
                <div class="mt-8" v-if="request.payment_method == 1">
                    <button type="button" class="form__button w-full button " id="order_card" @click="show">クレジットカード</button>
                </div>
                <div class="mt-8" v-else>
                    <button type="button" class="form__button w-full button" id="order_bank">銀行振込</button>
                </div>                
              </div>
            </div>
          </div>
        </main>
        <stripe-card
            :product="product"
            :request="request"
            :public_key="send_public_key"
            :csrf = "csrf"
        ></stripe-card>
    </div>
</template>
<script>
    export default {
        props: {
            csrf: {
                type: String,
            },
            product: {
                type: Object,
            },
            request: {
              type: Object
            },
            public_key: {
                type: Object,
            }
        },
        data() {
            return {
                errors: [],
                send_public_key: this.public_key.value,
            }
        },
        mounted() {
            console.log(this.public_key.value);
        },
        computed: {                        
            getPaymentMethod: function() {
                if(this.request.payment_method == 1) {
                    return "クレジットカード";
                }
                else {
                    return "銀行振込";
                }
            },                                    
        },
        methods: {
            
            show : function() {
                this.$modal.show('stripe-card');
            },
            hide : function () {
                this.$modal.hide('stripe-card');
            },
            regist: function() {                                
            },
        },        
    }
</script>
```

■問題のStripe用クレジットカードフォームの子コンポーネント　StripeCard.vue
```
<template>
    <modal name="stripe-card" @opened="setupStripe">
        <div>    
            <input type="hidden" name="_token" v-bind:value="this.csrf">
            <label for="exampleInputEmail1">カード名義</label>
            <input type="test" class="form-control col-sm-5" id="card-holder-name" required v-model="Form.cardHolderName">
            <label for="exampleInputPassword1">カード番号</label>
            <div class="form-group MyCardElement col-sm-5" id="card-element"></div>
            <div id="card-errors" role="alert" style='color:red'></div>
            <button
                class="btn btn-primary" id="card-button"
                @click="regist"
            >お支払</button>
        </div>  
    </modal>
</template>
<script>
    import {loadStripe} from '@stripe/stripe-js';
    export default {
        props: {
            product: {
                type: Object,
            },
            request: {
                type: Object,
            },
            public_key: {
                type: String,
            },
            csrf: {
                type: String,
            }
        },
        data() {
            return {
                stripe: null,
                stripeCard: null,
                Form: {
                    cardHolderName: null,
                },
            }
        },
        
        methods: {
            
            setupStripe: async function() {
                this.stripe = await loadStripe(this.public_key);

                const elements = this.stripe.elements();
    
                var style = {
                    base: {
                    color: "#32325d",
                    fontFamily: '"Helvetica Neue", Helvetica, sans-serif',
                    fontSmoothing: "antialiased",
                    fontSize: "16px",
                    "::placeholder": {
                      color: "#aab7c4"
                    }
                  },
                  invalid: {
                    color: "#fa755a",
                    iconColor: "#fa755a"
                  }
                };
    
                this.stripeCard = elements.create('card', {style: style, hidePostalCode: true});
                this.$nextTick(() => {
                    this.stripeCard.mount('#card-element');
                });
    
                this.stripeCard.on('change', function(event) {
                  var displayError = document.getElementById('card-errors');
                  if (event.error) {
                    displayError.textContent = event.error.message;
                  } else {
                    displayError.textContent = '';
                  }
                });

            },
            regist: function() {
                
                console.log(this.request.product_id); //consoleに表示される
                console.log(this.product.id); //consoleに表示される
                
                this.stripe.createToken(this.stripeCard,{name: document.querySelector('#card-holder-name').value}).then(function(result) {
                    if(result.error) { //エラーの処理
                        alert("エラー発生");
                    }
                    else { //成功の処理
                        
                        alert(result.token.id); //alertで出力される
                        console.log(this.request.product_id); //★表示されない
                        
                        const url = '/shop/order_stripe';
                        let params = new FormData();
                        
                        params.append('product_id', this.request.product_id);
                        params.append('buy_address', this.request.buy_address);
                        params.append('buy_address2', this.request.buy_address2);
                        params.append('buy_email', this.request.buy_email);
                        params.append('buy_name', this.request.buy_name);
                        params.append('buy_namekana', this.request.buy_namekana);
                        params.append('buy_num', this.request.buy_num);
                        params.append('buy_phone', this.request.buy_phone);
                        params.append('buy_post', this.request.buy_post);
                        params.append('getinfo', this.request.getinfo);
                        params.append('payment_method', this.request.payment_method);
                        params.append('stripe_token', result.token.id);
                        
                        axios.post(url, params, {
                            headers: {
                                'Content-Type': 'application/x-www-form-urlencode',
                            }
                        })
                        .then(response => {
                            //console.log(this.request.product_id);
                            /*
                            if(response.data == 1) {
                                alert("購入しました");
                                //location.href= '';
                            }
                            else {
                                alert(response.data);
                            }
                            */
                        });
                    }                    
                });
            },
        },        
    }
</script>
```
いくつかテスト用にconsole.logをしています。
methodの中のregist関数直後の
```
console.log(this.request.product_id);
console.log(this.product.id); 
```
はconsoleに表示されますが、this.stripe.createTokenのthenの中、成功の処理のconsole.log(this.request.product_id);は表示される以下のエラーが出てしまいます。
```
Uncaught (in promise) TypeError: Cannot read properties of undefined (reading 'request')
```
![イメージ説明](969cb75f2b22db70253bbdd6e898dcec.png)

同じrequest関数中なのに、エラーになってしまうのかがわかりません。。。thenの中だからでしょうか…（Javascript初心者です）

アドバイスいただけますと幸いです。
何卒、よろしくお願いいたします。

Vueの子コンポーネントで「Uncaught (in promise) TypeError: Cannot read properties of undefined」

### 実現したいこと

ここに実現したいことを箇条書きで書いてください。
- [ ] Stripeで決済が完了した際にGmailからメールを自動送信する
- [ ] メニューごとに異なる内容のメールを送信する

### 前提

以下のブログ記事を参考にしましたが、テスト環境で決済を実行してもエラーになってしまいます。
https://zenn.dev/hedgehog_noodle/articles/4d6d4256303555

### 発生している問題・エラーメッセージ
以下はStripeのWebhookのログから確認したものです。
```
Sorry, unable to open the file at this time.

Please check the address and try again.

Get stuff done with Google Drive

Apps in Google Drive make it easy to create, store and share online documents, spreadsheets, presentations and more.

Learn more at drive.google.com/start/apps.
```
GASで「実行」を押した際に以下のエラーが表示されますが、これはStripeから投稿して実施しているわけではないから発生するエラーなのかなと思っています。
```
TypeError: Cannot read properties of undefined (reading 'postData')
doPost	@ コード.gs:4
```

### 該当のソースコード
GASに書いたコードはAPIキーとメールアドレス以外はそのままです。



Stripeで決済が完了した際にGmailからメールを自動送信したい

お世話になります。下記エラー状況の解消に向けて、アドバイスをいただければ幸いです。

**【現状と解消したいエラー】**
現在WordPressサイトで「SimpleMembership」プラグインを利用して有料会員サイトを運営しております。
いままでPayPal決済のみで対応していたのですが、決済方法にStripeも導入しようと、
本番WordPressサイト（現在運用している本番ドメイン。仮に「Xサーバー上のhttps://A.com」と呼びます。）
と同一サーバー上のテスト環境（仮に「Xサーバー上のhttps://B.com」と呼びます。現在は運用していない別ドメインを使っています。）で以下の状況下で動作テストをしました。
結果、「Xサーバー上のhttps://B.com」では正常に動きました。

・同一テーマ（TCD AVANT)
・同一プラグイン（設定も同じ）
・同一サーバー（Xサーバー）

ところが、いざ本番の「Xサーバー上のhttps://A.com」に実装しようと
非公開ページに同一設定で決済ボタンを設置したところ、
「購入する」ボタンを押すと、以下のエラー画面に遷移してしまいます。

> Error occurred: No API key provided. (HINT: set your API key using "Stripe::setApiKey(<API-KEY>)". You can generate API keys from the Stripe web interface. See https://stripe.com/api for details, or email support@stripe.com if you have any questions.

> エラーが発生しました：APIキーが提供されていません。 （ヒント：「Stripe :: setApiKey（<API-KEY>）」を使用してAPIキーを設定します。StripeWebインターフェイスからAPIキーを生成できます。詳細についてはhttps://stripe.com/apiを参照するか、support @に電子メールを送信してください。ご不明な点がございましたら、stripe.comをご覧ください。

ちなみに、Stripeのサポートセンターにも問い合わせましたが、Stripe側には問題はなく、WordPress側は調べられないため解決できませんでした。
また、今回WordPressサイトとの接続を確認したStripe環境は「テストモードのみ」です。（Live環境では試していません）

**【現在確認できている状況（プラグインから出力されるはずのStripe('')の値が取得できていない）】**

まず、凡ミスを疑ってAPIキーは何度もテスト環境と同一だということを確認しました。
よって、入力ミスなどAPIキー設定が間違っているということではありませんでした。
そこで、
エラーが出てしまうサイトの決済ボタン配置ページのHTMLを確認したところ、以下の部分が空欄になってしまっていることが確認できました。
```html
コード
<div class="swpm-payment-button">
<div class="swpm-button-wrapper swpm-stripe-buy-now-wrapper">
 <form id='swpm-stripe-payment-form-12345' action='http://test.local/?swpm_process_stripe_sca_subscription=1&ref_id=swpm_7xxxxxxx' METHOD='POST'> 
<div style='display: none !important'>
<script src="https://js.stripe.com/v3/"></script>
<link rel='stylesheet' href='https://checkout.stripe.com/v3/checkout/button.css' type='text/css' media='all' /><script>
//該当部分　本来　var stripe = Stripe('pk_test_xxxxxxxx')とStripeキーが入るべき場所が空欄
		var stripe = Stripe('');
//該当部分ここまで
		jQuery('#swpm-stripe-payment-form-12345').on('submit',function(e) {
			e.preventDefault();
			var btn = jQuery(this).find('button').attr('disabled', true);
```


また、GoogleDeveloperToolのConsoleでは当然のように
> Uncaught IntegrationError: Please call Stripe() with your publishable key. You used an empty string.

と文字列が空だとしてエラーが出ています。

変数　stripe の中身を「console.log = stripe;」とConsoleに入力して確認してみましたが
>
undefined　

と返ってきてしまいます。
正常に動作しているサイトでは

> e {_listenerRegistry: {…}, retrieveSource: ƒ, …}
verifyMicrodepositsForSetup: ƒ (r,a)
  _apiKey: "pk_test_xxxxxxxx"

と返ってきます。

**【試したこと】**
（以下大幅に追記と変更をしました）
■ややこしくなるので今の検証環境の表記を整理しておきます。
１）Xサーバー上のhttps://A.com　※本番環境
２）Xサーバー上のhttps://B.com　※テスト環境
３）Local A　※ローカル環境上にhttps://A.comをコピーしたもの
４）Local B　※ローカル環境上にhttps://B.comをコピーしたもの
Xサーバー設定が原因なのか？WordPressが原因なのか？を切り分けたく、上記４種を用意しました。

■Stripe購入ボタンの状況
いずれも、SimpleMembershipのStripeボタン設定は
・Stripe管理画面で「テストモードを表示」をON
・プラグインの支払ボタン新規作成で「Stripe SCA Subscription」を選択
・Test用入力欄にTestキーを入力
・Live用入力欄は空欄
（※「Use Global API Keys Settings」のチェックははずしています。）
で設定しています。

0. WPテスト環境「Xサーバー上のhttps://B.com」を作成してボタンを設置　：WPテスト環境ではStripeテスト環境が正常に動作することを確認
　　・同一テーマ（TCD AVANT)
　　・同一プラグイン（設定も同じ）
　　・同一サーバー（Xサーバー）
　の状態で設置してみました。

0. ローカル環境「Local A　※https://A.comをコピーしたもの」を作成してボタンを設置　：エラーが出ることを確認
0. ローカル環境「Local B　※https://B.comをコピーしたもの」を作成してボタンを設置　：正常に動作することを確認
　　よって、Xサーバーの設定ではないと考え、意向はローカル環境でテストしました。

0. 正常に動作するLocal Bへ、エラーがでるLocal Aのテーマとプラグインをコピー　：正常に動作することを確認

　All in One Migrationを使って、エラーが出るWP本番環境のデータベース以外の部分をコピーしてみましたが、正常に決済画面に進めました。
　また、エラーが出ているサイトのプラグインをSimpleMembership以外すべてOFFにしましたが解決しませんでした。
　よってプラグインやテーマの問題ではないと思っております。

0. 正常に動作するLocal Bへ、エラーがでるLocal Aデータベースをコピー：テスト環境では正常に動作することを確認
　試しにデータベースもコピーしてみました。ただし、MySQL　の　wp_options　以外です。

上記のように、正常に動作するWPサイトとエラーが出る本番サイトの違いを比較しようと色々と検証したのですが、原因が特定できませんでした。

**【お聞きしたいこと】**
上記エラー内容をご覧いただいた上で、考えられる原因はわかりますでしょうか？

また、他に原因特定に役立つ検証方法などあればご教授いただけると嬉しいです。
上記の試した内容を踏まえて、使用テーマ・プラグイン・Sripeの購入ボタン設定の入力ミスが原因ではないとは思いますが、もし漏らしている検証方法などありましたらお教えいただければ幸いです。
また、Stripeサポート以外で、他に質問する適切な場があればお教えいただければ助かります。

何卒よろしくお願い致します。

【追記】
検証したサイトがわかりづらくなってしまっているようなので、表記を統一して変更しました。

SimpleMembershipでStripe決済ボタンを設置しようとすると本番環境でエラーが出る

決済にStripeを使おうと思っているのですが、Cloud Functionsをデプロイしようとすると以下のエラーが出ます。

```ここに言語を入力
Did you list all required modules in the package.json dependencies?
Detailed stack trace: Error: Cannot find module 'stripe'
```

index.jsとpackage.jsonは以下のようになっております。
原因がわかる方がおられましたらお教え頂きたいです。
よろしくお願い致します。

```ここに言語を入力
const functions = require('firebase-functions');
const admin = require('firebase-admin');
const CORS = require('cors');
const Stripe = require('stripe');

    const charge = (request, response) => {
      const body = JSON.parse(request.body);
      const token = body.token.id;
      const email = body.token.email;
      const amount = body.charge.amount;
      const currency = body.charge.currency;
    
      const stripe = Stripe(functions.config().stripe.token);
      stripe.charges
        .create({
          amount,
          currency,
          description: "",
          source: token,
          receipt_email: email
        })
        .then(charge => {
          send(response, 200, {
            message: "Success",
            charge
          });
        })
        .catch(error => {
          console.error(error);
          send(response, 500, {
            error: error.message
          });
        });
    };
    
    function send(response, statusCode, body) {
      response.send({
        statusCode,
        headers: { "Access-Control-Allow-Origin": "*" },
        body: JSON.stringify(body)
      });
    }
    
    exports.charge = functions.region('asia-northeast1').https.onRequest((request, response) => {
      const CORSRequestHandler = CORS({ origin: true });
      CORSRequestHandler(request, response, () => {
        if (request.method !== "POST") {
          send(response, 405, { error: "Invalid Request" });
        }
        try {
          charge(request, response);
        } catch (e) {
          console.log(e);
          send(response, 500, {
            error: `The server received an unexpected error. Please try again and contact the site admin if the error persists.`
          });
        }
      });
    });    

```

```ここに言語を入力
{
  "name": "APP_NAME",
  "version": "0.1.0",
  "private": true,
  "main": "index.js",
  "scripts": {
    "serve": "vue-cli-service serve",
    "build": "vue-cli-service build",
    "lint": "vue-cli-service lint"
  },
  "dependencies": {
    "@google-cloud/storage": "^2.5.0",
    "axios": "^0.19.0",
    "babel-polyfill": "^6.26.0",
    "cors": "^2.8.5",
    "css-scroll-snap-polyfill": "^0.1.2",
    "date-fns": "^1.30.1",
    "firebase": "^5.9.0",
    "firebase-admin": "^8.0.0",
    "firebase-functions": "^3.0.1",
    "http2": "^3.3.7",
    "ismobilejs": "^0.5.1",
    "jquery": "^3.4.0",
    "register-service-worker": "^1.6.2",
    "rx-js": "0.0.0",
    "stripe": "^7.1.0",
    "vue": "^2.6.6",
    "vue-router": "^3.0.1",
    "vue-rx": "^6.1.0",
    "vue-slick": "^1.1.15",
    "vue-smoothscroll": "^0.2.0",
    "vue-stripe-checkout": "^1.2.6",
    "vuejs-clipper": "^0.2.10",
    "vuetify": "^1.5.5",
    "vuex": "^3.0.1"
  },
  "devDependencies": {
    "@vue/cli-plugin-babel": "^3.5.0",
    "@vue/cli-plugin-eslint": "^3.5.0",
    "@vue/cli-plugin-pwa": "^3.5.0",
    "@vue/cli-service": "^3.7.0",
    "babel-eslint": "^10.0.1",
    "eslint": "^5.16.0",
    "eslint-plugin-vue": "^5.0.0",
    "node-sass": "^4.12.0",
    "sass-loader": "^7.1.0",
    "stylus": "^0.54.5",
    "stylus-loader": "^3.0.1",
    "vue-cli-plugin-vuetify": "^0.5.0",
    "vue-template-compiler": "^2.5.21",
    "vuetify-loader": "^1.0.5"
  }
}

```

Cloud Functionsのデプロイでエラーが出ます

### 実現したいこと

支払い管理画面をサブドメインで管理することのメリット・デメリット


### 前提

ユーザーに月額課金するサービスを開発しています。
フロントエンド: example.com Next.js
APIサーバー:api-example.com Laravel
課金管理ページ: billing-example.com Laravel

認証についてはセッションで管理しようと思っており、フロントエンドでログインしたら、課金管理ページでも自動的にログインされるようなイメージです。
このような方式を取る理由としては、課金処理に使うパッケージがLaravel,Vue.jsが必要であるパッケージであるためです。

### 相談
あまり、上記のような構成を見ないため、メリット・デメリットを教えていただきたいです。
個人的なデメリットとしては若干、セキュリティリスクが高まること、ユーザーが課金管理ページに遷移する時にサブドメインに飛ぶためユーザーが少し違和感を感じるかもしれないこと。かなと思っています。

実装は以下を参考にしています。
https://qiita.com/mgmgmogumi/items/a6a39aad036b395702c5

支払い管理画面をサブドメインで管理することのメリット・デメリット

stripeでサブスクリプション課金の決済処理を記述しているのですが、
利用者側での理由（残高不足）などで決済処理が失敗した場合の
エラーハンドリングに関してどの様に処理すればよいのか分からずに困っております。

\Stripe\Subscription::createメソッドの復帰値（レスポンス）で判定出来ると思っていたのですが、
payment_intent.succeededイベントかcharge.failedイベントをwebhookで受信を待ってから
受注確定処理になるのでしょか？

その場合、\Stripe\Subscription::create発行のプロセスと、webhookのプロセスは別になると思いますが、
ユーザへの成功・失敗のレスポンスはどのように処理すれば良いのでしょか？

断片的で恐縮ですが、ライフサイクルや処理方法に関して事例があれば宜しくお願い致します。

phpのコードは下記となります。

```php
// １．顧客情報を登録
$customer = \Stripe\Customer::create($createCustomerParms);

// ２．顧客をプランに登録する
$_plan = $this->user->getAttribute('StripePlan');
$subscription = \Stripe\Subscription::create([
  // 先程登録した顧客情報のID
  'customer' => $customer->id,
  'items' => [
    [
      'plan' => $_plan, //支払プランID
      'tax_rates' => ['txr_xxxxxxxxx'], //本番用税率
    ],
  ],
  'default_payment_method' => $this->request->getParameter('stripe_paymentmethod_id'),
]);

//　３．後続処理でDBトランザクション処理
//　４．処理結果レスポンス
```

stripe 決済失敗時のエラーハンドリングに関して

### 前提・実現したいこと

https://stripe.com/docs/stripe-js/elements/quickstart
ここ↑を参照して、決済画面を作っています。

入力画面→確認画面遷移して、入力カードの最後4桁を画面に表示したいです。
```
    <div id="card-element">
      
    </div>
```

### 発生している問題・エラーメッセージ
stripeのAPIからカード番号を返さないので、どうすればカードの最後4桁を取得して、画面にしますか？


### 試したこと

JSにStripe Elementの入力値をなかなか取得できませんでした
（入力のカード下4桁を取得して、確認画面に表示する）