LaravelとRecurlyを使用してサイトを作成します。 パート2

こんにちは、Habr! 最初の部分を勉強した後、私は2番目の部分を探し始めましたが、そこにはなかったので、翻訳を自分で書くことにしました。 それでは始めましょう。



はじめに


このシリーズの最初の部分では、Laravelに基づくサブスクリプションを使用して、サイトのバックボーンを作成しました。 また、ロールを持つサイトを作成し、登録ユーザー用のロールの配布を作成しました。 これで、登録、承認、終了を作成および実行できるようになりました。

このパートでは、Recurlyを統合して、有料メンバーシッププランをカスタマイズします。



仕事を始める



2つのRecurlyライブラリがあります-以前にcomposer(最初の部分)を使用してインストールしたPHPクライアントライブラリとRecurly JSです。 Recurly JSは、マップからの情報を安全に処理する動的フォーム統合用のクライアントライブラリです。

地図情報は、WebアプリケーションではなくRecurlyサーバーでホストされるため、頭痛の種が軽減されます。



Recurly JSライブラリをダウンロードし、 recurly.min.jsをビルドフォルダーからpublic / js / libsフォルダーにコピーし、レイアウトの終了タグの前に追加します。

<script src="/js/libs/recurly.min.js"></script> </body>
      
      





また、支払いフォームの表示に使用されるCSSスタイルも使用する必要があります。 css / recurlyディレクトリにディレクトリを作成し、themesディレクトリをそのディレクトリにコピーしてから、レイアウトの対応するセクションでそれを参照します

 <link href="/css/recurly/themes/default/recurly.css" rel="stylesheet">
      
      





Recurlyアカウントを作成した後に初めてログインすると、独自のサブスクリプションプランを作成するように求められます。 最初の部分では、ブロンズ、シルバー、ゴールドの3つの異なるレベルのサブスクリプションを作成しました。 いつでもそれらを変更したり、新しいものを追加したりできますが、今すぐそれを行うという事実に害はありません。



Bronzeというプランを作成します。 コードプランが「ブロンズ」 (小文字)に設定されていることに注意してください。 セット価格-月額£4.99を書いたが、好きな金額や時間枠を選択できます。 必要に応じて、1回限りの料金または無料の試用期間をインストールできます。



このプロセスをさらに2回繰り返して、シルバー(コード: "silver")プランとゴールド(コード: "gold")プランをセットアップします。 私はそれぞれ月額9.99ポンドと14.99ポンドで最低額を設定しました。



次に、Recurly管理パネルに移動します。ここでは、構成する必要があるいくつかの項目があり、アプリケーションを構成するために必要な情報を見つけます。 左側の[APIアクセス]をクリックします。 [APIアクセスを有効にする]をクリックします。 APIキーとサブドメインを書き留めます。



次に、左側(開発者の下)のRecurly.jsに移動します。 Enable Recurly.jsとTransparent Post APIをクリックします。 秘密鍵を書き留めます。



app / config / recurly.phpフォルダーにRecurly構成ファイルを作成し、選択したデフォルトの通貨(USD、GBP、AUDなど)を表示する3桁のコードと一緒に記述した値に置き換えます

 <?php return array( 'api_key' => 'YOUR-API-KEY', 'private_key' => 'YOUR-PRIVATE-KEY', 'subdomain' => 'YOUR-SUBDOMAIN', 'default_currency' => 'XYZ' );
      
      





次に、左側のポップアップ通知に進みます。 構成ボタンをクリックします。 / recurlyなどのアプリケーションのURLを入力します(例: www.example.com/recurly) 。 現時点では、HTTP認証のユーザー名とHTTPパスワードの認証フィールドは空白のままにします。



登録ページ



