設定で支払い方法を管理する

支払い方法設定シートを使用して、顧客がアプリの設定ページで支払い方法を管理できるようにします。

iOS

Android

React Native

注

支払い方法設定シートは、アプリの設定ページで使用するためのものです。チェックアウトと支払いには、アプリ内支払いを使用してください。は、支払い方法の保存と表示にも対応しており、支払い方法設定シートよりも多くの支払い方法をサポートしています。

注

コードでは、このコンポーネントは歴史的な理由からCustomerSheet として参照されます。ドキュメント全体を通して、コード例でCustomerSheet と記載されている場合、これは支払い方法設定シートを指します。

支払い方法設定シートは、顧客が保存した支払い方法を管理できるようにする組み込み済みの UI コンポーネントです。決済フローの外側で支払い方法設定シートの UI を使用することができ、外観とスタイルはアプリの外観と美観に合わせてカスタマイズ可能です。顧客は支払い方法の追加と削除ができ、顧客オブジェクトに保存され、デバイスにローカルに保存されたデフォルトの支払い方法を設定できます。アプリ内支払いと支払い方法設定シートの両方を使用して、顧客に保存された支払い方法の一貫したエンドツーエンドのソリューションを提供します。

iOS アプリに保存された複数の支払い方法を提示する支払い方法設定シートのスクリーンショット。

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 の場合は、依存関係をインストールする必要はありません。

注

公式の TypeScript ガイドに従って TypeScript のサポートを追加することをお勧めします。

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 エンドポイントを追加する
サーバー側

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

Customer ID と CustomerSession の client secret を返すエンドポイントを作成します。

注

レガシーの顧客の一時キーを使用した実装では、保存された決済手段の allow_redisplay 値が unspecified になります。Customer Sessions の使用時に保存した決済手段に加えて、これらの決済手段を表示するには、payment_method_allow_redisplay_filters を ["unspecified", "always"] に設定します。詳細については、CustomerSessions をご覧ください。

Customer ID を指定して設定された SetupIntent を返すエンドポイントを作成します。

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

画面を初期化する

コールバックを保持する ClientSecretProvider を作成します。CustomerSheet は、CustomerSession オブジェクトと前に作成されたエンドポイントを使用して Stripe と通信するために、ClientSecretProvider を必要とします。

const clientSecretProvider = {
  // Must return a type {customerId: string, clientSecret: string}
  async provideCustomerSessionClientSecret() {
    const result = await MyBackend.getCustomer().json();
    return {
      customerId: result.customer,
      clientSecret: result.customerSessionClientSecret,
    };
  }

  // Must return a string
  async provideSetupIntentClientSecret() {
    const result = await MyBackend.createSetupIntent().json();
    return result.setupIntent;
  }
}

次に、Payment Method Settings Sheet を設定します。これは CustomerSheet クラスを使用して、CustomerSheet.initialize に希望の設定を提供することで設定できます。

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

const {error} = await CustomerSheet.initialize({
  // You must provide intentConfiguration and clientSecretProvider
  intentConfiguration: {
    paymentMethodTypes: ['card'],
  },
  clientSecretProvider: clientSecretProvider,
  headerTextForSelectionScreen: 'Manage your payment method',
  returnURL: 'my-return-url://',
});

支払い画面を表示する

CustomerSheet を使用して Payment Method Settings Sheet を提示します。顧客がシートを破棄すると、プロミスは CustomerSheetResult で解決します。

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

const {error, paymentOption, paymentMethod} = await CustomerSheet.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 を有効にする方法をご確認ください。

オプションACH 決済を有効にする

ACH デビット決済を有効にするには、ダッシュボードの設定セクションで決済方法としてアメリカの銀行口座を有効にします。

オプション選択した支払い方法を取得する

Payment Method Settings Sheet を表示せずに初期設定の決済方法を取得するには、シートを初期化した後 CustomerSheet.retrievePaymentOptionSelection() を呼び出します。

// Call CustomerSheet.initialize()
...
const {
  error,
  paymentOption,
  paymentMethod,
} = await CustomerSheet.retrievePaymentOptionSelection();

オプション画面をカスタマイズする

デザイン

Appearance API を使用して、アプリのデザインに合わせて色、フォント、その他のデザインの属性をカスタマイズします。

デフォルトの請求詳細

支払い方法設定シートで収集する請求書の詳細のデフォルト値を設定するには、defaultBillingDetails プロパティを設定します。支払い方法設定シートでは、フィールドにあらかじめ指定した値が入力されます。

await CustomerSheet.initialize({
  // ...
  defaultBillingDetails: {
    email: 'foo@bar.com',
    address: {
      country: 'US',
    },
  },
});

請求詳細を収集する

billingDetailsCollectionConfiguration を使用して、支払い方法設定シートで請求書の詳細を収集する方法を指定します。

顧客の名前、メールアドレス、電話番号、住所を収集できます。

支払い方法に必要な値を収集しない場合は、以下を実行する必要があります。

支払い方法設定シートで収集しない値を、defaultBillingDetails プロパティにアタッチします。
billingDetailsCollectionConfiguration.attachDefaultsToPaymentMethod を true に設定します。

await CustomerSheet.initialize({
  // ...
  defaultBillingDetails: {
    email: 'foo@bar.com',
  }
  billingDetailsCollectionConfiguration: {
    name: PaymentSheet.CollectionMode.ALWAYS,
    email: PaymentSheet.CollectionMode.NEVER,
    address: PaymentSheet.AddressCollectionMode.FULL,
    attachDefaultsToPaymentMethod: true
  },
});

注

情報の収集に適用される法律については、弁護士に相談してください。電話番号は、取引に必要な場合にのみ収集してください。

注