コンテンツにスキップ
アカウント作成/サインイン
Stripe ドキュメントのロゴ
/
アカウントを作成サインイン
概要構築済みのシステムをアップグレード
オンライン決済
概要ユースケースを見つけるManaged Payments を使用する
対面決済
決済手段
決済シナリオ
決済以外の機能

メモ

このページはまだ日本語ではご利用いただけません。より多くの言語で文書が閲覧できるように現在取り組んでいます。準備が整い次第、翻訳版を提供いたしますので、もう少しお待ちください。

Billie による決済を受け付ける

Billie の導入の設定方法をご紹介します。

統合項目

Billie を連携する際に承認率を最大限まで高めるには、line_items データを含めて買い手のカートの中身を表示するようにします。先行提供版については、支払い項目をご覧ください。

Payment Element を使用して、ウェブサイトまたはアプリケーションにカスタムの Stripe 決済フォームを埋め込み、顧客に決済手段を提供します。高度な設定とカスタマイズについては、決済の受け付けに関する導入ガイドをご覧ください。

互換性を判断する

Billie 支払いをサポートするには、Checkout セッションが次の条件をすべて満たしている必要があります。

  • ラインアイテムの価格はすべて、同じ通貨である必要があります。
  • 異なる通貨のラインアイテムが存在する場合は、通貨ごとに別の Checkout セッションを作成してください。

サーバーを設定する
サーバー側

アプリケーションから API にアクセスするには、公式の Stripe ライブラリを使用します。

Command Line
Ruby
Python
PHP
Java
Node.js
Go
.NET
No results
# Available as a gem
sudo gem install stripe
Gemfile
Ruby
Python
PHP
Java
Node.js
Go
.NET
No results
# If you use bundler, you can add this line to your Gemfile
gem 'stripe'

Checkout セッションを作成
サーバー側

Checkout セッションを作成してその Client Secret をフロントエンドに返すエンドポイントを、サーバーに追加します。Checkout セッションは、顧客が 1 回限りの購入またはサブスクリプションの支払いを行う際のセッションを表します。Checkout セッションは作成後 24 時間で期限切れとなります。

動的支払い方法 を使用して、各顧客に最も関連性の高い支払い方法を動的に表示し、コンバージョンを最大化することをお勧めします。支払い方法を手動でリスト して、動的支払い方法を無効にすることもできます。

server.ts
TypeScript
Node.js
Ruby
PHP
Python
Go
.NET
Java
No results
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: 'eur',
          product_data: {
            name: 'T-shirt',
          },
          unit_amount: 1000,
        },
        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 への準拠が維持されます。スクリプトをバンドルに含めたり、そのコピーを自身でホストしたりしないでください。

最新の Stripe.js バージョンであるか確認し、以下のスクリプトタグ <script src=“https://js.stripe.com/clover/stripe.js”></script> を読み込んでください。Stripe.js バージョン管理について詳しくはリンク先をご覧ください。

checkout.html
<head>
  <title>Checkout</title>
  <script src="https://js.stripe.com/clover/stripe.js"></script>
</head>

メモ

Stripe は、Stripe.js をモジュールとして読み込むために使用できる npm パッケージを提供しています。GitHub のプロジェクトをご覧ください。バージョン 7.0.0 以降が必要です。

Stripe.js を初期化する

checkout.js
// Set your publishable key: remember to change this to your live publishable key in production
// See your keys here: https://dashboard.stripe.com/apikeys
const stripe = Stripe(
  
'pk_test_TYooMQauvdEDq54NiTphI7jx'
,
);

Checkout を初期化する
クライアント側

Client Secret を解決する clientSecret プロミスを作成するか、機密事項として直接設定します。initCheckout を呼び出し、clientSecret を渡します。initCheckout は、Checkout インスタンスに解決するプロミスを返します。

Checkout オブジェクトは、決済画面の基盤として機能し、決済セッションのデータやセッションを更新するためのメソッドを含みます。

actions.getSession() によって返されるオブジェクトには、価格情報が含まれます。セッションの total と lineItems を UI で読み込んで表示することをお勧めします。