次に、潜在的な顧客が自分で計画を選択できるようにする登録ページを作成しましょう。 このパスapp / views / homeに沿って、次の内容でsignup.blade.phpファイルを作成します。

 @extends('layouts.default') @section('content') <h1>Signup</h1> <p>Please select your plan...</p> <div class="row-fluid pricing-table pricing-three-column"> <div class="span4 plan"> <div class="plan-name-bronze"> <h2>Bronze</h2> <span>£4.99 / Month</span> </div> <ul> <li class="plan-feature">Feature #1</li> <li class="plan-feature">Feature #2</li> <li class="plan-feature"><a href="/user/register/bronze" class="btn btn-primary btn-plan-select"><i class="icon-white icon-ok"></i> Select</a></li> </ul> </div> <div class="span4 plan"> <div class="plan-name-silver"> <h2>Silver <span class="badge badge-warning">Popular</span></h2> <span>£9.99 / Month</span> </div> <ul> <li class="plan-feature">Feature #1</li> <li class="plan-feature">Feature #2</li> <li class="plan-feature"><a href="/user/register/silver" class="btn btn-primary btn-plan-select"><i class="icon-white icon-ok"></i> Select</a></li> </ul> </div> <div class="span4 plan"> <div class="plan-name-gold"> <h2>Gold</h2> <span>£4.99 / Month</span> </div> <ul> <li class="plan-feature">Feature #1</li> <li class="plan-feature">Feature #2</li> <li class="plan-feature"><a href="/user/register/gold" class="btn btn-primary btn-plan-select"><i class="icon-white icon-ok"></i> Select</a></li> </ul> </div> </div> @stop
      
      





もちろん、タイムリーな価格更新を確実にする場合は、Recurly APIを使用して、このデータをテンプレートに自動的に入力する必要があります。

