住所の入力をリッスンする

イベントリスナーを使用して、カスタマイズされた方法で使用できるように住所を収集します。

ウェブ

iOS

Android

React Native

Address Element を使用して、顧客の国内および国外の住所を収集します。

ユーザーが「配送先住所を追加」オプションを選択した場合の決済フロープロセスの例。ユーザーは新しい画面に誘導され、ここでフォームに配送先住所を入力します。住所を入力すると、オートコンプリート機能によってユーザーに選択肢が表示されます。

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

Stripe の初期化

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

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

function App() {
  return (
    <StripeProvider
      publishableKey="pk_test_TYooMQauvdEDq54NiTphI7jx"

    >
      // Your app code here
    </StripeProvider>
  );
}

注

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

オプションAndroid 向けの住所のオートコンプリートの入力候補を設定する

オートコンプリートは iOS ではデフォルトで有効になっていますが、Android でオートコンプリートの入力候補を有効にするには、アプリの build.gradle に Google Places SDK の依存関係を含める必要があります。

build.gradle
Groovy
dependencies {
    implementation 'com.google.android.libraries.places:places:2.6.0'
}

住所のオートコンプリートの入力候補を使用するには、Google Places API キーが必要です。Google Places SDK 設定ガイドに従って API キーを生成します。

Address Element を設定する

Address Element では、デフォルト値の表示、許可された国の設定、デザインのカスタマイズなどの詳細を設定できます。詳細については、利用可能なオプションの一覧をご覧ください。

<AddressSheet
  appearance={{
    colors: {
      primary: '#F8F8F2',
      background: '#272822'
    }
  }}
  defaultValues={{
    phone: '111-222-3333',
    address: {
      country: 'United States',
      city: 'San Francisco',
    },
  }}
  additionalFields={{
    phoneNumber: 'required',
  }}
  allowedCountries={['US', 'CA', 'GB']}
  primaryButtonTitle={'Use this address'}
  sheetTitle={'Shipping Address'}
  googlePlacesApiKey={'(optional) YOUR KEY HERE'}
/>

住所 Element を表示して住所の詳細を取得する

visible プロパティを true に設定し、onSubmit および onError プロパティにコールバックメソッドを追加して、住所の詳細を取得できます。

<AddressSheet
  visible={true}
  onSubmit={async (addressDetails) => {
    // Make sure to set `visible` back to false to dismiss the address element.
    setAddressSheetVisible(false);

    // Handle result and update your UI
  }}
  onError={(error) => {
    if (error.code === AddressSheetError.Failed) {
      Alert.alert('There was an error.', 'Check the logs for details.');
      console.log(err?.localizedMessage);
    }
   // Make sure to set `visible` back to false to dismiss the address element.
    setAddressSheetVisible(false);
  }}
/>

注