税金、割引、配送料などを管理する Stripe Elements Checkout セッション
Google Pay または Apple Pay ウォレットのいずれかが関連付けられた有効カードがある場合、このデモでは対応するウォレットのみが表示されます。
はじめに、Stripe アカウントを登録
アプリケーションから API にアクセスするには、公式の Stripe ライブラリを使用します。
npm install stripe@18.0.0 --save
2025-03-31. API バージョン以降を使用するよう SDK を設定します。
import Stripe from 'stripe' ;
const stripe = new Stripe ( 'sk_test_BQokikJOvBiI2HlWgH4olfQ2'
, {
apiVersion : '2025-03-31.basil' as any ,
} ) ; Checkout セッション Client Secret
import express , { Express } from 'express' ;
const app : Express = express ( ) ;
app . post ( '/create-checkout-session' , async ( req : Express . Request , res : Express . Response ) => {
const session = await stripe . checkout . sessions . create ( {
line_items : [
{
price_data : {
currency : 'usd' ,
product_data : {
name : 'T-shirt' ,
} ,
unit_amount : 2000 ,
} ,
quantity : 1 ,
} ,
] ,
mode : 'payment' ,
ui_mode : 'custom' ,
return_url : 'https://example.com/return?session_id={CHECKOUT_SESSION_ID} '
} ) ;
res . json ( { checkoutSessionClientSecret : session . client_secret } ) ;
} ) ;
app . listen ( 3000 , ( ) => {
console . log ( 'Running on port 3000' ) ;
} ) ;
Stripe.js スクリプトをチェックアウトページに含めるには、このスクリプトを HTML ファイルの head に追加します。常に js.stripe.com から Stripe.js を直接読み込むことにより、PCI への準拠が維持されます。スクリプトをバンドルに含めたり、そのコピーを自身でホストしたりしないでください。
スクリプトタグ <script src="https://js. を含めて、Stripe.js を v3 から basil に更新する必要があります。Stripe.js のバージョン管理
注 Stripe は、Stripe.js をモジュールとして読み込むために使用できる npm パッケージを提供しています。GitHub のプロジェクト 7.0.0
stripe.js を初期化します。
const stripe = Stripe (
'pk_test_TYooMQauvdEDq54NiTphI7jx'
,
) ; fetchClientSecret 関数を作成します。この関数は、サーバーから client secret を取得し、その client secret で解決されるプロミスを返します。initCheckout fetchClientSecret に渡します。initCheckout は checkout
Checkout
checkout.session() total と lineItems を読み取り、UI に表示することをお勧めします。
これにより、最小限のコード変更で新機能を有効にできます。たとえば、手動による通貨価格 total を表示していれば UI を変更する必要はありません。
const fetchClientSecret = ( ) => {
return fetch ( '/create-checkout-session' , { method : 'POST' } )
. then ( ( response ) => response . json ( ) )
. then ( ( json ) => json . checkoutSessionClientSecret ) ;
} ;
stripe . initCheckout ( { fetchClientSecret } )
. then ( ( checkout ) => {
const checkoutContainer = document . getElementById ( 'checkout-container' ) ;
checkoutContainer . append ( JSON . stringify ( checkout . lineItems , null , 2 ) ) ;
checkoutContainer . append ( document . createElement ( 'br' ) ) ;
checkoutContainer . append ( ` Total: ${ checkout . session ( ) . total . total . amount } ` ) ;
} ) ;
< div id = "checkout-container" > </ div >
顧客のメールアドレスを収集するためのメールアドレス入力を作成します。顧客が入力を完了してメールアドレスを検証し、保存したら、updateEmail
決済フォームのデザインに応じて、次の方法で updateEmail を呼び出すことができます。
支払いの送信 updateEmail を呼び出して、早い段階 (ぼかしの入力時など) で検証することもできます。次のステップに進む前 (フォームが複数のステップからなる場合の保存 ボタンのクリック時など)。 < input type = "text" id = "email" />
< div id = "email-errors" > </ div >
stripe . initCheckout ( { fetchClientSecret } ) . then ( ( checkout ) => {
const emailInput = document . getElementById ( 'email' ) ;
const emailErrors = document . getElementById ( 'email-errors' ) ;
emailInput . addEventListener ( 'input' , ( ) => {
emailErrors . textContent = '' ;
} ) ;
emailInput . addEventListener ( 'blur' , ( ) => {
const newEmail = emailInput . value ;
checkout . updateEmail ( newEmail ) . then ( ( result ) => {
if ( result . error ) {
emailErrors . textContent = result . error . message ;
}
} ) ;
} ) ;
} ) ;
Payment Element
checkout confirm
< button id = "pay-button" > Pay </ button >
< div id = "confirm-errors" > </ div >
stripe . initCheckout ( { fetchClientSecret } ) . then ( ( checkout ) => {
const button = document . getElementById ( 'pay-button' ) ;
const errors = document . getElementById ( 'confirm-errors' ) ;
button . addEventListener ( 'click' , ( ) => {
errors . textContent = '' ;
checkout . confirm ( ) . then ( ( result ) => {
if ( result . type === 'error' ) {
errors . textContent = result . error . message ;
}
} ) ;
} ) ;
} ) ;
決済ページに移動します。 次の表の決済手段を使用して、支払いの詳細を入力します。カード支払いの場合:カードの有効期限として任意の将来の日付を入力します。 任意の 3 桁のセキュリティコードを入力します。 請求先の任意の郵便番号を入力します。 Stripe に支払いを送信します。 ダッシュボードに移動し、取引ページ 支払いをクリックすると、請求先情報や購入したアイテムのリストなどの詳細が表示されます。この情報を使用して注文のフルフィルメントを実行 カード番号 シナリオ テスト方法 4242 4242 4242 4242 カード支払いは成功し、認証は必要とされません。 クレジットカード番号と、任意の有効期限、セキュリティコード、郵便番号を使用してクレジットカードフォームに入力します。 4000 0025 0000 3155 カード支払いには認証 クレジットカード番号と、任意の有効期限、セキュリティコード、郵便番号を使用してクレジットカードフォームに入力します。 4000 0000 0000 9995 カードは、insufficient_ などの拒否コードで拒否されます。 クレジットカード番号と、任意の有効期限、セキュリティコード、郵便番号を使用してクレジットカードフォームに入力します。 6205 5000 0000 0000 004 UnionPay カードは、13 ～ 19 桁の可変長です。 クレジットカード番号と、任意の有効期限、セキュリティコード、郵便番号を使用してクレジットカードフォームに入力します。
実装内容をテストするためのその他の情報については、テスト
参照情報 