# 銀行の認証なしでカードを保存する モバイルアプリでカード情報を収集し、後で顧客に請求します。 # iOS > This is a iOS for when platform is ios. View the full page at https://docs.stripe.com/payments/mobile/save-card-without-authentication?platform=ios. Stripe では、顧客のカード詳細を収集して後で請求できます。一部の地域では、銀行により、2 段階目の認証 (スマートフォンに送信されたコードの入力など) が要求されます。この追加ステップにより、顧客が Web サイトまたはアプリケーションをアクティブに使用していない場合は、購入の認証ができないためにコンバージョン率が低下します。 アメリカとカナダを中心にして事業を運営している場合は、銀行によって認証が要求されないため、より簡単なこの実装を使用できます。この実装は、カードの保存に認証が必要な国では非準拠となるため、この実装を構築すると、他の国に事業を拡大する場合や他の決済手段を追加する場合に、大幅な変更が必要になります。[認証が必要なカード情報の保存](https://docs.stripe.com/payments/save-and-reuse.md)方法をご確認ください。 > #### 法令遵守 > > お客様は、顧客の支払い情報を保存する際の該当する法律、規制、ネットワークのルールのすべてに準拠する責任を負います。たとえば、顧客がお客様のウェブサイトやアプリを積極的には使用していない時期に顧客に請求するなど、将来の利用に備えて顧客の支払い方法を保存する場合が該当します。支払い方法の保存をどのように計画しているかを示す規約をウェブサイトやアプリに追加し、顧客が許可できるようにします。顧客がオフラインのときに請求する予定である場合は、規約に以下の内容も含める必要があります。 > > - 指定された取引で顧客の代理として単独の支払いまたは一連の支払いを開始することを許可するという、顧客からお客様への同意。 - 予期される支払い時期と支払い頻度 (たとえば、請求が予定されている分割払いなのか、サブスクリプションの決済なのか、あるいは予定されていないトップアップなのか)。 - 支払い金額の決定方法。 - 支払い方法をサブスクリプションサービスに使用する場合は、キャンセルに関するポリシー。 > > これらの規約に関する顧客の書面による同意の記録を必ず保管してください。 ## Stripe をセットアップする [サーバー側] [クライアント側] まず、Stripe アカウントが必要です。[今すぐ登録](https://dashboard.stripe.com/register)してください。 組み込みを開始する前に、iOS とサーバーの Stripe SDK を設定します。 ### サーバー側 この組み込みには Stripe API と通信するエンドポイントがサーバー上に必要です。公式ライブラリを使用してください。 #### Ruby ```bash # Available as a gem sudo gem install stripe ``` ```ruby # If you use bundler, you can add this line to your Gemfile gem 'stripe' ``` ### クライアント側 [Stripe iOS SDK](https://github.com/stripe/stripe-ios) はオープンソースです。[詳細なドキュメントが提供されており](https://stripe.dev/stripe-ios/index.html)、iOS 13 以降をサポートするアプリと互換性があります。 #### Swift Package Manager SDK をインストールするには、以下のステップに従います。 1. Xcode で、**File (ファイル)** > **Add Package Dependencies… (パッケージ依存関係を追加)** を選択し、リポジトリー URL として `https://github.com/stripe/stripe-ios-spm` を入力します。 1. [リリースページ](https://github.com/stripe/stripe-ios/releases)から最新のバージョン番号を選択します。 1. **StripePaymentsUI** 製品を[アプリのターゲット](https://developer.apple.com/documentation/swift_packages/adding_package_dependencies_to_your_app)に追加します。 #### CocoaPods 1. まだインストールしていない場合は、[CocoaPods](https://guides.cocoapods.org/using/getting-started.html) の最新バージョンをインストールします。 1. 既存の [Podfile](https://guides.cocoapods.org/syntax/podfile.html) がない場合は、以下のコマンドを実行して作成します。 ```bash pod init ``` 1. この行を `Podfile` に追加します。 ```podfile pod 'StripePaymentsUI' ``` 1. 以下のコマンドを実行します。 ```bash pod install ``` 1. これ以降は、Xcode でプロジェクトを開く際に、`.xcodeproj` ファイルではなく、必ず `.xcworkspace` ファイルを使用するということを忘れないでください。 1. 今後、SDK の最新バージョンに更新するには、以下を実行します。 ```bash pod update StripePaymentsUI ``` #### Carthage 1. まだインストールしていない場合は、[Carthage](https://github.com/Carthage/Carthage#installing-carthage) の最新バージョンをインストールします。 1. この行を `Cartfile` に追加します。 ```cartfile github "stripe/stripe-ios" ``` 1. [Carthage のインストール手順](https://github.com/Carthage/Carthage#if-youre-building-for-ios-tvos-or-watchos)に従います。必ず、[こちら](https://github.com/stripe/stripe-ios/tree/master/StripePaymentsUI/README.md#manual-linking)にリストされている必要なフレームワークのすべてを埋め込んでください。 1. 今後、SDK の最新バージョンに更新するには、以下のコマンドを実行します。 ```bash carthage update stripe-ios --platform ios ``` #### 手動のフレームワーク 1. Stripe の [GitHub リリースページ](https://github.com/stripe/stripe-ios/releases/latest)に移動して、**Stripe.xcframework.zip** をダウンロードして解凍します。 1. **StripePaymentsUI.xcframework** を、Xcode プロジェクトの **General (一般) ** 設定の **Embedded Binaries (埋め込みバイナリー)** セクションにドラッグします。**Copy items if needed (必要に応じてアイテムをコピーする)** を必ず選択してください。 1. [こちら](https://github.com/stripe/stripe-ios/tree/master/StripePaymentsUI/README.md#manual-linking)にリストされている必要なフレームワークのすべてに対して、ステップ 2 を繰り返します。 1. 今後、Stripe の SDK の最新バージョンに更新するには、ステップ 1 から 3 を繰り返します。 > SDK の最新リリースおよび過去バージョンの詳細については、GitHub の [Releases (リリース)](https://github.com/stripe/stripe-ios/releases) ページをご覧ください。リポジトリの[リリースをウォッチ](https://help.github.com/en/articles/watching-and-unwatching-releases-for-a-repository#watching-releases-for-a-repository)して、新しいリリースの公開時に通知を受け取ることも可能です。 アプリの起動時に Stripe [公開可能キー](https://dashboard.stripe.com/test/apikeys)を使用して SDK を設定します。これにより、アプリが Stripe API にリクエストを送信できるようになります。 #### Swift ```swift import UIKitimportStripePaymentsUI @main class AppDelegate: UIResponder, UIApplicationDelegate { func application(_ application: UIApplication, didFinishLaunchingWithOptions launchOptions: [UIApplication.LaunchOptionsKey: Any]?) -> Bool {StripeAPI.defaultPublishableKey = "<>" // do any other necessary launch configuration return true } } ``` > テストおよび開発時には[テストキー](https://docs.stripe.com/keys.md#obtain-api-keys)を使用し、アプリの公開時には[本番環境](https://docs.stripe.com/keys.md#test-live-modes)キーを使用します。 ## カード詳細を収集する [クライアント側] まず、顧客に支払いフォームを表示します。カード番号、有効期限、セキュリティコード、郵便番号を収集する SDK が提供するドロップイン UI コンポーネントである [STPPaymentCardTextField](https://stripe.dev/stripe-ios/stripe-payments-ui/Classes/STPPaymentCardTextField.html) を使用して、顧客からカード詳細を収集します 。 ![](https://d37ugbyn3rpeym.cloudfront.net/docs/mobile/ios/card-field.mp4) カード詳細を [createPaymentMethod](https://stripe.dev/stripe-ios/stripe-payments/Classes/STPAPIClient.html#/c:@CM@StripePayments@StripeCore@objc\(cs\)STPAPIClient\(im\)createPaymentMethodWithPayment:completion:) に渡し、*PaymentMethod* (PaymentMethods represent your customer's payment instruments, used with the Payment Intents or Setup Intents APIs) を作成します。 #### Swift ```swift class CheckoutViewController: UIViewController { lazy var cardTextField: STPPaymentCardTextField = { let cardTextField = STPPaymentCardTextField() return cardTextField }() @objc func pay() { // Collect card details on the client STPAPIClient.shared.createPaymentMethod(with: cardTextField.paymentMethodParams) { [weak self] paymentMethod, error in guard let paymentMethod = paymentMethod else { // Display the error to the user return } let paymentMethodId = paymentMethod.stripeId // Send paymentMethodId to your server for the next steps } } } ``` 結果として得られた PaymentMethod ID をお客様のサーバーに送信し、残りの手順に従って顧客にカードを保存し、将来そのカードに対して請求します。 ## カードを保存する [サーバー側] PaymentMethod を *Customer* (Customer objects represent customers of your business. They let you reuse payment methods and give you the ability to track multiple payments) に関連付けることでカードを保存します。Customer オブジェクトを使用して、顧客に関する他の情報 (配送の詳細、メールアドレスなど) を格納できます。 ```curl curl https://api.stripe.com/v1/customers \ -u "<>:" \ -d payment_method={{PAYMENT_METHOD_ID}} ``` 既存の Customer がある場合は、代わりにそのオブジェクトに PaymentMethod を関連付けることがきます。 ```curl curl https://api.stripe.com/v1/payment_methods/{{PAYMENT_METHOD_ID}}/attach \ -u "<>:" \ -d customer="{{CUSTOMER_ID}}" ``` この時点で、顧客の内部的な独自の表記がある場合は、この表記に Customer オブジェクトの ID と PaymentMethod の ID を関連付けます。 ## 保存されたカードに請求する [サーバー側] 顧客に請求する準備ができたら、請求する PaymentMethod ID を検索します。これは、両方の ID をデータベースに格納するか、顧客 ID を使用して顧客の使用可能なすべての PaymentMethod を検索することで実行できます。 ```curl curl -G https://api.stripe.com/v1/payment_methods \ -u "<>:" \ -d customer="{{CUSTOMER_ID}}" \ -d type=card ``` PaymentMethod ID と顧客 ID を使用して新しい PaymentIntent を作成します。[error_on_requires_action](https://docs.stripe.com/api/payment_intents/create.md#create_payment_intent-error_on_requires_action) を true に設定して、2 段階認証など、顧客のアクションを必要とする支払いは拒否します。 ```curl curl https://api.stripe.com/v1/payment_intents \ -u "<>:" \ -d amount=1099 \ -d currency=usd \ -d "payment_method_types[]"=card \ -d customer="{{CUSTOMER_ID}}" \ -d payment_method={{PAYMENT_METHOD_ID}} \ -d error_on_requires_action=true \ -d confirm=true ``` 支払いが失敗すると、リクエストも 402 HTTP ステータスコードで失敗し、Stripe からエラーが返されます。アプリケーションに戻って支払いを完了するように (アプリ内通知を送信するなどして) 顧客に通知する必要があります。Stripe API ライブラリから発生した[エラー](https://docs.stripe.com/api/errors/handling.md)のコードを確認するか、PaymentIntent の [last_payment_error.decline_code](https://docs.stripe.com/api/payment_intents/object.md#payment_intent_object-last_payment_error-decline_code) を確認し、カード発行会社が支払いを拒否した理由を調べます。 ## カードエラーを処理する 支払いが失敗したことを顧客に通知し、ステップ 1 で作成した決済フォームに顧客を誘導します。顧客はそこで新しいカード詳細を入力できます。その新しい PaymentMethod ID を自社のサーバーに送信して、Customer オブジェクトに[関連付け](https://docs.stripe.com/api/payment_methods/attach.md)、再度決済を行います。 別の方法として、すでに Customer を作成している場合は、PaymentIntent の作成とカードの保存を 1 回の API コールで実行できます。 ```curl curl https://api.stripe.com/v1/payment_intents \ -u "<>:" \ -d amount=1099 \ -d currency=usd \ -d "payment_method_types[]"=card \ -d customer="{{CUSTOMER_ID}}" \ -d payment_method={{PAYMENT_METHOD_ID}} \ -d error_on_requires_action=true \ -d confirm=true \ -d setup_future_usage=on_session ``` [setup_future_usage](https://docs.stripe.com/api/payment_intents/create.md#create_payment_intent-setup_future_usage) を `on_session` に設定すると、不要な認証をトリガーせずにカードを後で使用するために保存することを Stripe に示します。 ## 組み込みをテストする Stripe はサンドボックスで使用してさまざまなカードの動作をシミュレーションできる[テストカード](https://docs.stripe.com/testing.md)を提供しています。任意のセキュリティコード、郵便番号、将来の有効期限を指定してこれらのカードを使用してください。 | 番号 | 説明 | | ---------------- | -------------------------------------------------------- | | 4242424242424242 | 成功し、支払いがすぐに処理されます。 | | 4000000000009995 | 常に支払い拒否コード `insufficient_funds` で失敗します。 | | 4000002500003155 | 認証が必要なため、この導入では、`authentication_required` というコードで拒否されます。 | ## Optional: セキュリティコードを再収集する 保存されたクレジットカードで以降の支払いを作成する際には、不正利用の追加対策としてカードのセキュリティコードを再収集して、ユーザーを確認することをお勧めします。 まずサーバーから支払いの金額と通貨を使用して PaymentIntent を作成し、[customer](https://docs.stripe.com/api/payment_intents/create.md#create_payment_intent-customer) を Customer の ID に設定します。次に、Customer に関連付けられた PaymentMethod の[リスト](https://docs.stripe.com/api/payment_methods/list.md)を作成して、セキュリティコードの再収集のためにどの PaymentMethod をユーザーに対して表示するかを決めます。 顧客のセキュリティコードを再収集したら、その顧客のセキュリティコードを使用して [STPConfirmCardOptions](https://stripe.dev/stripe-ios/stripe-payments/Classes/STPConfirmCardOptions.html) インスタンスを作成します。`STPConfirmCardOptions` インスタンスを使用して、[STPConfirmPaymentMethodOptions](https://stripe.dev/stripe-ios/stripe-payments/Classes/STPConfirmPaymentMethodOptions.html) インスタンス上で `cardOptions` プロパティを設定します。最後に、[STPConfirmPaymentMethodOptions](https://stripe.dev/stripe-ios/stripe-payments/Classes/STPConfirmPaymentMethodOptions.html) インスタンスで [STPPaymentIntentParams](https://stripe.dev/stripe-ios/stripe-payments/Classes/STPPaymentIntentParams.html) インスタンスを作成し、それを [STPPaymentHandler confirmPayment](https://stripe.dev/stripe-ios/stripe-payments/Classes/STPPaymentHandler.html#/c:@M@StripePayments@objc\(cs\)STPPaymentHandler\(im\)confirmPayment:withAuthenticationContext:completion:) に渡して PaymentIntent を確定します。 #### Swift ```swift import UIKit import StripePaymentsUI class CheckoutViewController: UIViewController { // ... @objc func pay() { guard let paymentIntentClientSecret = paymentIntentClientSecret, let cvc = cvc else { return } let paymentIntentParams = STPPaymentIntentParams(clientSecret: paymentIntentClientSecret) let cardOptions = STPConfirmCardOptions() cardOptions.cvc = cvc; let paymentMethodOptions = STPConfirmPaymentMethodOptions() paymentMethodOptions.cardOptions = cardOptions paymentIntentParams.paymentMethodOptions = paymentMethodOptions STPPaymentHandler.shared().confirmPayment(paymentIntentParams, with: self) { (handlerStatus, paymentIntent, error) in switch handlerStatus { case .succeeded: // Payment succeeded // ... case .canceled: // Payment canceled // ... case .failed: // Payment failed // ... @unknown default: fatalError() } } } } extension CheckoutViewController: STPAuthenticationContext { func authenticationPresentingViewController() -> UIViewController { return self } } ``` セキュリティコードの確認に失敗しても支払いが成功することがあります。これを防ぐには、セキュリティコードの確認に失敗した支払いをブロックする [Radar ルール](https://docs.stripe.com/radar/rules.md#traditional-bank-checks)を設定します。 ## カード認証を処理するために組み込みをアップグレードする この組み込みでは、**支払い時に認証を必要とするカードは拒否されます**。ダッシュボードに多くの支払いが `Failed` としてリストされるようになった場合は、[組み込みのアップグレード](https://docs.stripe.com/payments/payment-intents/upgrade-to-handle-actions.md)が必要なタイミングです。Stripe のグローバルな組み込みは、そのような支払いを自動的に拒否するのではなく処理します。 # Android > This is a Android for when platform is android. View the full page at https://docs.stripe.com/payments/mobile/save-card-without-authentication?platform=android. Stripe では、顧客のカード詳細を収集して後で請求できます。一部の地域では、銀行により、2 段階目の認証 (スマートフォンに送信されたコードの入力など) が要求されます。この追加ステップにより、顧客が Web サイトまたはアプリケーションをアクティブに使用していない場合は、購入の認証ができないためにコンバージョン率が低下します。 アメリカとカナダを中心にして事業を運営している場合は、銀行によって認証が要求されないため、より簡単なこの実装を使用できます。この実装は、カードの保存に認証が必要な国では非準拠となるため、この実装を構築すると、他の国に事業を拡大する場合や他の決済手段を追加する場合に、大幅な変更が必要になります。[認証が必要なカード情報の保存](https://docs.stripe.com/payments/save-and-reuse.md)方法をご確認ください。 > #### 法令遵守 > > お客様は、顧客の支払い情報を保存する際の該当する法律、規制、ネットワークのルールのすべてに準拠する責任を負います。たとえば、顧客がお客様のウェブサイトやアプリを積極的には使用していない時期に顧客に請求するなど、将来の利用に備えて顧客の支払い方法を保存する場合が該当します。支払い方法の保存をどのように計画しているかを示す規約をウェブサイトやアプリに追加し、顧客が許可できるようにします。顧客がオフラインのときに請求する予定である場合は、規約に以下の内容も含める必要があります。 > > - 指定された取引で顧客の代理として単独の支払いまたは一連の支払いを開始することを許可するという、顧客からお客様への同意。 - 予期される支払い時期と支払い頻度 (たとえば、請求が予定されている分割払いなのか、サブスクリプションの決済なのか、あるいは予定されていないトップアップなのか)。 - 支払い金額の決定方法。 - 支払い方法をサブスクリプションサービスに使用する場合は、キャンセルに関するポリシー。 > > これらの規約に関する顧客の書面による同意の記録を必ず保管してください。 ## Stripe をセットアップする [サーバー側] [クライアント側] まず、Stripe アカウントが必要です。[今すぐ登録](https://dashboard.stripe.com/register)してください。 組み込みを開始する前に、Android とサーバーの Stripe SDK を設定します。 ### サーバー側 この組み込みには、サーバー上に Stripe API と通信するエンドポイントが必要です。公式ライブラリを使用して、サーバーから Stripe API にアクセスします。 #### Ruby ```bash # Available as a gem sudo gem install stripe ``` ```ruby # If you use bundler, you can add this line to your Gemfile gem 'stripe' ``` ### クライアント側 [Stripe Android SDK](https://github.com/stripe/stripe-android) はオープンソースであり、[詳細なドキュメントが提供されています](https://stripe.dev/stripe-android/)。 SDK をインストールするには、[app/build.gradle](https://developer.android.com/studio/build/dependencies) ファイルの `dependencies` ブロックに `stripe-android` を追加します。 #### Kotlin ```kotlin plugins { id("com.android.application") } android { ... } dependencies { // ... // Stripe Android SDK implementation("com.stripe:stripe-android:23.0.2") // Include the financial connections SDK to support US bank account as a payment method implementation("com.stripe:financial-connections:23.0.2") } ``` > SDK の最新リリースおよび過去バージョンの詳細については、GitHub の [Releases](https://github.com/stripe/stripe-android/releases) ページをご覧ください。新しいリリースの公開時に通知を受け取るには、[リポジトリのリリースを確認](https://docs.github.com/en/github/managing-subscriptions-and-notifications-on-github/configuring-notifications#configuring-your-watch-settings-for-an-individual-repository)してください。 Stripe の[公開可能キー](https://dashboard.stripe.com/apikeys)を使用して SDK を設定し、 `Application` サブクラスなどで、Stripe API へのリクエストを実行できるようにします。 #### Kotlin ```kotlin import com.stripe.android.PaymentConfiguration class MyApp : Application() { override fun onCreate() { super.onCreate() PaymentConfiguration.init( applicationContext, "<>" ) } } ``` > テストおよび開発時には[テストキー](https://docs.stripe.com/keys.md#obtain-api-keys)を使用し、アプリの公開時には[本番環境](https://docs.stripe.com/keys.md#test-live-modes)キーを使用します。 ## カード詳細を収集する [クライアント側] 顧客が支払いフォームを送信したら、カード番号、有効期限、セキュリティコード、郵便番号を収集する SDK が提供するドロップイン UI コンポーネント、[CardInputWidget](https://stripe.dev/stripe-android/payments-core/com.stripe.android.view/-card-input-widget/index.html) を使用して、カード情報を収集します。 ![](https://d37ugbyn3rpeym.cloudfront.net/docs/mobile/android/android-card-input-widget-with-postal.mp4) カード詳細を [createPaymentMethod](https://stripe.dev/stripe-android/payments-core/com.stripe.android/-stripe/create-payment-method.html) に渡し、*PaymentMethod* (PaymentMethods represent your customer's payment instruments, used with the Payment Intents or Setup Intents APIs) を作成します。 #### Kotlin ```kotlin class CheckoutActivity : AppCompatActivity() { private lateinit var stripe: Stripe private fun pay() { val weakActivity = WeakReference(this) // Collect card details on the client val cardInputWidget = findViewById(R.id.cardInputWidget) val params = cardInputWidget.paymentMethodCreateParams if (params == null) { return } // Configure the SDK with your Stripe publishable key so that it can make requests to the Stripe API stripe = Stripe(applicationContext, PaymentConfiguration.getInstance(applicationContext).publishableKey) lifecycleScope.launch { runCatching { stripe.createPaymentMethod(params).id }.fold( onSuccess = { paymentMethodId -> // Send paymentMethodId to your server for the next steps }, onFailure = { // Create PaymentMethod failed, display the error to the user } ) } } private fun pay(paymentMethod: String?, paymentIntent: String?) { // ... } } ``` 結果として得られた PaymentMethod ID をお客様のサーバーに送信し、残りの手順に従って顧客にカードを保存し、将来そのカードに対して請求します。 ## カードを保存する [サーバー側] PaymentMethod を *Customer* (Customer objects represent customers of your business. They let you reuse payment methods and give you the ability to track multiple payments) に関連付けることでカードを保存します。Customer オブジェクトを使用して、顧客に関する他の情報 (配送の詳細、メールアドレスなど) を格納できます。 ```curl curl https://api.stripe.com/v1/customers \ -u "<>:" \ -d payment_method={{PAYMENT_METHOD_ID}} ``` 既存の Customer がある場合は、代わりにそのオブジェクトに PaymentMethod を関連付けることがきます。 ```curl curl https://api.stripe.com/v1/payment_methods/{{PAYMENT_METHOD_ID}}/attach \ -u "<>:" \ -d customer="{{CUSTOMER_ID}}" ``` この時点で、顧客の内部的な独自の表記がある場合は、この表記に Customer オブジェクトの ID と PaymentMethod の ID を関連付けます。 ## 保存されたカードに請求する [サーバー側] 顧客に請求する準備ができたら、請求する PaymentMethod ID を検索します。これは、両方の ID をデータベースに格納するか、顧客 ID を使用して顧客の使用可能なすべての PaymentMethod を検索することで実行できます。 ```curl curl -G https://api.stripe.com/v1/payment_methods \ -u "<>:" \ -d customer="{{CUSTOMER_ID}}" \ -d type=card ``` PaymentMethod ID と顧客 ID を使用して新しい PaymentIntent を作成します。[error_on_requires_action](https://docs.stripe.com/api/payment_intents/create.md#create_payment_intent-error_on_requires_action) を true に設定して、2 段階認証など、顧客のアクションを必要とする支払いは拒否します。 ```curl curl https://api.stripe.com/v1/payment_intents \ -u "<>:" \ -d amount=1099 \ -d currency=usd \ -d "payment_method_types[]"=card \ -d customer="{{CUSTOMER_ID}}" \ -d payment_method={{PAYMENT_METHOD_ID}} \ -d error_on_requires_action=true \ -d confirm=true ``` 支払いが失敗すると、リクエストも 402 HTTP ステータスコードで失敗し、Stripe からエラーが返されます。アプリケーションに戻って支払いを完了するように (アプリ内通知を送信するなどして) 顧客に通知する必要があります。Stripe API ライブラリから発生した[エラー](https://docs.stripe.com/api/errors/handling.md)のコードを確認するか、PaymentIntent の [last_payment_error.decline_code](https://docs.stripe.com/api/payment_intents/object.md#payment_intent_object-last_payment_error-decline_code) を確認し、カード発行会社が支払いを拒否した理由を調べます。 ## カードエラーを処理する 支払いが失敗したことを顧客に通知し、ステップ 1 で作成した決済フォームに顧客を誘導します。顧客はそこで新しいカード詳細を入力できます。その新しい PaymentMethod ID を自社のサーバーに送信して、Customer オブジェクトに[関連付け](https://docs.stripe.com/api/payment_methods/attach.md)、再度決済を行います。 別の方法として、すでに Customer を作成している場合は、PaymentIntent の作成とカードの保存を 1 回の API コールで実行できます。 ```curl curl https://api.stripe.com/v1/payment_intents \ -u "<>:" \ -d amount=1099 \ -d currency=usd \ -d "payment_method_types[]"=card \ -d customer="{{CUSTOMER_ID}}" \ -d payment_method={{PAYMENT_METHOD_ID}} \ -d error_on_requires_action=true \ -d confirm=true \ -d setup_future_usage=on_session ``` [setup_future_usage](https://docs.stripe.com/api/payment_intents/create.md#create_payment_intent-setup_future_usage) を `on_session` に設定すると、不要な認証をトリガーせずにカードを後で使用するために保存することを Stripe に示します。 ## 組み込みをテストする Stripe はサンドボックスで使用してさまざまなカードの動作をシミュレーションできる[テストカード](https://docs.stripe.com/testing.md)を提供しています。任意のセキュリティコード、郵便番号、将来の有効期限を指定してこれらのカードを使用してください。 | 番号 | 説明 | | ---------------- | -------------------------------------------------------- | | 4242424242424242 | 成功し、支払いがすぐに処理されます。 | | 4000000000009995 | 常に支払い拒否コード `insufficient_funds` で失敗します。 | | 4000002500003155 | 認証が必要なため、この導入では、`authentication_required` というコードで拒否されます。 | ## Optional: セキュリティコードを再収集する 保存されたクレジットカードで以降の支払いを作成する際には、不正利用の追加対策としてカードのセキュリティコードを再収集して、ユーザーを確認することをお勧めします。 まずサーバーから支払いの金額と通貨を使用して PaymentIntent を作成し、[customer](https://docs.stripe.com/api/payment_intents/create.md#create_payment_intent-customer) を Customer の ID に設定します。次に、Customer に関連付けられた PaymentMethod の[リスト](https://docs.stripe.com/api/payment_methods/list.md)を作成して、セキュリティコードの再収集のためにどの PaymentMethod をユーザーに対して表示するかを決めます。 顧客のセキュリティコードを再収集したら、その顧客のセキュリティコードを使用して [PaymentMethodOptionsParams.Card](https://stripe.dev/stripe-android/payments-core/com.stripe.android.model/-payment-method-options-params/-card/index.html) インスタンスを作成します。PaymentIntent を確定するには、[PaymentMethodOptionsParams.Card](https://stripe.dev/stripe-android/payments-core/com.stripe.android.model/-payment-method-options-params/-card/index.html) インスタンスを使用して [ConfirmPaymentIntentParams](https://stripe.dev/stripe-android/payments-core/com.stripe.android.model/-confirm-payment-intent-params/index.html) インスタンスを作成し、それを [Stripe#confirmPayment()](https://stripe.dev/stripe-android/payments-core/com.stripe.android/-stripe/confirm-payment.html) に渡します。 #### Kotlin ```kotlin class CheckoutActivity : AppCompatActivity() { private val stripe: Stripe by lazy { Stripe(this, "<>") } private fun confirmPaymentIntent(clientSecret: String, cvc: String) { val params = ConfirmPaymentIntentParams.createWithPaymentMethodId( paymentMethodId = '{{PAYMENT_METHOD_ID}}', paymentMethodOptions = PaymentMethodOptionsParams.Card( cvc = cvc ), clientSecret = clientSecret ) stripe.confirmPayment(this, params) } override fun onActivityResult(requestCode: Int, resultCode: Int, data: Intent?) { super.onActivityResult(requestCode, resultCode, data) stripe.onPaymentResult( requestCode, data, object : ApiResultCallback { override fun onSuccess(result: PaymentIntentResult) { } override fun onError(e: Exception) { } } ) } } ``` セキュリティコードの確認に失敗しても支払いが成功することがあります。これを防ぐには、セキュリティコードの確認に失敗した支払いをブロックする [Radar ルール](https://docs.stripe.com/radar/rules.md#traditional-bank-checks)を設定します。 ## カード認証を処理するために組み込みをアップグレードする この組み込みでは、**支払い時に認証を必要とするカードは拒否されます**。ダッシュボードに多くの支払いが `Failed` としてリストされるようになった場合は、[組み込みのアップグレード](https://docs.stripe.com/payments/payment-intents/upgrade-to-handle-actions.md)が必要なタイミングです。Stripe のグローバルな組み込みは、そのような支払いを自動的に拒否するのではなく処理します。 # React Native > This is a React Native for when platform is react-native. View the full page at https://docs.stripe.com/payments/mobile/save-card-without-authentication?platform=react-native. Stripe では、顧客のカード詳細を収集して後で請求できます。一部の地域では、銀行により、2 段階目の認証 (スマートフォンに送信されたコードの入力など) が要求されます。この追加ステップにより、顧客が Web サイトまたはアプリケーションをアクティブに使用していない場合は、購入の認証ができないためにコンバージョン率が低下します。 アメリカとカナダを中心にして事業を運営している場合は、銀行によって認証が要求されないため、より簡単なこの実装を使用できます。この実装は、カードの保存に認証が必要な国では非準拠となるため、この実装を構築すると、他の国に事業を拡大する場合や他の決済手段を追加する場合に、大幅な変更が必要になります。[認証が必要なカード情報の保存](https://docs.stripe.com/payments/save-and-reuse.md)方法をご確認ください。 > #### 法令遵守 > > お客様は、顧客の支払い情報を保存する際の該当する法律、規制、ネットワークのルールのすべてに準拠する責任を負います。たとえば、顧客がお客様のウェブサイトやアプリを積極的には使用していない時期に顧客に請求するなど、将来の利用に備えて顧客の支払い方法を保存する場合が該当します。支払い方法の保存をどのように計画しているかを示す規約をウェブサイトやアプリに追加し、顧客が許可できるようにします。顧客がオフラインのときに請求する予定である場合は、規約に以下の内容も含める必要があります。 > > - 指定された取引で顧客の代理として単独の支払いまたは一連の支払いを開始することを許可するという、顧客からお客様への同意。 - 予期される支払い時期と支払い頻度 (たとえば、請求が予定されている分割払いなのか、サブスクリプションの決済なのか、あるいは予定されていないトップアップなのか)。 - 支払い金額の決定方法。 - 支払い方法をサブスクリプションサービスに使用する場合は、キャンセルに関するポリシー。 > > これらの規約に関する顧客の書面による同意の記録を必ず保管してください。 ## Stripe を設定する [サーバ側] [クライアント側] ### サーバ側 この組み込みには、Stripe API と通信するエンドポイントがサーバ上に必要です。Stripe の公式ライブラリを使用して、サーバから Stripe API にアクセスします。 #### Ruby ```bash # Available as a gem sudo gem install stripe ``` ```ruby # If you use bundler, you can add this line to your Gemfile gem 'stripe' ``` ### クライアント側 [React Native SDK](https://github.com/stripe/stripe-react-native) はオープンソースであり、詳細なドキュメントが提供されています。内部では、[ネイティブの iOS](https://github.com/stripe/stripe-ios) および [Android](https://github.com/stripe/stripe-android) の SDK を使用します。Stripe の React Native SDK をインストールするには、プロジェクトのディレクトリーで (使用するパッケージマネージャーによって異なる) 次のいずれかのコマンドを実行します。 #### yarn ```bash yarn add @stripe/stripe-react-native ``` #### npm ```bash npm install @stripe/stripe-react-native ``` 次に、その他の必要な依存関係をインストールします。 - iOS の場合は、**ios** ディレクトリに移動して `pod install` を実行し、必要なネイティブ依存関係もインストールします。 - Android の場合は、依存関係をインストールする必要はありません。 > [公式の TypeScript ガイド](https://reactnative.dev/docs/typescript#adding-typescript-to-an-existing-project)に従って TypeScript のサポートを追加することをお勧めします。 ### Stripe の初期化 React Native アプリで Stripe を初期化するには、決済画面を `StripeProvider` コンポーネントでラップするか、`initStripe` 初期化メソッドを使用します。`publishableKey` の API [公開可能キー](https://docs.stripe.com/keys.md#obtain-api-keys)のみが必要です。次の例は、`StripeProvider` コンポーネントを使用して Stripe を初期化する方法を示しています。 ```jsx 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 ( {/* Your app code here */} ); } ``` > テストおよび開発時には API の[テストキー](https://docs.stripe.com/keys.md#obtain-api-keys)を使用し、アプリの公開時には[本番環境](https://docs.stripe.com/keys.md#test-live-modes)キーを使用します。 ## カード詳細を収集する [クライアント側] カード番号、有効期限、セキュリティコード、郵便番号を収集する、SDK が提供する UI コンポーネント、`CardField` を使用して、クライアント側でカード情報を安全に収集します。 ![](https://d37ugbyn3rpeym.cloudfront.net/docs/mobile/ios/card-field.mp4) `CardField` コンポーネントを支払い画面に追加することで、顧客からカード詳細を安全に収集します。`onCardChange` コールバックを使用して、カードのブランドや詳細情報の欠落の有無など、カードに関する機密性の低い情報を検査します。 ```javascript import { CardField, useStripe } from '@stripe/stripe-react-native'; function PaymentScreen() { // ... return ( { console.log('cardDetails', cardDetails); }} onFocus={(focusedField) => { console.log('focusField', focusedField); }} /> ); } ``` アプリを実行し、チェックアウトページに `CardField` コンポーネントが表示されることを確認します。顧客が **支払う** をタップしたら、`createPaymentMethod` を使用してカード詳細を収集し、*PaymentMethod* (PaymentMethods represent your customer's payment instruments, used with the Payment Intents or Setup Intents APIs) を作成します。その PaymentMethod の ID をサーバーに送信します。 ```javascript const pay = () => { const { paymentMethod, error } = await createPaymentMethod({ paymentMethodType: 'Card', paymentMethodData: { billingDetails: { name: 'Jenny Rosen', } }, }); if (error) { // Handle error } else if (paymentMethod) { const paymentMethodId = paymentMethod.id; // Send the ID of the PaymentMethod to your server for the next step // ... } }; ``` ## カードを保存する [サーバー側] PaymentMethod を *Customer* (Customer objects represent customers of your business. They let you reuse payment methods and give you the ability to track multiple payments) に関連付けることでカードを保存します。Customer オブジェクトを使用して、顧客に関する他の情報 (配送の詳細、メールアドレスなど) を格納できます。 ```curl curl https://api.stripe.com/v1/customers \ -u "<>:" \ -d payment_method={{PAYMENT_METHOD_ID}} ``` 既存の Customer がある場合は、代わりにそのオブジェクトに PaymentMethod を関連付けることがきます。 ```curl curl https://api.stripe.com/v1/payment_methods/{{PAYMENT_METHOD_ID}}/attach \ -u "<>:" \ -d customer="{{CUSTOMER_ID}}" ``` この時点で、顧客の内部的な独自の表記がある場合は、この表記に Customer オブジェクトの ID と PaymentMethod の ID を関連付けます。 ## 保存されたカードに請求する [サーバー側] 顧客に請求する準備ができたら、請求する PaymentMethod ID を検索します。これは、両方の ID をデータベースに格納するか、顧客 ID を使用して顧客の使用可能なすべての PaymentMethod を検索することで実行できます。 ```curl curl -G https://api.stripe.com/v1/payment_methods \ -u "<>:" \ -d customer="{{CUSTOMER_ID}}" \ -d type=card ``` PaymentMethod ID と顧客 ID を使用して新しい PaymentIntent を作成します。[error_on_requires_action](https://docs.stripe.com/api/payment_intents/create.md#create_payment_intent-error_on_requires_action) を true に設定して、2 段階認証など、顧客のアクションを必要とする支払いは拒否します。 ```curl curl https://api.stripe.com/v1/payment_intents \ -u "<>:" \ -d amount=1099 \ -d currency=usd \ -d "payment_method_types[]"=card \ -d customer="{{CUSTOMER_ID}}" \ -d payment_method={{PAYMENT_METHOD_ID}} \ -d error_on_requires_action=true \ -d confirm=true ``` 支払いが失敗すると、リクエストも 402 HTTP ステータスコードで失敗し、Stripe からエラーが返されます。アプリケーションに戻って支払いを完了するように (アプリ内通知を送信するなどして) 顧客に通知する必要があります。Stripe API ライブラリから発生した[エラー](https://docs.stripe.com/api/errors/handling.md)のコードを確認するか、PaymentIntent の [last_payment_error.decline_code](https://docs.stripe.com/api/payment_intents/object.md#payment_intent_object-last_payment_error-decline_code) を確認し、カード発行会社が支払いを拒否した理由を調べます。 ## カードエラーを処理する 支払いが失敗したことを顧客に通知し、ステップ 1 で作成した決済フォームに顧客を誘導します。顧客はそこで新しいカード詳細を入力できます。その新しい PaymentMethod ID を自社のサーバーに送信して、Customer オブジェクトに[関連付け](https://docs.stripe.com/api/payment_methods/attach.md)、再度決済を行います。 別の方法として、すでに Customer を作成している場合は、PaymentIntent の作成とカードの保存を 1 回の API コールで実行できます。 ```curl curl https://api.stripe.com/v1/payment_intents \ -u "<>:" \ -d amount=1099 \ -d currency=usd \ -d "payment_method_types[]"=card \ -d customer="{{CUSTOMER_ID}}" \ -d payment_method={{PAYMENT_METHOD_ID}} \ -d error_on_requires_action=true \ -d confirm=true \ -d setup_future_usage=on_session ``` [setup_future_usage](https://docs.stripe.com/api/payment_intents/create.md#create_payment_intent-setup_future_usage) を `on_session` に設定すると、不要な認証をトリガーせずにカードを後で使用するために保存することを Stripe に示します。 ## 組み込みをテストする Stripe はサンドボックスで使用してさまざまなカードの動作をシミュレーションできる[テストカード](https://docs.stripe.com/testing.md)を提供しています。任意のセキュリティコード、郵便番号、将来の有効期限を指定してこれらのカードを使用してください。 | 番号 | 説明 | | ---------------- | -------------------------------------------------------- | | 4242424242424242 | 成功し、支払いがすぐに処理されます。 | | 4000000000009995 | 常に支払い拒否コード `insufficient_funds` で失敗します。 | | 4000002500003155 | 認証が必要なため、この導入では、`authentication_required` というコードで拒否されます。 | ## Optional: セキュリティコードの再収集 保存されたクレジットカードで以降の支払いを作成する際には、不正利用の追加対策としてカードのセキュリティコードを再収集して、ユーザーを確認することをお勧めします。 まずサーバーで金額、通貨、[Customer](https://docs.stripe.com/api/payment_intents/create.md#create_payment_intent-customer) ID を使用して PaymentIntent を作成します。次に、*Customer* (Customer objects represent customers of your business. They let you reuse payment methods and give you the ability to track multiple payments) に関連付けられた *PaymentMethod* (PaymentMethods represent your customer's payment instruments, used with the Payment Intents or Setup Intents APIs) の[リスト](https://docs.stripe.com/api/payment_methods/list.md)を作成して、セキュリティコードの再収集の際に表示する PaymentMethod を決定します。顧客のセキュリティコードを再収集したら、顧客の `CVC` と `paymentMethodId` を使用して `confirmPayment` メソッドを呼び出します。 ```javascript const pay = async (cvc: string) => { const { clientSecret, paymentMethodId, } = await fetchPaymentIntentClientSecret(); const {error, paymentIntent} = await confirmPayment(clientSecret, { paymentMethodType: 'Card', paymentMethodData: { cvc, paymentMethodId, }, }); if (error) { Alert.alert(`Error code: ${error.code}`, error.message); } else if (paymentIntent.status === PaymentIntent.Status.Succeeded) { Alert.alert('Success', 'The payment was confirmed successfully!'); } else { // Handle other statuses accordingly } }; ``` セキュリティコードの確認に失敗しても支払いが成功することがあります。これを防ぐには、セキュリティコードの確認に失敗した支払いをブロックする [Radar ルール](https://docs.stripe.com/radar/rules.md#traditional-bank-checks)を設定します。 ## カード認証を処理するために組み込みをアップグレードする この組み込みでは、**支払い時に認証を必要とするカードは拒否されます**。ダッシュボードに多くの支払いが `Failed` としてリストされるようになった場合は、[組み込みのアップグレード](https://docs.stripe.com/payments/payment-intents/upgrade-to-handle-actions.md)が必要なタイミングです。Stripe のグローバルな組み込みは、そのような支払いを自動的に拒否するのではなく処理します。