支払いページを作成する
コードを追加して、Apple Pay および Google Pay を導入します。
CSS を使用してすべてのコンポーネントをカスタマイズします。
注
プラットフォームプロフィールを参照して、ダイレクト支払いまたはデスティネーション支払いのどちらがお客様の事業に適しているかを判断してください。
デスティネーション支払い
この例では、プラットフォームは、不動産物件を賃貸する住宅所有者向けに支払いを作成する住宅賃貸マーケットプレイスです。デスティネーション支払いは、他のアプリケーションでも使用できます。
ステップ 1: PaymentIntent を作成する サーバー側
curl https://api.stripe.com/v1/payment_intents \ -u "
:" \ -d amount=1099 \ -d currency=usd \ -d "automatic_payment_methods[enabled]"=truesk_test_4eC39HqLyjWDarjtT1zdp7dc
最新バージョンの API では、automatic_payment_methods
パラメーターの指定が任意になっています。この機能がデフォルトで有効になっているためです。
Stripe は PaymentIntent (支払いインテント) オブジェクトを使用して、顧客から支払いを回収するお客様の意図を示し、プロセス全体を通して請求の実施と支払い状態の変化を追跡します。
サーバーで金額および通貨を指定して PaymentIntent
を作成します。支払い額は常に、クライアント側ではなく、信頼性の高い環境であるサーバー側で決定してください。これにより、悪意のある顧客が価格を操作できないようにすることができます。
curl https://api.stripe.com/v1/payment_intents \ -u
: \ -d amount=1000 \ -d currency="usd" \ -d "automatic_payment_methods[enabled]"=true \ -d application_fee_amount="123" \ -d "transfer_data[destination]"=sk_test_4eC39HqLyjWDarjtT1zdp7dc{{CONNECTED_STRIPE_ACCOUNT_ID}}
住宅賃貸の例では、顧客が Stripe プラットフォームを使用して賃借料を支払い、Stripe が顧客の賃貸料を住宅所有者に支払うビジネスを構築します。このビジネスを設定するには、次の手順に従います。
transfer_data[destination]
で、賃借料がデスティネーション支払いであることを示す。application_fee_amount
で、賃借料の内、プラットフォームに送られる金額を指定する。
賃借料の支払いが行われたら、Stripe は連結アカウントの保留中の残高 (transfer_data[destination]
) に全額送金します。その後、Stripe は手数料の金額 (application_fee_amount
) をプラットフォームのアカウントに送金します。これは賃貸事業を支えるレベニューシェアです。その後、Stripe はプラットフォームの手数料の金額から Stripe 手数料を差し引きます。この資金フローを以下の図で示しています。
注
この PaymentIntent は、デスティネーション支払いを作成します。送金のタイミングを管理したり、1 回の支払いの売上を複数の当事者に送金したりする必要がある場合は、代わりに支払いと送金別方式を使用してください。
client secret を取得する
PaymentIntent には、client secret が含まれています。これは、支払いプロセスを安全に完了するためにクライアント側で使用されます。client secret をクライアント側に渡す際は、いくつかの方法を使用できます。
ブラウザーの fetch
関数を使用して、サーバーのエンドポイントから client secret を取得します。この方法は、クライアント側が 1 ページのアプリケーションで、特に React などの最新のフロントエンドフレームワークで構築されている場合に最適です。client secret を処理するサーバーのエンドポイントを作成します。
get '/secret' do intent = # ... Create or retrieve the PaymentIntent {client_secret: intent.client_secret}.to_json end
その後、クライアント側で JavaScript を使用して client secret を取得します。
(async () => { const response = await fetch('/secret'); const {client_secret: clientSecret} = await response.json(); // Render the form using the clientSecret })();
ステップ 2: カード詳細を収集する クライアント側
Stripe Elements を使用して、クライアント側でカード情報を収集する準備ができました。Elements とは、カード番号、郵便番号、有効期限を収集し検証するための事前構築された UI コンポーネントのセットです。
Stripe Element には、HTTPS 接続を介して支払い情報を Stripe に安全に送信する iframe が含まれています。組み込みを機能させるには、決済ページのアドレスの先頭を http:// ではなく https:// にする必要があります。
HTTPS を使用せずに組み込みをテストできます。本番環境で支払いを受け付ける準備が整ったら、HTTPS を有効にしてください。
Stripe Elements を設定する
Stripe Elements は Stripe.js の機能として自動的に使用できるようになります。決済ページに Stripe.js スクリプトを含めるには、HTML ファイルの head
にこれを追加します。常に js.stripe.com から Stripe.js を直接読み込むことにより、PCI への準拠が維持されます。スクリプトをバンドルに含めたり、そのコピーを自身でホストすることがないようにしてください。
<head> <title>Checkout</title> <script src="https://js.stripe.com/v3/"></script> </head>
次の JavaScript を使用して、決済ページに Elements のインスタンスを作成します。
// Set your publishable key: remember to change this to your live publishable key in production // See your keys here: https://dashboard.stripe.com/apikeys var stripe = Stripe(
); var elements = stripe.elements();'pk_test_TYooMQauvdEDq54NiTphI7jx'
Elements を支払いページに追加する
支払いフォームには、Elements の配置場所が必要です。一意の ID を持つ空の DOM ノード (コンテナー) を支払いフォーム内に作成し、その ID を Elements に渡します。
<form id="payment-form"> <div id="card-element"> <!-- Elements will create input elements here --> </div> <!-- We'll put the error messages in this element --> <div id="card-errors" role="alert"></div> <button id="submit">Pay</button> </form>
上記のフォームが読み込まれたら、Element のインスタンスを作成し、それを Element コンテナにマウントします。
// Set up Stripe.js and Elements to use in checkout form var elements = stripe.elements(); var style = { base: { color: "#32325d", } }; var card = elements.create("card", { style: style }); card.mount("#card-element");
card
Element は、カードに関する必要な詳細情報をすべて安全に収集する 1 つの柔軟な入力フィールドを挿入することによって、フォームを簡素化し、必要なフィールドの数を最小限に抑えます。また、cardNumber
、cardExpiry
、cardCvc
の Element を組み合わせて、複数入力の柔軟なカードフォームを作成する方法もあります。
注
カードの支払い成功率を向上し、不正使用を削減するため、常に郵便番号を収集してください。
単一行の Card Element は、顧客の郵便番号を自動的に収集して Stripe に送信します。分割 Element (Card Number、Expiry、CVC) を使用して支払いフォームを構築する場合、顧客の郵便番号用に別個の入力フィールドを追加します。
サポートされる Element のタイプの一覧については、Stripe.js リファレンスのドキュメントをご覧ください。
Elements はユーザーの入力を入力中に検証します。顧客が誤りを見つけやすくするため、次のように card
Element で change
イベントをリッスンし、エラーがあれば表示します。
card.on('change', ({error}) => { let displayError = document.getElementById('card-errors'); if (error) { displayError.textContent = error.message; } else { displayError.textContent = ''; } });
郵便番号の検証は顧客の請求国によって異なります。国際テストカードを使用して、さまざまな郵便番号形式をテストしてください。
ステップ 3: Stripe に支払いを送金する クライアント側
PaymentIntent オブジェクト全体をクライアントに送信するのではなく、Step 1 からの client secret を使用します。これは、Stripe API リクエストを認証する API キーとは異なります。
それでも client secret は支払いを完了できるため、慎重に扱う必要があります。記録したり、URL に埋め込んだり、当該の顧客以外に漏洩することがないようにしてください。
ユーザがクリックしたときに支払いを完了するには、Step 1 で作成した PaymentIntent から client secret を取得し、その client secret を使用して stripe.confirmCardPayment を呼び出します。
カード保有者名と住所など、追加の請求書詳細を billing_details
ハッシュに渡します。card
Element は顧客の郵便番号情報を自動的に送信します。ただし、cardNumber
、cardCvc
、cardExpiry
の Element を組み合わせている場合は、郵便番号を billing_details[address][postal_code]
に渡す必要があります。
var form = document.getElementById('payment-form'); form.addEventListener('submit', function(ev) { ev.preventDefault(); stripe.confirmCardPayment(clientSecret, { payment_method: { card: card, billing_details: { name: 'Jenny Rosen' } } }).then(function(result) { if (result.error) { // Show error to your customer (for example, insufficient funds) console.log(result.error.message); } else { // The payment has been processed! if (result.paymentIntent.status === 'succeeded') { // Show a success message to your customer // There's a risk of the customer closing the window before callback // execution. Set up a webhook or plugin to listen for the // payment_intent.succeeded event that handles any business critical // post-payment actions. } } }); });
注
stripe.confirmCardPayment
の完了には数秒かかる場合があります。この間、フォームが再送信されないように無効化し、スピナーのような待機中のインジケータを表示します。エラーが発生した場合は、それを顧客に表示し、フォームを再度有効化し、待機中のインジケータを非表示にします。
顧客がカードを認証する必要がある場合、Stripe.js はモーダルを表示して認証方法を説明します。ページ上部のデモでテストカード番号 と任意のセキュリティコード、将来の有効期限、郵便番号を使用して、このモーダルの仕組みの例を確認できます。
支払いが正常に完了すると、返された PaymentIntent の status
プロパティの値が succeeded になります。ダッシュボードまたはオブジェクトのステータスプロパティを調べて、PaymentIntent のステータスを確認します。支払いに失敗した場合は、返された error
を調べて原因を特定します。
ステップ 4: フルフィルメントを実行する サーバー側
支払いの完了後、お客様側で必要なフルフィルメントを処理する必要があります。たとえば、前払いを必要とする住宅賃貸会社は、支払いが成功した後に、住宅所有者と賃借人を関連付けます。
ダッシュボードで (「お客様のアカウントから」イベント用に) Webhook エンドポイントを構成します。
次に、お客様のサーバ上に HTTP エンドポイントを作成し、完了した支払いを監視し、売り手またはサービスプロバイダが購入内容をフルフィルメントできるようにします。サンプルのエンドポイントシークレットキー (whsec_...
) は、必ず各自のキーに置き換えてください。
# Using Sinatra. require 'sinatra' require 'stripe' set :port, 4242 # Set your secret key. Remember to switch to your live secret key in production. # See your keys here: https://dashboard.stripe.com/apikeys Stripe.api_key =
# If you are testing your webhook locally with the Stripe CLI you # can find the endpoint's secret by running `stripe listen` # Otherwise, find your endpoint's secret in your webhook settings in # the Developer Dashboard endpoint_secret = 'whsec_...' post '/webhook' do payload = request.body.read sig_header = request.env['HTTP_STRIPE_SIGNATURE'] event = nil # Verify webhook signature and extract the event. # See https://stripe.com/docs/webhooks#verify-events for more information. begin event = Stripe::Webhook.construct_event( payload, sig_header, endpoint_secret ) rescue JSON::ParserError => e # Invalid payload. status 400 return rescue Stripe::SignatureVerificationError => e # Invalid Signature. status 400 return end if event['type'] == 'payment_intent.succeeded' payment_intent = event['data']['object'] handle_successful_payment_intent(payment_intent) end status 200 end def handle_successful_payment_intent(payment_intent) # Fulfill the purchase puts payment_intent.to_s end'sk_test_4eC39HqLyjWDarjtT1zdp7dc'
詳細は、支払いのフルフィルメントガイドをご覧ください。
Webhook をローカルでテストする
Stripe CLI を使用すると、Webhook をローカルでテストできます。
まだインストールしていない場合、まずマシンに Stripe CLI をインストールします。
次に、ログインするために、コマンドラインで
stripe login
を実行し、手順に従います。最後に、連結アカウントでシミュレートされたイベントをローカルホストで受信できるようにするために、1 つの端末ウィンドウで
stripe listen --forward-to localhost:{PORT}/webhook
を実行し、別の端末ウィンドウでstripe trigger --stripe-account={{CONNECTED_STRIPE_ACCOUNT_ID}} payment_intent.succeeded
を実行します (あるいはその他のサポートされているイベントをトリガーします) 。
ステップ 5: 不審請求の申請
お客様は支払いの売上処理加盟店であるため、お客様のプラットフォームは不審請求に対する責任を負います。不審請求に対応するためのベストプラクティスを把握しておく必要があります。
決済手段を有効にする
Stripe enables certain payment methods for your connected accounts by default. You can change these defaults at any time in your Stripe Dashboard.
決済フォームを表示する前に、Stripe は通貨、決済手段の制約、その他のパラメーターを評価し、対応する決済手段のリストを決定します。コンバージョン率の向上につながり、通貨と顧客の場所に最も関連性の高い決済手段が優先的に表示されます。優先度の低い決済手段は、オーバーフローメニューの下に隠れた状態になります。