Kentico Cloudを使用した製品の販売：Stripe統合

統合

Kentico Cloudを使用した製品の販売：Stripe統合

By Josef Dvorak 2017.11.01

ウェブサイトまたはアプリが公開され、コンテンツプレゼンテーションの最終調整が完了したら、訪問者があなたから購入できるストアを実装する絶好の機会です。

Kentico CloudのようなヘッドレスCMSを使用している場合、軽量の製品カタログとして使用するために必要な情報のほとんどをすでに持っている可能性があります。これにより、カタログはモバイルアプリ、店内の看板、ウェブサイトなど、さまざまなチャネルで広く利用できるようになります。

最も人気のあるインターネットビジネスプラットフォームの1つであるStripeを使用して、Webサイトでの購入を可能にする方法を見てみましょう。

以下を使用します。

サンプルダンシングヤギプロジェクト
Kenticoクラウドボイラープレート
Kenticoクラウドコードジェネレーター
Stripe.netNuGetパッケージ

新しいサブスクリプションごとに利用できるSampleDancing Goatプロジェクトには、使用できるCoffeeコンテンツタイプがすでに含まれており、Priceフィールドもあります。

これは素晴らしい！ただし、商品の表示をわかりやすくするために、ストアに商品番号というフィールドをもう1つ追加しましょう。

このようにして、商品をカスタマイズし、ストアに必要なフィールドを追加できます。製品の定義が終了したら、必ずページを公開してください。

Webサイトにはサンプルのボイラープレートプロジェクトを使用します。プロジェクトのストックバージョンはGitHubからダウンロードできますが、以下の例で使用されている完成したプロジェクトをダウンロードすることもできます。使用方法はreadmeファイルに含まれています。

ボイラープレートプロジェクトをクラウドプロジェクトに接続するには、プロジェクトIDをappsettings.jsonに追加することを忘れないでください。

ボイラープレートプロジェクトを実行すると、最初にクラウドプロジェクトの記事のリストが表示されます。ただし、簡単にするために、代わりにCoffeesを表示するように変更しましょう。

まず、クラウドジェネレーターを使用してCoffeeクラスの更新されたコードを生成してから、Coffeeクラスをプロジェクトに追加する必要があります。

 CloudModelGenerator.exe --projectid '' --namespace '' --outputdir './NewCode'

クラスをプロジェクトとタイプのリストに追加したら、次のようにします。

 public class CustomTypeProvider : ICodeFirstTypeProvider { public Type GetType(string contentType) { switch (contentType) { case 'article': return typeof(Article); case 'coffee': return typeof(Coffee); default: return null; } } }

記事の代わりにコーヒーをリストするようにHomeControllerを変更できます。

 var response = await DeliveryClient.GetItemsAsync( new EqualsFilter('system.type', 'coffee'), new LimitParameter(3), new DepthParameter(0), new OrderParameter('elements.product_name') );

そして、インデックスビューモデルをCoffeeに設定します。

 @model IEnumerable

その後、支払いボタンを含むCoffeeモデルの共有リストテンプレートを作成する必要があります。すでに\ Views \ Shared \ DisplayTemplates \ Article.cshtmlにArticleビューがあるため、そのコードを再利用して、参照されるクラスをCoffeeに変更し、リストのマークアップを作成することで、新しいビュー（CoffeeのCoffee.cshtml）を作成できます。 Stripeドキュメントのサンプルに続くフォームへ：

このマークアップから、フォームを処理できるように製品の価格を提供する必要があることがわかります。これは、プロジェクトを少し将来にわたって保証し、基礎となるコンテンツクラスが何であれ、将来複数の製品を販売することを決定した場合に、製品価格を取得する単一の方法を実施する良い機会です。

この目的のために、単一のメソッドでインターフェースを定義して、\ ECommerce \ Interfaces \ IProduct.csに製品価格を返すことができます。

 public interface IProduct { ///  /// Get product price. /// 
 decimal GetPrice(); }

このように、必要に応じて、各コンテンツクラスに異なる価格フィールドを設定できます。ここで行う必要があるのは、部分クラス内にメソッドを実装し、生成されたコンテンツクラスCoffeeのコードを\ Models \ Extensions \ Coffee.csに拡張することだけです。

 public partial class Coffee : IProduct { ///  /// Get product price. /// 
 public decimal GetPrice() { if (Price == null) { throw new Exception('Invalid product price.'); } return (decimal) Price; } }

すべての製品がこのインターフェースを実装するため、\ ECommerce \ Extensions \ IProductExtensions.csで価格計算とフォーマットのための追加の拡張メソッドを実装できます。

 public static class IProductExtensions { ///  /// Price in cents format. Ie $1.00 => 100 /// 
 /// Product which price to get. /// Integer representation of price in cents. public static int GetPriceInCents(this IProduct product) { return Decimal.ToInt32(product.GetPrice() * 100); } ///  /// Formats price based on E-commerce settings price /// 
 /// Product which price to format. ///  public static string GetFormatedPrice(this IProduct product) { var culture = ECommerceSettings.Culture; return String.Format(culture, '{0:c}', product.GetPrice()); } }

すべての要素をまとめると、Coffee.cshtml内で次のコードを使用してフォームを定義できます。

このようにして、Coffeeリストの各アイテムに独自の支払いボタンがあり、Stripe JavaScriptコードを使用して適切な支払いフォームをレンダリングするため、PCIコンプライアンスやクライアントデータストレージについて心配する必要はありません。

しかし、ご覧のとおり、最後に1つ欠けているのは、アクションURLです。フォーム自体は、Stripeから支払いトークンを受け取ることを保証するだけです。支払いを請求するには、コントローラー内で短いサーバー側コードを実行してカートに請求する必要があります。支払いフォームによってHTTPPOSTを介して送信されたStripeAPIトークンと、Stripe.netNuGetパッケージで定義されたChargeサービスを使用します。これらの2つのツールを使用して、\ Controllers \ ProcessPaymentController.csにコントローラーロジックを実装する準備が整いました。

 [Route('API/Store/ProcessPayment/{number}/{amount}/{currency}')] public class ProcessPaymentController : Controller { [HttpPost] public void Post(StripePaymentFormData formData, int number, int amount, string currency) { var charge = new StripeChargeCreateOptions() { Amount = amount, Currency = currency, Description = $'Product number: {number}', SourceTokenOrExistingSourceId = formData.StripeToken }; var chargeService = new StripeChargeService(); chargeService.Create(charge); Response.Redirect(Url.LocalContent(Request.Query['return'])); } }

コード全体でクラスECommerceSettingsへの参照に気付いたかもしれません。これは、通貨や文化などを扱うビジネスロジックの代用です。その完全なコードは、最終的なプロジェクトパッケージにあります。クラス自体は、アプリケーションシークレットを使用して、アプリケーションの残りの部分とともにStartup.csで初期化されます。

 StripeConfiguration.SetApiKey(Configuration['STRIPE_SECRET_KEY']); ECommerceSettings.StripePublishableKey = Configuration['STRIPE_PUBLISHABLE_KEY']; ECommerceSettings.StripeSecretKey = Configuration['STRIPE_SECRET_KEY'];

これで、プロジェクトは支払いを処理する準備が整いました。ウェブサイトにアクセスすると、コーヒー製品のリストが表示されます。