コンテンツにスキップ
アカウント作成/サインイン
Stripe ドキュメントのロゴ
/
アカウントを作成サインイン
概要決済を受け付ける構築済みのシステムをアップグレード
オンライン決済
概要ユースケースを見つけるManaged Payments を使用する継続課金
対面決済
決済手段
決済業務
残高と売上処理にかかる期間領収書返金とキャンセル
高度な連携システム
決済以外の機能

メモ

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

Cash App Pay 支払い

システムに Cash App Pay のサポートを追加します。

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

互換性の判断

Cash App Pay 支払いに対応するには、Checkout セッションが次の条件をすべて満たしている必要があります。

  • すべてのラインアイテムの 価格 は米ドルで表示する必要があります。

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

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

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 Session を作成する
サーバー側

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

動的な決済手段を使用して、各顧客に最も適した決済手段を動的に表示してコンバージョンを最大化しましょう。Stripe ではこの方法をお勧めしています。決済手段を手動で一覧表示することもできますが、その場合、動的決済手段は無効になります。

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: 'usd',
          product_data: {
            name: 'T-shirt',
          },
          unit_amount: `1099`,
        },
        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');
});

フロントエンドを設定する
クライアント側

HTML ファイルの head に Stripe.js スクリプトを追加し、チェックアウトページに含めます。PCI への準拠を維持するために、常に js.stripe.com から Stripe.js を直接読み込んでください。スクリプトをバンドルに含めたり、そのコピーを自身でホストしたりしないでください。

最新の 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 では npm パッケージをご用意しており、これを使用して Stripe.js をモジュールとして読み込むことができます。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.html
<div id="checkout-container"></div>
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}`);
}

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

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

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

  • 支払いの送信の直前。また、updateEmail を呼び出して、早い段階 (ぼかしの入力時など) で検証することもできます。
  • 次のステップに進む前 (フォームが複数のステップからなる場合の保存ボタンのクリック時など)。
checkout.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 要素を指定します。

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

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

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

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

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

checkout.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;
      }
    });
  });
}

導入をテストする

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

本番環境では、支払うをタップすると、Cash App モバイルアプリケーションにリダイレクトされます。Cash App 内で支払いを承認または拒否するオプションはありません。リダイレクトされた後、支払いは自動的に承認されます。