Checkout』をマウントさせる方法タコつぼの中でプログラミングをコツコツ楽しむ人のためのやや偏ったブログです。当ページには【広告/PR】を含む場合があります。まとめ弊社は決済APIとして『Stripe』を採用しています。Stripe通常、Stripeは『Checkout』とよばれるAPIでstripe側の用意するWEBページでカスタマー決済を行い、決済処理は完了した時点で、元のサイトドメインへリダイレクトされるような手順を踏みます。Checkout』という機能です。Checkout」を統合させたときの作業の内容を防備録として残します。Checkout(ページ埋め込みCheckout)を使おう現状、実装しやすいのはStripe「Checkout」で、こちらを長らく採用としてきたStripeユーザーがほとんどかと思います。この場合、決済するカスタマーは一旦、Stripeの提供する決済ページに直にアクセスする必要がありました。昨今のセキュリティ事情に敏感なカスタマーからすると、当初アクセスしていたドメイン外へ誘導されるのは、何かしらストレスであり、商品の購入に至る前に離脱される可能性が増して、ちょっとした機会損失のリスクとも捉えられるようになりました。Checkout」という比較的新しい決済方法です。client_secretの値を使いCheckoutページとしてiframe内で表示することができます。Checkoutを利用する場合、まずサーバー用とクライアント用の両方のstripeライブラリを導入します。事始めの前の若干の注意点として、クライアント側ではstripe-jsを使います。API)という名前で区別されています。参考|stripe似て非なるものですので、2つを混合して使わないようにしましょう。プロジェクトにこれらをインストールしましょう。APIのシークレットや、サーバードメインのベースURLなど直接コードに書くのは憚られる変数を仕込んでおきます。Checkoutの実装作業さて、簡単のために、Sveltekitプロジェクトのsrcフォルダ内で、今回のテーマに関連するファイル構造だけを示すと、以下のようにしています。UIを使うことを念頭に、実装はおおよそ以下のようになります。Checkoutが表示されるようになります。残りの機能を実装していないので、順次編集していきます。決済処理でのセキュアなパートはAPIルートを設けて、サーバー側で処理するようにします。});}ここではアプリケーション内部から/api/checkout_embeddedルートにPOSTでアクセスすると新規の決済作業が、GETでは決済完了後のセッション情報がそれぞれ分岐して処理されます。決済後に返却されるページも必要になります。</section>{/if}また、リターンページに決済結果が返される際の処理は+page.server.tsに記述しておきます。CheckoutがSvelteコンポーネントで使えるようになりました。Checkoutを呼び出してみることにしましょう。APIの公開キーのほうは+page.tsでクライアント側から取得させてもOKです。(XSS)対応として、基本的にクロスドメインを介したスクリプトのやり取りが出来ないようにされています。Protectionつまり、Stripe側の提供するJSスクリプトを動作させる場合、CSPにStripeオリジンのスクリプトを通過させるように設定しないといけません。SveltekitでCSPのホワイトリストを追加する場合、svelte.config.jsを以下のように編集しておきます。config;これによって、ビルド後にサイトのメタ情報で、stripe側から提供されるスクリプトが許可されることになります。これですべての設定が完了したら、サーバー起動して動くかどうかをチェックしてみましょう。Checkoutがマウント出来ていたらOKです。これだけでも十分、見栄えがオンラインショップらしくなりました。Checkoutを実装するときに注意したいポイントなどを中心に解説していきました。難しく感じられたかもしれませんが、この機会にネットショップを自前でフルスクラッチするのに欠かせない、決済機能を比較的簡単に構築できるため、じっくりと使い方を理解されると良いでしょう。記事の担当:taconocatナンデモ系エンジニア主にAngularでフロントエンド開発することが多いです。開発環境はLinuxメインで進めているので、シェルコマンドも多用しております。プログラミングするのが好きな人間です。