これにより、最小限のコード変更で新機能を有効にできます。たとえば、手動通貨価格を追加しても、total を表示する場合、UI を変更する必要はありません。

checkout.js
const clientSecret = fetch('/create-checkout-session', {method: 'POST'})
  .then((response) => response.json())
  .then((json) => json.checkoutSessionClientSecret);
const checkout = stripe.initCheckout({clientSecret});
const loadActionsResult = await checkout.loadActions();
if (loadActionsResult.type === 'success') {
  const session = loadActionsResult.actions.getSession();
  const checkoutContainer = document.getElementById('checkout-container');
  checkoutContainer.append(JSON.stringify(session.lineItems, null, 2));
  checkoutContainer.append(document.createElement('br'));
  checkoutContainer.append(`Total: ${session.total.total.amount}`);
}
index.html
<div id="checkout-container"></div>

顧客のメールアドレスを収集する
クライアント側

顧客のメールアドレスを収集するためのメールアドレス入力を作成します。顧客が入力を完了してメールアドレスを検証し、保存したら、updateEmail を呼び出します。

決済フォームのデザインに応じて、次の方法で updateEmail を呼び出すことができます。

  • 支払いの送信の直前。また、updateEmail を呼び出して、早い段階 (ぼかしの入力時など) で検証することもできます。
  • 次のステップに進む前 (フォームが複数のステップからなる場合の保存ボタンのクリック時など)。
index.html
<input type="text" id="email" />
<div id="email-errors"></div>
checkout.js
const checkout = stripe.initCheckout({clientSecret});
const loadActionsResult = await checkout.loadActions();

if (loadActionsResult.type === 'success') {
  const {actions} = loadActionsResult;
  const emailInput = document.getElementById('email');
  const emailErrors = document.getElementById('email-errors');

  emailInput.addEventListener('input', () => {
    // Clear any validation errors
    emailErrors.textContent = '';
  });

  emailInput.addEventListener('blur', () => {
    const newEmail = emailInput.value;
    actions.updateEmail(newEmail).then((result) => {
      if (result.error) {
        emailErrors.textContent = result.error.message;
      }
    });
  });
}

支払いの詳細を収集する
クライアント側

Payment Element を使用してクライアント側で支払い詳細を収集します。Payment Element は事前構築された UI コンポーネントであり、さまざまな決済手段の詳細の収集をシンプルにします。

まず、コンテナーの DOM 要素を作成して、Payment Element をマウントします。次に、checkout.createPaymentElement を使用して Payment Element のインスタンスを作成し、element.mount を呼び出してマウントし、CSS セレクターまたはコンテナーの DOM 要素を指定します。

index.html
<div id="payment-element"></div>
checkout.js
const paymentElement = checkout.createPaymentElement();
paymentElement.mount('#payment-element');

対応しているオプションについては、Stripe.js のドキュメント をご覧ください。

フロントエンドで Checkout を初期化するときに elementsOptions.appearance を渡すことで、すべての Elements のデザインをカスタマイズできるようになります。

決済を送信
クライアント側

Checkout インスタンスから 確定 を呼び出す支払う ボタンをレンダリングして、決済を送信します。

index.html
<button id="pay-button">Pay</button>
<div id="confirm-errors"></div>
checkout.js
const checkout = stripe.initCheckout({clientSecret});
const loadActionsResult = await checkout.loadActions();

if (loadActionsResult.type === 'success') {
  const {actions} = loadActionsResult;
  const button = document.getElementById('pay-button');
  const errors = document.getElementById('confirm-errors');
  button.addEventListener('click', () => {
    // Clear any validation errors
    errors.textContent = '';

    actions.confirm().then((result) => {
      if (result.type === 'error') {
        errors.textContent = result.error.message;
      }
    });
  });
}

実装内容をテストする

実装内容をテストするには、決済手段を選択して支払うをタップします。サンドボックスでは、テスト決済ページにリダイレクトされ、そこで決済を承認または拒否できます。

本番環境では、支払うをタップすると、Billie のウェブサイトにリダイレクトされます。Billie で支払いを承認または拒否するオプションはありません。