次に、次の行をcss / style.cssに追加します

 .pricing-table .plan { background-color: #f3f3f3; text-align: center; } .plan:hover { background-color: #fff; } .plan { color: #fff; background-color: #5e5f59; padding: 20px; } .plan-name-bronze { background-color: #665D1E; color: #fff; padding: 20px; } .plan-name-silver { background-color: #C0C0C0; color: #fff; padding: 20px; } .plan-name-gold { background-color: #FFD700; color: #fff; padding: 20px; } .pricing-table-bronze { background-color: #f89406; color: #fff; padding: 20px; } .pricing-table .plan .plan-name span { font-size: 20px; } .pricing-table .plan ul { list-style: none; margin: 0; } .pricing-table .plan ul li.plan-feature { border-top: 1px solid #c5c8c0; padding: 15px 10px; } .pricing-three-column { margin: 0 auto; width: 80%; } .pricing-variable-height .plan { display: inline-block; float: none; margin-left: 2%; vertical-align: bottom; zoom:1; *display:inline; } .plan-mouseover .plan-name { background-color: #4e9a06 !important; } .btn-plan-select { font-size: 18px; padding: 8px 25px; }
      
      





最後に、 app / routes.phpでルートを作成します

 Route::get('/signup', function() { return View::make('home/signup'); });
      
      







支払いを受け入れる





それで、支払い受理ポイント、つまり登録ページ-支払いに行きました。

まず、 ユーザーを変更し、コールバックのPOSTを登録しましょう。 ホームページにリダイレクトする代わりに、ユーザーを支払いページに移動します。 次の行を置き換えます。

 return Redirect::to('/')->with( 'success', 'Welcome to the site, . Auth::user()->name . '!' );
      
      





これらに:

 Session::put('register_user', $user); return Redirect::to('/user/register/payment');
      
      





JavaScriptコードをフッター(下)に埋め込むことができるように、デフォルトのレイアウトを拡張する必要があります。 最後のスクリプトタグの後に次の行を追加します。

 @yield('scripts')
      
      





次に、新しいルートを作成します。

 Route::get('/user/register/payment', function() { Recurly_js::$privateKey = Config::get('recurly.private_key'); $plan = 'bronze'; // todo: get this from vars $user = Session::get('register_user'); $signature = Recurly_js::sign(array( 'account' => array( 'account_code' => 'user_' . $user->id ), 'subscription' => array( 'plan_code' => $plan, 'currency' => Config::get('recurly.default_currency') ) )); return View::make('user/register')->with(array( 'plan' => $plan, 'subdomain' => Config::get('recurly.subdomain'), 'currency' => Config::get('recurly.default_currency'), 'signature' => $signature )); });
      
      





このコードに関する注意事項:



支払いページは2つの部分で構成され、最初の部分は単純なHTMLです。

 @extends('layouts.default') @section('content') <div id="recurly-subscribe"> </div> @stop
      
      





Recurly.jsは、クライアントが生成した支払いフォームコードをこのdivに挿入します。



次に、レイアウトテンプレートの下部で出力を受け取るセクションにJavaScriptを追加します。

 @section('scripts') <script> Recurly.config({ subdomain: '{{ $subdomain }}', currency: '{{ $currency }}' }); Recurly.buildSubscriptionForm({ target: '#recurly-subscribe', // Signature must be generated server-side with a utility // method provided in client libraries. signature: '{{ $signature }}', successURL: '/user/register/confirm', planCode: '{{ $plan }}', distinguishContactFromBillingInfo: true, collectCompany: false, termsOfServiceURL: 'http://www.example.com/terms', acceptPaypal: true, acceptedCards: ['mastercard', 'discover', 'american_express', 'visa'], account: { firstName: 'Joe', lastName: 'User', email: 'test@example.net', phone: '555-555-5555' }, billingInfo: { firstName: 'Joe', lastName: 'User', address1: '123 somestreet', address2: '45', city: 'San Francisco', zip: '94107', state: 'CA', country: 'US', cardNumber: '4111-1111-1111-1111', CVV: '123' } }); </script> @stop
      
      





ここで魔法が発生します-Recurlyが支払いフォームを作成し、ID #recurly-subscribeの divに表示します。これには情報が必要です。生成された署名が必要なフォームになります。

次に、フォームを正常に送信した後にRecurlyが返すコールバック。これは次のパラメーターを使用してsuccessURLで定義されます。

 Route::post('/user/register/confirm', function() { $recurly_token = Input::get('recurly_token'); Recurly_js::$privateKey = Config::get('recurly.private_key'); $result = Recurly_js::fetch($recurly_token); var_dump($result); });
      
      





繰り返しになりますが、Recurly.jsを構成の秘密キーで初期化し、それを使用して、RecurlyがPOST変数(recurly_token)として送信するトークンで表されるオブジェクトを取得します。 これはRecurly_Subscriptionのインスタンスになり 、そこからさまざまな情報を抽出できます。 var_dump()を使用してこれを推測し、データを調べます。



はじめに、プランコードを取得して、ユーザーがサブスクライブしたものを確認します。

 $plan_code = $result->plan->plan_code;
      
      





さて、あなたは適切な役割を見つける必要があります、気をつけてください-私たちは彼らに名前を「ブロンズ」、「シルバー」、「ゴールド」と与えました。

 $role = Role::where('name', '=', $plan_code)->first();
      
      





次に、セッションからユーザーを取得します(そして、セッションからユーザーを削除します)。

 $user = Session::get('register_user'); Session::forget('register_user');
      
      





次に、対応する新しいユーザーのロールを提供します。

 $user->roles()->attach($role);
      
      





次に、遅延ロールを削除する必要があります。

 $role_pending = $role_pending = Role::where('name', '=', 'pending')->first(); DB::table('role_user')->where('user_id', '=', $user->id)->where('role_id', '=', $role_pending->id)->delete();
      
      





現在、支払いを受け入れ、サブスクリプションを作成し、ユーザーが選択したプランに基づいて新しいアカウントにロールを適用することにより、登録プロセスを補完しています。



アカウント管理ページ



ユーザーが自分のアカウントを管理できるシンプルなページを作成しましょう。

当然、これにはユーザーがログインする必要があるため、認証フィルターを適用する必要があります。

保護されたページごとにこのフィルターを指定する代わりに、次のように、関連するすべてのルートをグループに入れることができます。

 Route::group(array('before' => 'auth'), function() { Route::get('/user/account', function() { // User must be logged in }); Route::get('user/account/billing', function() { // User must be logged in }); });
      
      





アカウントページの呼び出しは簡単です。

 Route::get('/user/account', function() { return View::make('user/account/index'); });
      
      





これで、アドレスの形式はapp / views / user / account / index.blade.phpになります。

 @extends('layouts.default') @section('content') <h1>Your Account</h1> <ul> <li><a href="/user/account/edit">Edit your account information</a></li> <li><a href="/user/account/plan">Update your subscription plan</a></li> <li><a href="/user/account/billing">Update your Billing information</a></li> </ul> @stop
      
      





請求ページを更新することから始めましょう。 もちろん、支払いページでは、Recurlyがフォームを作成して入力し、Webアプリケーションの近くでいつでもRecurlyに新しい情報を通知(POST)するため、ユーザーの支払い情報は保存しません。

 Route::get('user/account/billing', function() { Recurly_js::$privateKey = Config::get('recurly.private_key'); $account_code = 'user_' . Auth::user()->id; $signature = Recurly_js::sign( array('account' => array('account_code' => $account_code)) ); return View::make('user/account/billing')->with(array( 'subdomain' => Config::get('recurly.subdomain'), 'currency' => Config::get('recurly.default_currency'), 'account_code' => $account_code, 'signature' => $signature )); });
      
      





これは、(異なる情報を使用しますが)署名を作成し、ビュー内のいくつかのパラメーターを渡すことでRecurly.jsライブラリーを初期化するという意味で、支払いページに非常に似ています。

パスアプリ/ビュー/ユーザー/アカウント/ billing.blade.php

支払いページでほぼ同じパターンに従います。

 @extends('layouts.default') @section('content') <div id="recurly-billing"> </div> @stop @section('scripts') <script> Recurly.config({ subdomain: '{{ $subdomain }}', currency: '{{ $currency }}' }); Recurly.buildBillingInfoUpdateForm({ target: '#recurly-billing', successURL: '/user/account/billing/confirm', accountCode: '{{ $account_code }}', signature: '{{ $signature }}' }); </script> @stop
      
      





最後に、ユーザーが支払い情報を入力したときの非常に簡単なコールバック:

 Route::post('user/account/billing/confirm', function() { return Redirect::to('/user/account')->with('success', 'Your billing information has been updated.'); });
      
      





そしてここにある! ユーザーは、お支払い情報を更新できます!

アカウントの編集を実装しませんでした。 それは非常に単純であり、あなたのための運動のままにしてみましょう。



プッシュ通知





Recurly APIを要求する機能に加えて、pingサービスは、イベントが発生したときに通知を受け取るアプリケーションです。

ただし、これらの通知をモバイルダイバーシティと混同しないでください。完全に異なるものです。

基本的に、サービスはPOST要求をURIに送信し、XMLドキュメントを要求本文として送信します。 Recurlyライブラリを使用して、必要な情報を抽出し、それに応じて行動できます。 これらの通知については、Recurlyのドキュメントで詳しく説明されています。



通知を受け取ったときのコールバック関数を定義しましょう:

 Route::post('recurly', function(){ $xml = file_get_contents ("php://input"); $notification = new Recurly_PushNotification($xml); switch ($notification->type) { // ... process notification } });
      
      





おそらく、誰かがサインアップしてサービスの支払いをするとすぐに、彼は未定義のサブスクライバーであり、サブスクリプションが継続するかどうかは不明であることをご存じでしょう。 したがって、最も興味深いのは、サブスクリプションの解除の通知です。 Recurlyからの通知を使用して、非アクティブなサブスクリプションを特定し、対応するロールを取り消すことができます。 例:

 switch ($notification->type) { case 'canceled_subscription_notification': // get the account code $account_code = $notification->account->account_code; // extract the user ID (account_code format is user_ID) $user_id = intval(substr($account_code, (strpos($account_code, '_')+1))); // find the user in question $user = User::find($user_id); // get the plan code $plan_code = $notification->subscription->plan->plan_code; // find the corresponding role... $role = Role::where('name', '=', $plan_code)->first(); // ...and revoke it DB::table('role_user')->where('user_id', '=', $user->id)->where('role_id', '=', $role)->delete(); break; // ... process notification }
      
      







通知の種類に応じて、他にもできることがいくつかあります。

新規、更新、キャンセルなどの通知を使用して、サブスクリプション履歴を作成し、メンバーの数を追跡し、拒否を分析できます。 また、実際の収益と予想収益を追跡するために、取引通知(肯定的(支払い)または否定的(返品))を使用することもできます。



これが元の記事の終わりです。 私の記事を読んでくれたみんなに感謝します。 いくつかの場所では、著者が何を言いたいのか理解していませんでしたが、読んでいるときにこれを理解するでしょう。 結果に興味があるなら、私が得たものをgithubに投稿します(今のところ、残念ながら投稿できません-第二部で練習を終える時間はありません)。 お時間をいただきありがとうございます!



All Articles