住所と電話番号を収集
モバイルアプリで住所と電話番号を収集する方法をご紹介します。
請求先や配送先の詳細な住所を収集するには、Address Element を使用します。
Address Element は次の目的でも使用できます。
Stripe は、収集した住所情報と決済手段を組み合わせて、PaymentIntent を作成します。
Stripe をセットアップするサーバー側クライアント側
まず、Stripe アカウントが必要です。今すぐ登録してください。
React Native SDK はオープンソースであり、詳細なドキュメントが提供されています。内部では、ネイティブの iOS および Android の SDK を使用します。Stripe の React Native SDK をインストールするには、プロジェクトのディレクトリーで (使用するパッケージマネージャーに応じて) 次のいずれかのコマンドを実行します。
次に、その他の必要な依存関係をインストールします。
- 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=> // Your app code here </StripeProvider> ); }"pk_test_TYooMQauvdEDq54NiTphI7jx"
住所のオートコンプリートの入力候補を設定する
オートコンプリートは iOS ではデフォルトで有効になっていますが、Android でオートコンプリートの入力候補を有効にするには、アプリの build. に Google Places SDK の依存関係を含める必要があります。
住所のオートコンプリートの入力候補を使用するには、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'} />
Address 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); }} />