コンテンツにスキップ
アカウントを作成
または
サインイン
Stripe ドキュメントのロゴ
/
アカウントを作成
サインイン

注

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

Customer Sheet を導入する

顧客がアプリの設定で保存済みの決済手段を管理できるようにします。

注

Customer Sheet は、アプリの設定ページでの使用を目的としています。決済フローと支払いには、Mobile Payment Element を使用します。Mobile Payment Element には、決済手段の保存と表示のサポートも組み込まれており、Customer Sheet よりも多くの決済手段に対応しています。

Customer Sheet は、顧客が保存済みの決済手段を管理するための構築済み UI コンポーネントです。Customer Sheet UI は決済フロー以外で使用することができ、外観やスタイルは自社のアプリに合わせてカスタマイズ可能です。顧客は、Customer オブジェクトに保存される決済手段を追加および削除し、デバイスのローカル上に保存されるデフォルトの決済手段を設定できます。Mobile Payment Element と Customer Sheet の両方を使用して、保存された決済手段に対して一貫性のあるエンドツーエンドのソリューションを顧客に提供します。

保存済みの複数の支払い方法を表示する iOS アプリの Customer Sheet のスクリーンショット。

Stripe を設定する

まず、Stripe アカウントが必要です。今すぐ登録してください。

React Native SDK はオープンソースであり、詳細なドキュメントが提供されています。内部では、ネイティブの iOS および Android の SDK を使用します。Stripe の React Native SDK をインストールするには、プロジェクトのディレクトリーで (使用するパッケージマネージャーによって異なる) 次のいずれかのコマンドを実行します。

Command Line
yarn add @stripe/stripe-react-native

次に、その他の必要な依存関係をインストールします。

  • iOS の場合は、ios ディレクトリーに移動して pod install を実行し、必要なネイティブ依存関係もインストールします。
  • Android の場合は、依存関係をインストールする必要はありません。

注

We recommend following the official TypeScript guide to add TypeScript support.

Stripe の初期化

React Native アプリで Stripe を初期化するには、決済画面を StripeProvider コンポーネントでラップするか、initStripe 初期化メソッドを使用します。publishableKey の API 公開可能キーのみが必要です。次の例は、StripeProvider コンポーネントを使用して Stripe を初期化する方法を示しています。

import { useState, useEffect } from 'react';
import { StripeProvider } from '@stripe/stripe-react-native';

function App() {
  const [publishableKey, setPublishableKey] = useState('');

  const fetchPublishableKey = async () => {
    const key = await fetchKey(); // fetch key from your server here
    setPublishableKey(key);
  };

  useEffect(() => {
    fetchPublishableKey();
  }, []);

  return (
    <StripeProvider
      publishableKey={publishableKey}
      merchantIdentifier="merchant.identifier" // required for Apple Pay
      urlScheme="your-url-scheme" // required for 3D Secure and bank redirects
    >
      {/* Your app code here */}
    </StripeProvider>
  );
}

注

テストおよび開発時には API のテストキーを使用し、アプリの公開時には本番環境キーを使用します。

支払い方法を有効にする

支払い方法の設定を表示して、サポートする支払い方法を有効にします。SetupIntent を作成するには、少なくとも 1 つは支払い方法を有効にする必要があります。

多くの顧客から決済を受け付けられるよう、Stripe では、カードやその他一般的な決済手段がデフォルトで有効になっていますが、ビジネスや顧客に適した追加の決済手段を有効にすることをお勧めします。プロダクトと決済手段のサポートについては決済手段のサポートを、手数料については料金体系ページをご覧ください。

注

現時点では、CustomerSheet はカードとアメリカの銀行口座のみに対応しています。

Customer エンドポイントを追加する
サーバー側

サーバー側で、Customer の一時キーを取得するエンドポイントと、新しい決済手段を Customer に保存する SetupIntent を作成するエンドポイントの 2 つのエンドポイントを作成します。

  1. Customer ID と関連する一時キーを返すエンドポイントを作成します。SDK で使用される API バージョンは、こちらで確認できます。
Command Line
# Create a Customer (skip this and get the existing Customer ID if this is a returning customer)
curl https://api.stripe.com/v1/customers \
  -u 
sk_test_BQokikJOvBiI2HlWgH4olfQ2
: \
  -X "POST"

curl https://api.stripe.com/v1/ephemeral_keys \
  -u 
sk_test_BQokikJOvBiI2HlWgH4olfQ2
: \
  -X "POST" \
  -d "customer"="{{CUSTOMER_ID}}" \
  1. Customer ID を指定して設定された SetupIntent を返すエンドポイントを作成します。
Command Line
# Create a Customer (skip this and get the existing Customer ID if this is a returning customer)
curl https://api.stripe.com/v1/customers \
  -u 
sk_test_BQokikJOvBiI2HlWgH4olfQ2
: \
  -X "POST"

curl https://api.stripe.com/v1/setup_intents \
  -u 
sk_test_BQokikJOvBiI2HlWgH4olfQ2
: \
  -d "customer"="{{CUSTOMER_ID}}" \

今後の支払いで、顧客が決済フローでオンセッション時にのみ決済手段を使用する場合、usage パラメーターを on_session に設定して、オーソリ率を改善します。

画面を初期化する

次に、希望の設定を CustomerSheetBeta.initialize に指定して、Customer Sheet を設定します。

import {CustomerSheetBeta} from '@stripe/stripe-react-native';

const {error} = await CustomerSheetBeta.initialize({
  setupIntentClientSecret: 'SETUP-INTENT',
  customerEphemeralKeySecret: 'EPHEMERAL-KEY',
  customerId: 'CUSTOMER-ID',
  headerTextForSelectionScreen: 'Manage your payment method',
  returnURL: 'my-return-url://',
});

支払い画面を表示する

Customer Sheet を表示します。顧客が画面を閉じると、プロミスは CustomerSheetResult で解決されます。

import {CustomerSheetBeta} from '@stripe/stripe-react-native';

const {error, paymentOption, paymentMethod} = await CustomerSheetBeta.present();
if (error) {
  if (error.code === CustomerSheetError.Canceled) {
    // Customer dismissed the sheet without changing their payment option
  } else {
    // Show the error in your UI
  }
} else {
  if (paymentOption) {
    // Configure your UI based on the payment option
    MyBackend.setDefaultPaymentMethod(paymentMethod.id);
  }
  if (paymentMethod) {
    console.log(JSON.stringify(paymentMethod, null, 2));
  }
}
  • 顧客が決済手段を選択する場合、その結果は paymentOption になります。関連付けられる値は、選択した PaymentOption になり、ユーザーが過去に選択した決済手段を削除した場合は nil になります。決済手段の詳細は、paymentMethod フィールドで確認できます。
  • ユーザーが画面をキャンセルした場合、その結果には error.code === CustomerSheetError.Canceled の error が含まれます。選択された支払い方法は変更されていません。
  • エラーが発生した場合、詳細は error に含まれます。

詳しくは、Apple Pay を有効にする方法をご確認ください。

このページはお役に立ちましたか。
はいいいえ
お困りのことがございましたら 、サポートにお問い合わせください。
早期アクセスプログラムにご参加ください。
変更ログをご覧ください。
ご不明な点がございましたら、お問い合わせください。
LLM ですか？llms.txt を読んでください。
Powered by Markdoc