# Alipay の支払いを受け付ける 中国の顧客に広く普及しているデジタルウォレットである Alipay の支払いを受け付ける方法をご紹介します。 # Checkout > This is a Checkout for when payment-ui is checkout. View the full page at https://docs.stripe.com/payments/alipay/accept-a-payment?payment-ui=checkout. > Stripe は、通貨、支払い方法の制限、その他のパラメーターを評価することで、適切な支払い方法を顧客に自動的に提示できます。 > > - [決済の受け付け](https://docs.stripe.com/payments/accept-a-payment.md?payment-ui=checkout&ui=stripe-hosted)ガイドに従って、[動的な決済手段](https://docs.stripe.com/payments/payment-methods/dynamic-payment-methods.md)を使用するチェックアウトの統合機能を構築します。 - 動的な決済手段を使用しない場合は、チェックアウトの導入で、決済方法を手動で設定するために以下のステップに従ってください。 Alipay は [1 回限り](https://docs.stripe.com/payments/payment-methods.md#usage)の決済手段であり、顧客が支払いを[認証](https://docs.stripe.com/payments/payment-methods.md#customer-actions)する必要があります。顧客はウェブサイトまたはアプリからリダイレクトされ、Alipay で支払いを承認すると、ウェブサイトまたはアプリに戻されます。ここで、支払いが成功したか失敗したかに関する[即時通知](https://docs.stripe.com/payments/payment-methods.md#payment-notification)を受け取ります。 ## 互換性を判断する **顧客の居住地**: China **対応可能な通貨**: `aud, cad, eur, gbp, hkd, jpy, nzd, sgd, usd, myr` **取引通貨**: `aud, cad, cny, eur, gbp, hkd, jpy, nzd, sgd, usd, myr` **支払いモード**: Yes **セットアップモード**: No **サブスクリプションモード**: No Alipay の支払いに対応するには、Checkout セッションが次の条件をすべて満たしている必要があります。 - ラインアイテムの*価格* (Prices define how much and how often to charge for products. This includes how much the product costs, what currency to use, and the interval if the price is for subscriptions)はすべて、同じ通貨である必要があります。 - 異なる通貨のラインアイテムが存在する場合は、通貨ごとに別の Checkout セッションを作成してください。 - 使用できるのは 単一の項目だけです。 継続的な*サブスクリプション* (A Subscription represents the product details associated with the plan that your customer subscribes to. Allows you to charge the customer on a recurring basis)プランには対応していません。 ## 支払いを受け付ける > このガイドを使用する前に、まず Checkout で[決済を受け付ける](https://docs.stripe.com/payments/accept-a-payment.md?integration=checkout)ための実装を構築します。 このガイドでは、Alipay を有効にする方法をご案内しています。また動的な決済方法を使用した支払いの受け付けと手動で設定する決済方法との違いをご確認ください。 ### 支払い方法として Alipay を有効にする 新しい [Checkout Session (セッション)](https://docs.stripe.com/api/checkout/sessions.md) を作成する際は、以下を行う必要があります。 1. `alipay` を `payment_method_types` のリストに追加します。 1. すべての `line_items` が同じ通貨を使用していることを確認します。 #### Stripe がオンラインで提供するページ ```curl curl https://api.stripe.com/v1/checkout/sessions \ -u "<>:" \ -d "line_items[0][price_data][currency]=hkd" \ -d "line_items[0][price_data][product_data][name]=T-shirt" \ -d "line_items[0][price_data][unit_amount]=2000" \ -d "line_items[0][quantity]=1" \ -d mode=payment \ -d "payment_method_types[0]=card" \ -d "payment_method_types[1]=alipay" \ --data-urlencode "success_url=https://example.com/success" ``` #### 組み込みフォーム ```curl curl https://api.stripe.com/v1/checkout/sessions \ -u "<>:" \ -d "line_items[0][price_data][currency]=hkd" \ -d "line_items[0][price_data][product_data][name]=T-shirt" \ -d "line_items[0][price_data][unit_amount]=2000" \ -d "line_items[0][quantity]=1" \ -d mode=payment \ -d "payment_method_types[0]=card" \ -d "payment_method_types[1]=alipay" \ --data-urlencode "return_url=https://example.com/return" \ -d ui_mode=embedded_page ``` ### 注文のフルフィルメント 決済受け付け後に、[注文のフルフィルメントを実行](https://docs.stripe.com/checkout/fulfillment.md)する方法を説明します。 ## 組み込みをテストする Checkout の組み込みをテストする際は、支払い方法として Alipay を選択して、**支払い**ボタンをクリックします。 ## 返金および不審請求の申請を処理する Alipay の返金期間は、元の支払い日から最長 90 日間です。 Alipay には不審請求の申請プロセスはありません。顧客は自身の Alipay アカウントで認証を行います。 ## See also - [Alipay の詳細](https://docs.stripe.com/payments/alipay.md) - [Checkout のフルフィルメント](https://docs.stripe.com/checkout/fulfillment.md) - [Checkout のカスタマイズ](https://docs.stripe.com/payments/checkout/customization.md) # iOS > This is a iOS for when payment-ui is mobile and platform is ios. View the full page at https://docs.stripe.com/payments/alipay/accept-a-payment?payment-ui=mobile&platform=ios. Alipay は [1 回限り](https://docs.stripe.com/payments/payment-methods.md#usage)の決済手段であり、顧客が支払いを[認証](https://docs.stripe.com/payments/payment-methods.md#customer-actions)する必要があります。顧客はウェブサイトまたはアプリからリダイレクトされ、Alipay で支払いを承認すると、ウェブサイトまたはアプリに戻されます。ここで、支払いが成功したか失敗したかに関する[即時通知](https://docs.stripe.com/payments/payment-methods.md#payment-notification)を受け取ります。 ## Stripe を設定する [クライアント側] [サーバ側] まず、Stripe アカウントが必要です。[今すぐ登録](https://dashboard.stripe.com/register)してください。 ### サーバ側 この組み込みには、サーバ上に 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' ``` ### クライアント側 [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)キーを使用します。 ## PaymentIntent を作成する [サーバ側] [PaymentIntent (支払いインテント)](https://docs.stripe.com/api/payment_intents/object.md) は、顧客から支払いを回収する意図を表すオブジェクトであり、支払いプロセスのライフサイクルを追跡します。サーバーで `PaymentIntent` を作成し、回収する金額と[対応している通貨](https://docs.stripe.com/payments/alipay.md#supported-currencies)を指定します。すでに [Payment Intents](https://docs.stripe.com/payments/payment-intents.md) のシステムがある場合は、`alipay` を[決済手段タイプ](https://docs.stripe.com/api/payment_intents/create.md#create_payment_intent-payment_method_types)のリストに追加します。 ```curl curl https://api.stripe.com/v1/payment_intents \ -u "<>:" \ -d "payment_method_types[]=alipay" \ -d amount=1099 \ -d currency=hkd ``` ## Alipay ウォレットにリダイレクトする [クライアント側] アプリのターゲット設定の情報タブに移動して、[アプリのカスタム URL スキームを登録](https://developer.apple.com/documentation/xcode/defining-a-custom-url-scheme-for-your-app)します。 ![Xcode でカスタムの URL スキームを設定する](https://b.stripecdn.com/docs-statics-srv/assets/ios-custom-url-scheme.e7bbf5f60cbb1a96f157f5cd89410120.png) 顧客が支払いを完了すると、Alipay アプリはこの URL を開いてお客様のアプリに戻ります。この URL を `UISceneDelegate` または `UIApplicationDelegate` で Stripe SDK に転送します。 #### SceneDelegate #### Swift ```swift // This method handles opening custom URL schemes (for example, "your-app://stripe-redirect") func scene(_ scene: UIScene, openURLContexts URLContexts: Set) { guard let url = URLContexts.first?.url else { return } let stripeHandled = StripeAPI.handleURLCallback(with: url) if (!stripeHandled) { // This was not a Stripe url – handle the URL normally as you would } } ``` #### AppDelegate #### Swift ```swift // This method handles opening custom URL schemes (for example, "your-app://stripe-redirect") func application(_ app: UIApplication, open url: URL, options: [UIApplication.OpenURLOptionsKey: Any] = [:]) -> Bool { let stripeHandled = StripeAPI.handleURLCallback(with: url) if (stripeHandled) { return true } else { // This was not a Stripe url – handle the URL normally as you would } return false } ``` 顧客が Alipay で支払うをタップしたら、[STPPaymentHandler confirmPayment](https://stripe.dev/stripe-ios/stripe-payments/Classes/STPPaymentHandler.html#/c:@M@StripePayments@objc\(cs\)STPPaymentHandler\(im\)confirmPayment:withAuthenticationContext:completion:) を使用して PaymentIntent を確定します。これにより、Alipay アプリが起動します。また、Alipay アプリがインストールされていない場合は WebView を表示します。 #### Swift ```swift import UIKit import StripePayments class CheckoutViewController: UIViewController { // ... func pay() { let clientSecret = ... // The client secret of the PaymentIntent let paymentIntentParams = STPPaymentIntentParams(clientSecret: clientSecret) paymentIntentParams.paymentMethodParams = STPPaymentMethodParams(alipay: STPPaymentMethodAlipayParams(), billingDetails: nil, metadata: nil) paymentIntentParams.paymentMethodOptions = STPConfirmPaymentMethodOptions() paymentIntentParams.paymentMethodOptions?.alipayOptions = STPConfirmAlipayOptions() paymentIntentParams.returnURL = "{{URL SCHEME}}://safepay/" // Replace {{URL SCHEME}} with your own custom URL scheme. STPPaymentHandler.shared().confirmPayment(paymentIntentParams, with: self) { (status, intent, error) in switch status { case .canceled: // Payment was canceled case .failed: // Payment failed case .succeeded: // Payment was successful @unknown default: fatalError() } } } } extension CheckoutViewController: STPAuthenticationContext { func authenticationPresentingViewController() -> UIViewController { return self } } ``` Alipay は `safepay/` を使用してホストとして戻り URL を開きます。たとえば、カスタム URL スキームが `myapp` の場合、戻り URL は `myapp://safepay/` にする必要があります。 ## Optional: 支払い後のイベントを処理する 支払いが完了すると、Stripe は [payment_intent.succeeded](https://docs.stripe.com/api/events/types.md#event_types-payment_intent.succeeded) イベントを送信します。ダッシュボード、カスタム *Webhook* (A webhook is a real-time push notification sent to your application as a JSON payload through HTTPS requests)、またはパートナーソリューションを使用してこれらのイベントを受信し、また、顧客への注文確認メールの送信、データベースでの売上の記録、配送ワークフローの開始などのアクションを実行します。 クライアントからのコールバックを待つのではなく、これらのイベントをリッスンします。クライアント側では、コールバックが実行される前に顧客がブラウザーのウィンドウを閉じたり、アプリを終了したりする可能性があります。また、悪意を持つクライアントがレスポンスを不正操作する恐れもあります。非同期型のイベントをリッスンするよう構築済みのシステムを設定することで、これ以降はより多くの決済手段を簡単に受け付けられるようになります。[サポートされているすべての決済手段の違い](https://stripe.com/payments/payment-methods-guide)をご確認ください。 ### イベントを受信し、ビジネスアクションを実行する ビジネスアクションを受信して実行するためのいくつかのオプションがあります。 #### 手動 Stripe ダッシュボードは、すべての Stripe での支払いの確認、メール領収書の送信、入金処理、または失敗した支払いの再試行に使用できます。 - [ダッシュボードでテスト支払いを確認する](https://dashboard.stripe.com/test/payments) #### カスタムコード Webhook ハンドラを作成してイベントをリッスンし、非同期型のカスタムの支払いフローを作成します。Stripe CLI を使用して、ローカルで Webhook 組み込みのテストとデバッグを行います。 - [Build a custom webhook](https://docs.stripe.com/webhooks/handling-payment-events.md#build-your-own-webhook) #### 事前構築のアプリ [オートメーション](https://stripe.partners/?f_category=automation)や[マーケティングとセールス](https://stripe.partners/?f_category=marketing-and-sales)などの一般的なビジネスイベントを、パートナーアプリケーションとの連携によって処理します。 ## サポートされる通貨 お客様のアカウントには、以下のいずれかの通貨の銀行アカウントが必要です。お客様の国に対応する通貨で Alipay による決済を作成できます。Alipay のデフォルトの現地通貨は `cny` で、顧客にも購入金額が `cny` で表示されます。 | 通貨 | 国 | | ----- | ---------------------------------------------------------------------------------------------------------------------------------------------------- | | `cny` | 任意の国 | | `aud` | オーストラリア | | `cad` | カナダ | | `eur` | オーストリア、ベルギー、ブルガリア、キプロス、チェコ共和国、デンマーク、エストニア、フィンランド、フランス、ドイツ、ギリシャ、アイルランド、イタリア、ラトビア、リトアニア、ルクセンブルグ、マルタ、オランダ、ノルウェー、ポルトガル、ルーマニア、スロバキア、スロベニア、スペイン、スウェーデン、スイス | | `gbp` | イギリス | | `hkd` | 香港 | | `jpy` | 日本 | | `myr` | マレーシア | | `nzd` | ニュージーランド | | `sgd` | シンガポール | | `usd` | アメリカ | 別の通貨の銀行口座を所有していて、その通貨での Alipay 決済の作成をご希望の場合は、[サポートにお問い合わせください](https://support.stripe.com/email)。通貨の追加に関するサポートはケースバイケースで提供されます。 # Android > This is a Android for when payment-ui is mobile and platform is android. View the full page at https://docs.stripe.com/payments/alipay/accept-a-payment?payment-ui=mobile&platform=android. Alipay は [1 回限り](https://docs.stripe.com/payments/payment-methods.md#usage)の決済手段であり、顧客が支払いを[認証](https://docs.stripe.com/payments/payment-methods.md#customer-actions)する必要があります。顧客はウェブサイトまたはアプリからリダイレクトされ、Alipay で支払いを承認すると、ウェブサイトまたはアプリに戻されます。ここで、支払いが成功したか失敗したかに関する[即時通知](https://docs.stripe.com/payments/payment-methods.md#payment-notification)を受け取ります。 ## Stripe を設定する [サーバ側] [クライアント側] まず、Stripe アカウントが必要です。[今すぐ登録](https://dashboard.stripe.com/register)してください。 ### サーバ側 この組み込みには、サーバ上に Stripe API と通信するエンドポイントが必要です。サーバから Stripe API にアクセスするには、Stripe の公式ライブラリを使用します。 #### 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.2.0") // Include the financial connections SDK to support US bank account as a payment method implementation("com.stripe:financial-connections:23.2.0") } ``` > 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)キーを使用します。 Stripe サンプルでは、サーバへの HTTP リクエストの作成に、[OkHttp](https://github.com/square/okhttp) および [GSON](https://github.com/google/gson) も使用します。 ## Alipay SDK を組み込む [クライアント側] Alipay のアプリ間リダイレクトフローを使用してアプリ内で支払いを行う場合、[Alipay SDK](https://global.alipay.com/docs/ac/app/download) を組み込む必要があります。Alipay SDK の組み込みを希望しない場合、Stripe SDK は WebView を使用して顧客を Alipay にリダイレクトします。Alipay SDK を組み込むと、よりシームレスな操作性を顧客に提供できますが、アプリ全体のサイズが大きくなります。詳細については、[WebView を使用する](https://docs.stripe.com/payments/alipay/accept-a-payment.md#android-using-a-webview)をご覧ください。 アーカイブを解凍してから、`alipaySdk-{version}.aar` をアプリの `libs` ディレクトリに追加します。`libs` フォルダをプロジェクトの依存関係リポジトリリストに追加します。 ```groovy allprojects { repositories { flatDir { dirs 'libs' } } } ``` アプリに依存関係を追加します。 ```groovy dependencies { // ... // Replace {version} with the version number of the Alipay SDK that you downloaded above implementation(name:"alipaySdk-{version}", ext:"aar") } ``` ## PaymentIntent を作成する [サーバ側] [PaymentIntent (支払いインテント)](https://docs.stripe.com/api/payment_intents/object.md) は、顧客から支払いを回収する意図を表すオブジェクトであり、支払いプロセスのライフサイクルを追跡します。サーバーで `PaymentIntent` を作成し、回収する金額と[対応している通貨](https://docs.stripe.com/payments/alipay.md#supported-currencies)を指定します。すでに [Payment Intents](https://docs.stripe.com/payments/payment-intents.md) のシステムがある場合は、`alipay` を[決済手段タイプ](https://docs.stripe.com/api/payment_intents/create.md#create_payment_intent-payment_method_types)のリストに追加します。 ```curl curl https://api.stripe.com/v1/payment_intents \ -u "<>:" \ -d "payment_method_types[]=alipay" \ -d amount=1099 \ -d currency=hkd ``` ## Alipay ウォレットにリダイレクトする [クライアント側] サーバの PaymentIntent をリクエストし、その client secret を保存します。 #### Kotlin ```kotlin class AlipayActivity : AppCompatActivity() { private lateinit var paymentIntentClientSecret: String override fun onCreate(savedInstanceState: Bundle?) { // ... fetchPaymentIntent() } private fun fetchPaymentIntent() { // Request a PaymentIntent from your server and store its client secret } } ``` 顧客が Alipay で支払うをタップしたら、Stripe の `confirmAlipayPayment` を使用して PaymentIntent を確定します。Stripe SDK から Alipay SDK にデータを渡すため、AlipayAuthenticator を指定する必要があります。この認証システムは、指定されたデータ文字列で Alipay `payV2` メソッドを呼び出します。Alipay SDK は、Alipay アプリを開くか (インストールしている場合)、または独自の UI を表示して、結果を自動的に Stripe SDK に送信します。 > Alipay Android SDK はテスト環境の支払いに対応していません。この組み込みを完全にテストするには、[本番環境](https://docs.stripe.com/keys.md#test-live-modes)を使用します。 #### Kotlin ```kotlin import com.alipay.sdk.app.PayTask class AlipayActivity : AppCompatActivity() { // ... private lateinit var paymentIntentClientSecret: String private val stripe: Stripe by lazy { Stripe( applicationContext, PaymentConfiguration.getInstance(applicationContext).publishableKey ) } // Call this function when the customer taps "Pay with Alipay" private fun startCheckout() { // ... lifecycleScope.launch { runCatching { stripe.confirmAlipayPayment( ConfirmPaymentIntentParams.createAlipay(paymentIntentClientSecret), { data -> PayTask(this@AlipayActivity).payV2(data, true) } ) }.fold( onSuccess = { result -> val paymentIntent = result.intent val status = paymentIntent.status when (status) { StripeIntent.Status.Succeeded -> { // Payment succeeded } StripeIntent.Status.RequiresAction -> { // Customer didn't complete the payment // You can try to confirm this Payment Intent again } else -> { // Payment failed/canceled } } }, onFailure = { // Payment failed } ) } } } ``` ## Optional: WebView を使用する [クライアント側] Alipay SDK の組み込みを希望しない場合、`confirmPayment` を呼び出すと、Stripe SDK が顧客を Alipay WebView にリダイレクトできます。Alipay の Web サイトは、Alipay アプリを開く (インストールされている場合) か、または顧客が Web で支払いを完了できるようにします。 #### Kotlin ```kotlin class AlipayActivity : AppCompatActivity() { // ... private lateinit var paymentIntentClientSecret: String private val stripe: Stripe by lazy { Stripe( applicationContext, PaymentConfiguration.getInstance(applicationContext).publishableKey ) } // Call this method when the customer taps "Pay with Alipay" private fun startCheckout() { // ... val confirmParams = ConfirmPaymentIntentParams.createAlipay(paymentIntentClientSecret) stripe.confirmPayment(this, confirmParams) } override fun onActivityResult(requestCode: Int, resultCode: Int, data: Intent?) { super.onActivityResult(requestCode, resultCode, data) // Handle the result of stripe.confirmPayment stripe.onPaymentResult(requestCode, data, object : ApiResultCallback { override fun onSuccess(result: PaymentIntentResult) { val paymentIntent = result.intent val status = paymentIntent.status when (status) { StripeIntent.Status.Succeeded -> { // Payment succeeded } StripeIntent.Status.RequiresAction -> { // Customer didn't complete the payment // You can try to confirm this Payment Intent again } else -> { // Payment failed/canceled } } } override fun onError(e: Exception) { // Payment failed } }) } } ``` ## Optional: 支払い後のイベントを処理する 支払いが完了すると、Stripe は [payment_intent.succeeded](https://docs.stripe.com/api/events/types.md#event_types-payment_intent.succeeded) イベントを送信します。ダッシュボード、カスタム *Webhook* (A webhook is a real-time push notification sent to your application as a JSON payload through HTTPS requests)、またはパートナーソリューションを使用してこれらのイベントを受信し、また、顧客への注文確認メールの送信、データベースでの売上の記録、配送ワークフローの開始などのアクションを実行します。 クライアントからのコールバックを待つのではなく、これらのイベントをリッスンします。クライアント側では、コールバックが実行される前に顧客がブラウザーのウィンドウを閉じたり、アプリを終了したりする可能性があります。また、悪意を持つクライアントがレスポンスを不正操作する恐れもあります。非同期型のイベントをリッスンするよう構築済みのシステムを設定することで、これ以降はより多くの決済手段を簡単に受け付けられるようになります。[サポートされているすべての決済手段の違い](https://stripe.com/payments/payment-methods-guide)をご確認ください。 ### イベントを受信し、ビジネスアクションを実行する ビジネスアクションを受信して実行するためのいくつかのオプションがあります。 #### 手動 Stripe ダッシュボードは、すべての Stripe での支払いの確認、メール領収書の送信、入金処理、または失敗した支払いの再試行に使用できます。 - [ダッシュボードでテスト支払いを確認する](https://dashboard.stripe.com/test/payments) #### カスタムコード Webhook ハンドラを作成してイベントをリッスンし、非同期型のカスタムの支払いフローを作成します。Stripe CLI を使用して、ローカルで Webhook 組み込みのテストとデバッグを行います。 - [Build a custom webhook](https://docs.stripe.com/webhooks/handling-payment-events.md#build-your-own-webhook) #### 事前構築のアプリ [オートメーション](https://stripe.partners/?f_category=automation)や[マーケティングとセールス](https://stripe.partners/?f_category=marketing-and-sales)などの一般的なビジネスイベントを、パートナーアプリケーションとの連携によって処理します。 ## サポートされる通貨 お客様のアカウントには、以下のいずれかの通貨の銀行アカウントが必要です。お客様の国に対応する通貨で Alipay による決済を作成できます。Alipay のデフォルトの現地通貨は `cny` で、顧客にも購入金額が `cny` で表示されます。 | 通貨 | 国 | | ----- | ---------------------------------------------------------------------------------------------------------------------------------------------------- | | `cny` | 任意の国 | | `aud` | オーストラリア | | `cad` | カナダ | | `eur` | オーストリア、ベルギー、ブルガリア、キプロス、チェコ共和国、デンマーク、エストニア、フィンランド、フランス、ドイツ、ギリシャ、アイルランド、イタリア、ラトビア、リトアニア、ルクセンブルグ、マルタ、オランダ、ノルウェー、ポルトガル、ルーマニア、スロバキア、スロベニア、スペイン、スウェーデン、スイス | | `gbp` | イギリス | | `hkd` | 香港 | | `jpy` | 日本 | | `myr` | マレーシア | | `nzd` | ニュージーランド | | `sgd` | シンガポール | | `usd` | アメリカ | 別の通貨の銀行口座を所有していて、その通貨での Alipay 決済の作成をご希望の場合は、[サポートにお問い合わせください](https://support.stripe.com/email)。通貨の追加に関するサポートはケースバイケースで提供されます。 # React Native > This is a React Native for when payment-ui is mobile and platform is react-native. View the full page at https://docs.stripe.com/payments/alipay/accept-a-payment?payment-ui=mobile&platform=react-native. Alipay は [1 回限り](https://docs.stripe.com/payments/payment-methods.md#usage)の決済手段であり、顧客が支払いを[認証](https://docs.stripe.com/payments/payment-methods.md#customer-actions)する必要があります。顧客はウェブサイトまたはアプリからリダイレクトされ、Alipay で支払いを承認すると、ウェブサイトまたはアプリに戻されます。ここで、支払いが成功したか失敗したかに関する[即時通知](https://docs.stripe.com/payments/payment-methods.md#payment-notification)を受け取ります。 ## 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)キーを使用します。 ## PaymentIntent を作成する [サーバ側] [PaymentIntent (支払いインテント)](https://docs.stripe.com/api/payment_intents/object.md) は、顧客から支払いを回収する意図を表すオブジェクトであり、支払いプロセスのライフサイクルを追跡します。サーバーで `PaymentIntent` を作成し、回収する金額と[対応している通貨](https://docs.stripe.com/payments/alipay.md#supported-currencies)を指定します。すでに [Payment Intents](https://docs.stripe.com/payments/payment-intents.md) のシステムがある場合は、`alipay` を[決済手段タイプ](https://docs.stripe.com/api/payment_intents/create.md#create_payment_intent-payment_method_types)のリストに追加します。 ```curl curl https://api.stripe.com/v1/payment_intents \ -u "<>:" \ -d "payment_method_types[]=alipay" \ -d amount=1099 \ -d currency=hkd ``` ## Alipay ウォレットにリダイレクトする [クライアント側] Stripe React Native SDK は、銀行リダイレクトおよびデジタルウォレットの支払い方法の戻り URL ホストとして `safepay/` を指定します。顧客は、Alipay で支払いを完了すると、 `myapp://safepay/` にリダイレクトされます。ここで、`myapp` はカスタム URL スキームを表します。 顧客がアプリを終了すると (Safari やバンキングアプリで認証するなど)、自動的にアプリに戻るための方法を提供します。多くの決済手段タイプで、戻り先 URL の指定が「必須」です。戻り先 URL を有効にしていても、指定がされていないと、戻り先 URL が必要な決済手段をユーザーに提示できません。 戻り先 URL を指定するには、以下のようにします。 1. カスタム URL を[登録](https://developer.apple.com/documentation/xcode/defining-a-custom-url-scheme-for-your-app#Register-your-URL-scheme)します。ユニバーサルリンクはサポートされていません。 1. カスタム URL を[設定](https://reactnative.dev/docs/linking) します。 1. 以下のように、URL を Stripe SDK に転送するようにルートコンポーネントを設定します。 > Expo を使用している場合は、`app.json` ファイルで[スキームを設定](https://docs.expo.io/guides/linking/#in-a-standalone-app)します。 ```jsx import { useEffect, useCallback } from 'react'; import { Linking } from 'react-native'; import { useStripe } from '@stripe/stripe-react-native'; export default function MyApp() { const { handleURLCallback } = useStripe(); const handleDeepLink = useCallback( async (url: string | null) => { if (url) { const stripeHandled = await handleURLCallback(url); if (stripeHandled) { // This was a Stripe URL - you can return or add extra handling here as you see fit } else { // This was NOT a Stripe URL – handle as you normally would } } }, [handleURLCallback] ); useEffect(() => { const getUrlAsync = async () => { const initialUrl = await Linking.getInitialURL(); handleDeepLink(initialUrl); }; getUrlAsync(); const deepLinkListener = Linking.addEventListener( 'url', (event: { url: string }) => { handleDeepLink(event.url); } ); return () => deepLinkListener.remove(); }, [handleDeepLink]); return ( ); } ``` ネイティブ URL スキームの詳細については、[Android](https://developer.android.com/training/app-links/deep-linking) および [iOS](https://developer.apple.com/documentation/xcode/allowing_apps_and_websites_to_link_to_your_content/defining_a_custom_url_scheme_for_your_app) のドキュメントをご覧ください。 ## 支払いを確定する [クライアント側] 顧客が Alipay で支払うをタップしたら、`confirmPayment` を呼び出して、WebView を表示します。顧客はここで支払いを完了できます。 ```javascript export default function AlipayPaymentScreen() { const [email, setEmail] = useState(''); const { confirmPayment, loading } = useConfirmPayment(); const handlePayPress = async () => { const { clientSecret } = await fetchPaymentIntentClientSecret(); const { error, paymentIntent } = await confirmPayment(clientSecret, { paymentMethodType: 'Alipay', }); if (error) { Alert.alert(`Error code: ${error.code}`, error.message); } else if (paymentIntent) { Alert.alert( 'Success', `The payment was confirmed successfully! currency: ${paymentIntent.currency}` ); } }; return ( setEmail(value.nativeEvent.text)} /> ``` ```ruby get '/checkout' do @intent = # ... Fetch or create the PaymentIntent erb :checkout end ``` ## Alipay ウォレットにリダイレクトする [クライアント側] 顧客が Alipay での支払いをクリックしたときに、Stripe.js を使用してその支払いを Stripe に送信します。[Stripe.js](https://docs.stripe.com/payments/elements.md) は、決済フローを構築するための基本的な JavaScript ライブラリです。このライブラリにより、以下で説明するリダイレクトなどの複雑な処理が自動的に行われ、他の決済手段にも対応できるように実装を拡張できます。Stripe.js スクリプトを決済ページに含めるには、HTML ファイルの `head` にこのスクリプトを追加します。 ```html Checkout ``` 決済ページで以下の JavaScript を使用して、Stripe.js のインスタンスを作成します。 ```javascript // Set your publishable key. Remember to change this to your live publishable key in production! // See your keys here: https://dashboard.stripe.com/apikeys const stripe = Stripe('<>'); ``` `PaymentIntent` の [client secret](https://docs.stripe.com/api/payment_intents/object.md#payment_intent_object-client_secret) を使用し、`stripe.confirmAlipayPayment` を呼び出して Alipay リダイレクトを処理します。`return_url` を追加して、支払いが完了した後に Stripe が顧客をリダイレクトする場所を決定します。 ```javascript const form = document.getElementById('payment-form'); form.addEventListener('submit', async function(event) { event.preventDefault(); // Set the clientSecret of the PaymentIntent const { error } = await stripe.confirmAlipayPayment(clientSecret, { // Return URL where the customer should be redirected after the authorization return_url: `${window.location.href}`, }); if (error) { // Inform the customer that there was an error. const errorElement = document.getElementById('error-message'); errorElement.textContent = error.message; } }); ``` `return_url` は支払いの結果を表示するウェブサイト上のページに相当します。`PaymentIntent` の[ステータスを確認](https://docs.stripe.com/payments/payment-intents/verifying-status.md#checking-status)して、表示内容を決定できます。ステータスを確認するため、Stripe は以下の URL クエリパラメーターを含む `return_url` にリダイレクトします。`return_url` には自社のクエリパラメーターを追加することもできます。これらのパラメーターはリダイレクトプロセス全体にわたって存続します。 | パラメータ | 説明 | | ------------------------------ | ----------------------------------------------------------------------------------------------------------------------------------- | | `payment_intent` | `PaymentIntent` の一意の識別子。 | | `payment_intent_client_secret` | `PaymentIntent` オブジェクトの [client secret](https://docs.stripe.com/api/payment_intents/object.md#payment_intent_object-client_secret)。 | ## Optional: リダイレクトを手動で処理する [サーバ側] リダイレクトを処理する最善の方法は、`confirmAlipayPayment` で Stripe.js を使用することです。顧客を手動でリダイレクトする場合の方法を紹介します。 1. 顧客が支払いを完了した後にリダイレクトされる URL を指定します。 ```curl curl https://api.stripe.com/v1/payment_intents/pi_1DRuHnHgsMRlo4MtwuIAUe6u/confirm \ -u "<>:" \ -d payment_method=pm_1EnPf7AfTbPYpBIFLxIc8SD9 \ --data-urlencode "return_url=https://shop.example.com/crtA6B28E1" ``` 1. `PaymentIntent` のステータスが `requires_action` であることを確認します。`next_action` のタイプは `alipay_handle_redirect` になります。 ```json "next_action": { "type": "alipay_handle_redirect", "alipay_handle_redirect": { "url": "https://hooks.stripe.com/...", "return_url": "https://example.com/checkout/complete" } } ``` 1. `next_action` プロパティで指定された URL に顧客をリダイレクトします。 支払いプロセスを完了した顧客は、`return_url` の指定先に送られます。`payment_intent` と `payment_intent_client_secret` の URL クエリパラメーターが含まれ、上記のように独自のクエリパラメーターを渡すことができます。 ## Optional: 支払い後のイベントを処理する 支払いが完了すると、Stripe は [payment_intent.succeeded](https://docs.stripe.com/api/events/types.md#event_types-payment_intent.succeeded) イベントを送信します。ダッシュボード、カスタム *Webhook* (A webhook is a real-time push notification sent to your application as a JSON payload through HTTPS requests)、またはパートナーソリューションを使用してこれらのイベントを受信し、また、顧客への注文確認メールの送信、データベースでの売上の記録、配送ワークフローの開始などのアクションを実行します。 クライアントからのコールバックを待つのではなく、これらのイベントをリッスンします。クライアント側では、コールバックが実行される前に顧客がブラウザーのウィンドウを閉じたり、アプリを終了したりする可能性があります。また、悪意を持つクライアントがレスポンスを不正操作する恐れもあります。非同期型のイベントをリッスンするよう構築済みのシステムを設定することで、これ以降はより多くの決済手段を簡単に受け付けられるようになります。[サポートされているすべての決済手段の違い](https://stripe.com/payments/payment-methods-guide)をご確認ください。 ### イベントを受信し、ビジネスアクションを実行する ビジネスアクションを受信して実行するためのいくつかのオプションがあります。 #### 手動 Stripe ダッシュボードは、すべての Stripe での支払いの確認、メール領収書の送信、入金処理、または失敗した支払いの再試行に使用できます。 - [ダッシュボードでテスト支払いを確認する](https://dashboard.stripe.com/test/payments) #### カスタムコード Webhook ハンドラを作成してイベントをリッスンし、非同期型のカスタムの支払いフローを作成します。Stripe CLI を使用して、ローカルで Webhook 組み込みのテストとデバッグを行います。 - [Build a custom webhook](https://docs.stripe.com/webhooks/handling-payment-events.md#build-your-own-webhook) #### 事前構築のアプリ [オートメーション](https://stripe.partners/?f_category=automation)や[マーケティングとセールス](https://stripe.partners/?f_category=marketing-and-sales)などの一般的なビジネスイベントを、パートナーアプリケーションとの連携によって処理します。 ## サポートされる通貨 お客様のアカウントには、以下のいずれかの通貨の銀行アカウントが必要です。お客様の国に対応する通貨で Alipay による決済を作成できます。Alipay のデフォルトの現地通貨は `cny` で、顧客にも購入金額が `cny` で表示されます。 | 通貨 | 国 | | ----- | ---------------------------------------------------------------------------------------------------------------------------------------------------- | | `cny` | 任意の国 | | `aud` | オーストラリア | | `cad` | カナダ | | `eur` | オーストリア、ベルギー、ブルガリア、キプロス、チェコ共和国、デンマーク、エストニア、フィンランド、フランス、ドイツ、ギリシャ、アイルランド、イタリア、ラトビア、リトアニア、ルクセンブルグ、マルタ、オランダ、ノルウェー、ポルトガル、ルーマニア、スロバキア、スロベニア、スペイン、スウェーデン、スイス | | `gbp` | イギリス | | `hkd` | 香港 | | `jpy` | 日本 | | `myr` | マレーシア | | `nzd` | ニュージーランド | | `sgd` | シンガポール | | `usd` | アメリカ | 別の通貨の銀行口座を所有していて、その通貨での Alipay 決済の作成をご希望の場合は、[サポートにお問い合わせください](https://support.stripe.com/email)。通貨の追加に関するサポートはケースバイケースで提供されます。