clearErrorinputのエラーを手動で設定したりクリアする。setValue値を動的に設定できる。)};getValuesフォーム全体のデータを返す。GetValues</button>triggerValidationバリデーションのトリガーを手動で設定できる。Trigger</button>unregisterinputにunregisterを適用すると、フォームデータに含まれなくなる。コンポーネントのアンマウント後に登録を解除する場合に便利です。formStateフォームの状態がオブジェクトで入っている。errorがない場合trueおわりです。込み入ったことは試していないのですが、記述が簡単な印象でした。stripeとはstripeは、クレジットカードなどの決算処理を代行してくれるサービスです。シンプルな実装で決済処理を実現でき、カード情報を自社サーバで持たなくても良いなどの特徴があります。stripeに登録する1-1.はじめに、stripeの公式ページにて、今すぐ始めるをクリック。1-2メールアドレス、名前、パスワードを入力登録。テスト用に登録する際には、メールアドレスの存在確認は求められません。この時点で、登録が完了いたしました。1-3.ダッシュボードが表示される登録が完了したら、いくつかの質問がされるので答えていきます。質問が完了したら、次のようなダッシュボードが表示されます。2.テストAPIキーを取得するダッシュボードが表示されたら、まずはAPIキーを取得してみましょう。今回はテスト用のAPIキーを取得します。ダッシュボードのテストAPIキーの取得をクリックしてください。公開可能キーとシークレットキーの2つが表示されています。公開可能キーは、不特定多数に表示されてもかまわないキーです。JavaScriptなど、フロントサイドで使用されるキーです。シークレットキーは秘密にしなければなりません。PHPなど、サーバーサイドで使用されます。3.商品(Product)を登録する3-1.Billing->商品をクリックはじめに、提供するサービスである、商品(Product)を登録します。画面左側のBillingをクリックしてから、商品が表示されるのでもう一度クリックしてください。テスト商品を追加をクリックします。商品名を入力して、商品を作成をクリックします。ここでは商品の価格などの情報は入力しません。商品の配下に、プラン(Plan)を作成して個別に料金体系(価格、通貨、支払い間隔など)を設定します。一つの商品に対して、複数のプランが設定できます。有料会員という製品には以下のプランが紐付けられていると考えられます。月額3,000円4.プランを作成する4-1.プランの作成それでは実際にプランを作成してみます。商品を作成したら、そのままプランを作成するページへ遷移します。必要な項目を入力して、料金プランを追加をクリックすると、プランが追加されます。後ほど会員をプランに追加する際に、プランIDが必要になるのでここで取得します。prod_から始まる商品IDではないことに注意してください先程作成したプランクリックして詳細を表示します。plan_から始まる英数字がプランIDです。5.ライブラリをインストールするいよいよコードの実装にはいります。はじめに、Composerを利用して、PHPのライブラリを入手します。stripe/stripe-php6.フロントサイドの実装(JavaScript)6-1.カード情報を入手するカード情報を入手するための入力フォームを、JavaScritpで実装します。カード情報といっても、実際に得られるのはAPI通信によって得られたトークンの情報です。ここのdivタブがカード入力フォームに置き換わります。ここにエラーメッセージが表示されます。公開可能なAPIキーです。入力フォームを生成します。スタイルを指定することもできます。先程のdivタブにマウントします。クレジットカード番号や有効期限の入力に合わせてエラーメッセージを出力します。入力するフォームが生成されました。これらの項目はすべて必須項目です。郵便番号の入力をなくしたいなら、入力フォーム生成時にhidePostalCodeをtrueにします。4242の番号が用意されているので、そちらを利用します。その他の値はなんでもかまわないようです。7.サーバーサイド(PHP)7-1.顧客情報を登録する。フロントサイドから受け取ったトークンをもとに、顧客情報を登録します。デフォルトで使用する支払い方法。]);7-2.顧客をプランに登録するさらに、先程登録した顧客情報をもとに、プランへの登録処理を行います。トライアル(無料)期間。UNIX秒で指定する。}}trial_endを指定すると、トライアル(無料期間)を定めることができます。音楽ストリーミングサイトによくある初回3ヶ月無料!みたいなやつです。UNIX秒で指定するので、strtotimeを使用すればある程度簡単に指定することができます。プラン登録時の返却値のSubscriptionオブジェクトのIDは、解約時に必要になります。顧客情報とともにDBに登録します。8.登録を確認するダッシュボードに戻り、左側の顧客をクリックすると、先程登録した顧客情報が表示されているかと思います。無事顧客が登録されていましたね。詳細情報をみると顧客の定期支払を確認することができます。トライアル期間を設定したので、請求書をみると初回の支払いは0円で、次回請求日は3ヶ月後に設定されていることが確認できます。(今回登録した日付は01/15)9.プランを解約する最後に、顧客が有料会員プランを解約する流れを説明します。]);上記の例のようにcancel_at_period_endをtrueにしてプランをSubscription::updateで更新することで、解約後も有効期限内まではプランが有効になります。解約後はすぐにプランを終了したいときには、以下のようなコードを書きます。解約後はすぐにプランが終了する。\Stripe\Subscription::retrieve('sub_49ty4767H20z6a');$subscription->cancel();8-2.解約を確認ダッシュボードを確認すると、先程の会員が有効期限である04/15にプランがキャンセルされることが確認できました。おわりに定額課金の決済の簡単な流れを説明しました。他にも期間中のアップグレード、ダウングレードや途中解約に対する比例配分、更新時にカードが利用できなかった場合など複雑な状況にも対応できます。ドキュメントも参照してみてください。利用して決済フローを理解するTweetQiitaで続きを読む投稿日:2020-01-16T11:03:19+09:00setTimeoutを使って指定時間後に処理を行う際はスリープに注意setTimeoutで数秒ではなく数十分など長めに設定した場合に、上手く挙動しなかったことがありました。setTimeout指定時間後にJavaScript関数を実行するsetTimeout。ページを開いたまま20分経過したら自動で指定ページに遷移させようとしました。1000);普通思い浮かぶであろうこのコードでなんの問題もなく処理が動きそうです。(と思ってました...)ただ、このsetTimeoutはAndroidやiOSといったスマホ・タブレット端末のWebブラウザでは注意する必要があります。スマホ・タブレット端末では、アプリがバックグランドに入るスリープの概念があり、この状態ではsetTimeoutの呼び出し(JavaScriptの実行そのもの)も保留されてしまいます。スリープ中に止まったタイマーが完了するのは、1分後かもしれないし10分後、1時間後かもしれません...。経過時間をチェックしてスリープ対策スマホユーザーが多いサービスがゆえにスリープ対策をどうしてもしなければならなかったので、setIntervalで「ページを開いてから20分経過したか」を定期的にチェックし続ける処理を入れることにしました。500);この処理だと、途中でスリープしていた場合でもページを開いてから20分後に処理が走るスリープ中に20分を過ぎていたら復帰した瞬間に実行される今回は1秒だと微妙だったので0.5秒(500ミリ秒)でIntervalを指定しました。最後に「Webブラウザがバックグラウンドに回ってスリープ状態になり処理が止まる」という事象はPCでは起こりにくいので、AndroidやiOSで挙動が変わることがあるという点は注意すべきところですね。ケバブケースとかキャメルケースとかパスカルケースとかVueでのケースの書き方って場所によって何がいいか若干悩みますよね。(私だけ?)なので、まとめてみました。覚えておくべきケースをざっと説明すると。ケバブケース文字と文字の区切りを-で表現するやり方。「チェインケース」とも言う。ケバブのお肉をぶっさしている感じからきているとか。this-case-is-godキャメルケース文字と文字の区切りを大文字で表現するやり方。