# MobilePay での支払い デンマークとフィンランドで一般的な支払い方法として使われている MobilePay を受け付ける方法をご紹介します。 # Checkout > This is a Checkout for when payment-ui is checkout. View the full page at https://docs.stripe.com/payments/mobilepay/accept-a-payment?payment-ui=checkout. MobilePay は、デンマークとフィンランドで使われている [1 回限りの使用](https://docs.stripe.com/payments/payment-methods.md#usage)のカードウォレット決済手段です。顧客は MobilePay アプリを使用して、支払いを[認証して承認](https://docs.stripe.com/payments/payment-methods.md#customer-actions)できます。 顧客が MobilePay で支払う場合、Stripe は MobilePay から受け取ったカードデータを使用してカード取引を実行します。カード取引の処理は実装には表示されず、Stripe は支払いの成功または失敗を[直ちに通知](https://docs.stripe.com/payments/payment-methods.md#payment-notification)します。 > 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)を使用するチェックアウトの統合機能を構築します。 - 動的な決済手段を使用しない場合は、チェックアウトの導入で、決済方法を手動で設定するために以下のステップに従ってください。 このガイドでは Stripe がホストする決済フォーム、[Checkout](https://docs.stripe.com/payments/checkout.md) で MobilePay を有効にする方法をご案内しています。また動的な決済方法を使用した支払いの受け付けと手動で設定する決済方法との違いをご確認ください。 ## 互換性を判断する **サポート対象のビジネスの所在地**: EEA **対応可能な通貨**: `eur, dkk, sek, nok` **取引通貨**: `eur, dkk, sek, nok` **支払いモード**: Yes **セットアップモード**: No **サブスクリプションモード**: No MobilePay の支払いに対応するには、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)を、ユーロ、デンマーククローネ、スウェーデンクローナ、ノルウェークローネ (通貨コード `eur`、`dkk`、`sek`、`nok`) で示す必要があります。 ## Stripe を設定する [サーバー側] まず、Stripe アカウントが必要です。[今すぐ登録してください](https://dashboard.stripe.com/register)。 アプリケーションから 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' ``` ## 決済を受け付ける > このガイドは、Checkout の基本的な[支払いの受け付け](https://docs.stripe.com/payments/accept-a-payment.md?integration=checkout)の導入が存在することを前提として作成されています。 ### 支払い方法として MobilePay を有効にする 新しい [Checkout セッション](https://docs.stripe.com/api/checkout/sessions.md)を作成する際は、以下を行う必要があります。 1. `mobilepay` を `payment_method_types` の一覧に追加します。 1. すべての `line_items` が `eur`、`dkk`、`sek`、`nok` のいずれかを通貨として使用していることを確認してください。 #### Stripe ホスト型ページ ```curl curl https://api.stripe.com/v1/checkout/sessions \ -u "<>:" \ -d "line_items[0][price_data][currency]=dkk" \ -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]=mobilepay" \ --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]=dkk" \ -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]=mobilepay" \ --data-urlencode "return_url=https://example.com/return" \ -d ui_mode=embedded_page ``` ### 注文のフルフィルメント 決済受け付け後に、[注文のフルフィルメントを実行](https://docs.stripe.com/checkout/fulfillment.md)する方法を説明します。 ## 支払い後のイベントを処理する 支払いが完了すると、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)をご確認ください。 - **ダッシュボードでイベントを手動で処理する** ダッシュボードを使用して、テスト決済を[ダッシュボードで表示](https://dashboard.stripe.com/test/payments)したり、メール領収書を送信したり、入金を処理したり、失敗した決済を再試行したりできます。 - **Custom Webhook を構築する** [Build a custom webhook](https://docs.stripe.com/webhooks/handling-payment-events.md#build-your-own-webhook) handler to listen for events and build custom asynchronous payment flows. Test and debug your webhook integration locally with the Stripe CLI. - **構築済みアプリを導入する** パートナーアプリケーションを統合することで、[自動化](https://stripe.partners/?f_category=automation)や[マーケティング/セールス](https://stripe.partners/?f_category=marketing-and-sales)などの一般的なビジネスイベントを処理します。 ## 組み込みをテストする #### モバイル版ウェブアプリのテスト 実装内容をテストするには、決済手段として MobilePay を選択して、**支払う**をタップします。テスト環境では、テスト決済ページにリダイレクトされ、そこで支払いを承認または拒否できます。 本番環境で **支払う** をタップすると、MobilePay モバイルアプリにリダイレクトされます。ここで支払いを承認または拒否できます。 #### デスクトップ版ウェブアプリのテスト テスト環境で実装内容をテストする場合、テスト決済ページにリダイレクトされ、ここでテスト決済を承認または拒否できます。 本番環境で、MobilePay に関連付けられている電話番号を入力して、MobilePay モバイルアプリにプッシュ通知を送信します。MobilePay モバイルアプリで支払いを承認または拒否できます。 ## Optional: 支払いをオーソリし、後でキャプチャーする MobilePay は[オーソリとキャプチャの分離](https://docs.stripe.com/payments/place-a-hold-on-a-payment-method.md)に対応しています。 ### オーソリのみを行うよう Stripe に指示する オーソリとキャプチャを分離することを指定するには、Checkout セッションの作成時に、[capture_method](https://docs.stripe.com/api/checkout/sessions/create.md#create_checkout_session-payment_intent_data-capture_method) を `manual` に設定します。このパラメーターは、MobilePay に関連付けられている顧客のカードの金額のみをオーソリするよう Stripe に指示します。 ```curl curl https://api.stripe.com/v1/checkout/sessions \ -u "<>:" \ -d mode=payment \ -d "payment_method_types[0]=card" \ -d "payment_method_types[1]=mobilepay" \ -d "line_items[0][price_data][currency]=dkk" \ -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 "payment_intent_data[capture_method]=manual" \ --data-urlencode "success_url=https://example.com/success.html" ``` オーソリが成功すると、Stripe は [payment_intent.amount_capturable_updated](https://docs.stripe.com/api/events/types.md#event_types-payment_intent.amount_capturable_updated) イベントを送信します。詳細については、[イベント](https://docs.stripe.com/api/events.md)をご覧ください。 ### 売上をキャプチャーする オーソリが成功すると、PaymentIntent の[ステータス](https://docs.stripe.com/api/payment_intents/object.md#payment_intent_object-status)が `requires_capture` に移行し、オーソリされた売上を[キャプチャー](https://docs.stripe.com/api/payment_intents/capture.md)できるようになります。Stripe は全額の手動キャプチャーにのみ対応しています。 ```curl curl https://api.stripe.com/v1/payment_intents/{{PAYMENTINTENT_ID}}/capture \ -u "<>:" \ -d amount_to_capture=2000 ``` ## Optional: キャンセル MobilePay 決済に関連付けられた[PaymentIntent をキャンセル](https://docs.stripe.com/api/payment_intents/cancel.md)することにより、MobilePay 決済を期限切れ前にキャンセルできます。 ## 失敗した支払い 基になったカード取引が拒否されると、MobilePay 取引が失敗することがあります。詳しくは、[カードの支払い拒否](https://docs.stripe.com/declines/card.md)をご覧ください。この場合、PaymentMethod は解除され、PaymentIntent のステータスは自動的に `requires_payment_method` に移行します。 PaymentIntent のステータスが `requires_action` の場合、顧客は 5 分以内に支払いを認証する必要があります。5 分経過してもアクションが実行されない場合、PaymentMethod は解除され、PaymentIntent のステータスは自動的に `requires_payment_method` に移行します。 ## 返金と不審請求の申請 Stripe は、MobilePay 取引の一環として標準のカードネットワークを使用してカード取引を実行します。[返金](https://docs.stripe.com/refunds.md) と[不審請求の申し立て](https://docs.stripe.com/disputes/how-disputes-work.md)には、Visa と Mastercard のネットワークのルールが適用されます。 ## See also - [MobilePay の詳細](https://docs.stripe.com/payments/mobilepay.md) - [Checkout のフルフィルメント](https://docs.stripe.com/checkout/fulfillment.md) - [Checkout をカスタマイズする](https://docs.stripe.com/payments/checkout/customization.md) # Elements > This is a Elements for when payment-ui is elements. View the full page at https://docs.stripe.com/payments/mobilepay/accept-a-payment?payment-ui=elements. MobilePay は、デンマークとフィンランドで使われている [1 回限りの使用](https://docs.stripe.com/payments/payment-methods.md#usage)のカードウォレット決済手段です。顧客は MobilePay アプリを使用して、支払いを[認証して承認](https://docs.stripe.com/payments/payment-methods.md#customer-actions)できます。 顧客が MobilePay で支払う場合、Stripe は MobilePay から受け取ったカードデータを使用してカード取引を実行します。カード取引の処理は実装には表示されず、Stripe は支払いの成功または失敗を[直ちに通知](https://docs.stripe.com/payments/payment-methods.md#payment-notification)します。 このガイドでは、[Payment Element](https://docs.stripe.com/payments/payment-element.md) を使用して、ウェブサイトまたはアプリケーションにカスタムの Stripe 決済フォームを埋め込む方法をご紹介します。Payment Element を使用すると、MobilePay とその他の決済手段に自動的に対応できます。高度な設定とカスタマイズについては、[決済の受け付け](https://docs.stripe.com/payments/accept-a-payment.md)に関する導入ガイドをご覧ください。 ## Stripe を設定する [サーバー側] まず、Stripe アカウントが必要です。[今すぐ登録してください](https://dashboard.stripe.com/register)。 アプリケーションから 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' ``` ## PaymentIntent を作成する [サーバー側] Stripe は [PaymentIntent (支払いインテント)](https://docs.stripe.com/api/payment_intents.md) オブジェクトを使用して、顧客から支払いを回収する意図を示し、プロセス全体を通して請求の実施と支払い状態の変化を追跡します。 #### ダッシュボードからの支払い方法を管理する 価格と通貨を指定して、サーバーで PaymentIntent を作成します。支払い方法は[ダッシュボード](https://dashboard.stripe.com/settings/payment_methods)から管理できます。Stripe は、取引金額、通貨、支払いフローなどの要因に基づいて、対象となる支払い方法の返品を処理します。 Payment Intent を作成する前に、[支払い方法の設定](https://dashboard.stripe.com/settings/payment_methods)ページで **MobilePay** を有効にしてください。 クライアント側ではなく、信頼できる環境のサーバー側で常に支払い金額を指定してください。これにより、悪意のある顧客が独自の金額を選択できないようにします。 ```curl curl https://api.stripe.com/v1/payment_intents \ -u "<>:" \ -d amount=1099 \ -d currency=usd \ -d "automatic_payment_methods[enabled]=true" ``` #### 支払い方法を手動で一覧表示する ダッシュボードを使用しない場合や、支払い方法を手動で指定しない場合は、`payment_method_types` 属性を使用して支払い方法を一覧表示できます。 金額、通貨、支払い方法のリストを使用して、サーバーで PaymentIntent を作成します。支払い額は常に、クライアント側ではなく、信頼性の高い環境であるサーバー側で決定してください。これにより、悪意のある顧客が独自の価格を選択できなくなります。 ```curl curl https://api.stripe.com/v1/payment_intents \ -u "<>:" \ -d amount=1000 \ -d currency=eur \ -d "payment_method_types[]=mobilepay" ``` ### client secret を取得する PaymentIntent には、*client secret* (The client secret is a unique key returned from Stripe as part of a PaymentIntent. This key lets the client access important fields from the PaymentIntent (status, amount, currency) while hiding sensitive ones (metadata, customer)) が含まれています。これは、支払いプロセスを安全に完了するためにクライアント側で使用されます。client secret をクライアント側に渡す際は、いくつかの方法を使用できます。 #### 1 ページのアプリケーション ブラウザーの `fetch` 関数を使用して、サーバーのエンドポイントから client secret を取得します。この方法は、クライアント側が 1 ページのアプリケーションで、特に React などの最新のフロントエンドフレームワークで構築されている場合に最適です。client secret を処理するサーバーのエンドポイントを作成します。 #### Ruby ```ruby get '/secret' do intent = # ... Create or retrieve the PaymentIntent {client_secret: intent.client_secret}.to_json end ``` その後、クライアント側で JavaScript を使用して client secret を取得します。 ```javascript (async () => { const response = await fetch('/secret'); const {client_secret: clientSecret} = await response.json(); // Render the form using the clientSecret })(); ``` #### サーバ側のレンダリング サーバーからクライアントに client secret を渡します。この方法は、アプリケーションがブラウザーへの送信前に静的なコンテンツをサーバーで生成する場合に最適です。 決済フォームに [client_secret](https://docs.stripe.com/api/payment_intents/object.md#payment_intent_object-client_secret) を追加します。サーバー側のコードで、PaymentIntent から client secret を取得します。 #### Ruby ```erb
``` ```ruby get '/checkout' do @intent = # ... Fetch or create the PaymentIntent erb :checkout end ``` ## 支払いの詳細を収集する [クライアント側] [Payment Element](https://docs.stripe.com/payments/payment-element.md) を使用してクライアント側で支払い詳細を収集します。Payment Element は事前構築された UI コンポーネントであり、さまざまな決済手段の詳細の収集をシンプルにします。 Payment Element には、HTTPS 接続を介して支払い情報を Stripe に安全に送信する iframe が含まれています。一部の支払い方法では、支払いを確定するために別のページにリダイレクトする必要があるため、Payment Element を別の iframe 内に配置しないでください。 iframe を使用して Apple Pay または Google Pay を受け付けたい場合は、iframe の [allow](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/iframe#attr-allowpaymentrequest) 属性を `"payment *"` と等しく設定する必要があります。 構築済みのシステムを機能させるには、決済ページのアドレスの先頭を `http://` ではなく `https://` にする必要があります。HTTPS を使用しなくてもシステムをテストできますが、本番環境で決済を受け付ける準備が整ったら、必ず、HTTPS を[有効](https://docs.stripe.com/security/guide.md#tls)にしてください。 #### HTML + JS ### Stripe.js を設定する Payment Element は Stripe.js の機能として自動的に使用できるようになります。決済ページに Stripe.js スクリプトを含めるには、HTML ファイルの `head` にスクリプトを追加します。常に js.stripe.com から Stripe.js を直接読み込むことにより、PCI 準拠が維持されます。スクリプトをバンドルに含めたり、そのコピーを自身でホストしたりしないでください。 ```html Checkout ``` 決済ページで以下の JavaScript を使用して、Stripe のインスタンスを作成します。 ```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('<>'); ``` ### Payment Element を支払いページに追加する Payment Element を決済ページに配置する場所が必要です。決済フォームで、一意の ID を持つ空の DOM ノード (コンテナー) を作成します。 ```html
``` 前のフォームが読み込まれたら、Payment Element のインスタンスを作成して、それをコンテナーの DOM ノードにマウントします。[Elements](https://docs.stripe.com/js/elements_object/create) インスタンスを作成する際に、前のステップからの [client secret](https://docs.stripe.com/api/payment_intents/object.md#payment_intent_object-client_secret) を `options` に渡します。 client secret は支払いを完了できるため、慎重に取り扱う必要があります。記録したり、URL に埋め込んだり、当該の顧客以外に漏洩することがないようにしてください。 ```javascript const options = { clientSecret: '{{CLIENT_SECRET}}', // Fully customizable with appearance API. appearance: {/*...*/}, }; // Set up Stripe.js and Elements to use in checkout form, passing the client secret obtained in a previous stepconst elements = stripe.elements(options); // Optional: Autofill user's saved payment methods. If the customer's // email is known when the page is loaded, you can pass the email // to the linkAuthenticationElement on mount: // // linkAuthenticationElement.mount("#link-authentication-element", { // defaultValues: { // email: 'jenny.rosen@example.com', // } // }) // Create and mount the Payment Element const paymentElementOptions = { layout: 'accordion'}; const paymentElement = elements.create('payment', paymentElementOptions); paymentElement.mount('#payment-element'); ``` #### React ### Stripe.js を設定する 次の npm パブリックレジストリーから [React Stripe.js](https://www.npmjs.com/package/@stripe/react-stripe-js) と [Stripe.js ローダー](https://www.npmjs.com/package/@stripe/stripe-js)をインストールします。 ```bash npm install --save @stripe/react-stripe-js @stripe/stripe-js ``` ### Elements プロバイダーを支払いページに追加して設定する Payment Element コンポーネントを使用するには、決済ページコンポーネントを [Elements プロバイダー](https://docs.stripe.com/sdks/stripejs-react.md#elements-provider)でラップします。公開キーを使用して `loadStripe` を呼び出し、返された `Promise` を `Elements` プロバイダーに渡します。加えて、前のステップの [client secret](https://docs.stripe.com/api/payment_intents/object.md#payment_intent_object-client_secret) を `options` にして `Elements` プロバイダーに渡します。 ```jsx import React from 'react'; import ReactDOM from 'react-dom'; import {Elements} from '@stripe/react-stripe-js'; import {loadStripe} from '@stripe/stripe-js'; import CheckoutForm from './CheckoutForm'; // Make sure to call `loadStripe` outside of a component’s render to avoid // recreating the `Stripe` object on every render. const stripePromise = loadStripe('<>'); function App() { const options = { // passing the client secret obtained in step 3 clientSecret: '{{CLIENT_SECRET}}', // Fully customizable with appearance API. appearance: {/*...*/}, }; return ( ); }; ReactDOM.render(, document.getElementById('root')); ``` ### Payment Element コンポーネントを追加する `PaymentElement` コンポーネントを使用して、フォームを構築します。 ```jsx import React from 'react'; import {PaymentElement} from '@stripe/react-stripe-js'; const CheckoutForm = () => { return (
// Optional: Autofill user's saved payment methods. If the customer's // email is known when the page is loaded, you can pass the email // to the linkAuthenticationElement // // ); }; export default CheckoutForm; ``` ## Stripe に支払いを送信する [クライアント側] Payment Element からの詳細を指定して [stripe.confirmPayment](https://docs.stripe.com/js/payment_intents/confirm_payment) を使用し、支払いを完了します。ユーザーが支払いを完了した後に Stripe がユーザーをリダイレクトする場所を指定するには、この関数に [return_url](https://docs.stripe.com/api/payment_intents/create.md#create_payment_intent-return_url) を指定します。ユーザーはまず、銀行のオーソリページなどの中間サイトにリダイレクトされ、その後 `return_url` にリダイレクトされます。カード支払いでは、支払いが正常に完了するとすぐに `return_url` にリダイレクトします。 #### HTML + JS ```javascript const form = document.getElementById('payment-form'); form.addEventListener('submit', async (event) => { event.preventDefault(); const {error} = await stripe.confirmPayment({ //`Elements` instance that was used to create the Payment Element elements, confirmParams: { return_url: 'https://example.com/order/123/complete', }, }); if (error) { // This point will only be reached if there is an immediate error when // confirming the payment. Show error to your customer (for example, payment // details incomplete) const messageContainer = document.querySelector('#error-message'); messageContainer.textContent = error.message; } else { // Your customer will be redirected to your `return_url`. For some payment // methods like iDEAL, your customer will be redirected to an intermediate // site first to authorize the payment, then redirected to the `return_url`. } }); ``` #### React 支払いフォームコンポーネントから [stripe.confirmPayment](https://docs.stripe.com/js/payment_intents/confirm_payment) を呼び出すには、[useStripe](https://docs.stripe.com/sdks/stripejs-react.md#usestripe-hook) フックと [useElements](https://docs.stripe.com/sdks/stripejs-react.md#useelements-hook) フックを使用します。 フックではなく従来のクラスコンポーネントを使用する場合は、代わりに [ElementsConsumer](https://docs.stripe.com/sdks/stripejs-react.md#elements-consumer) を使用します。 ```jsx import React, {useState} from 'react'; import {useStripe, useElements, PaymentElement} from '@stripe/react-stripe-js'; const CheckoutForm = () => { const stripe = useStripe(); const elements = useElements(); const [errorMessage, setErrorMessage] = useState(null); const handleSubmit = async (event) => { // We don't want to let default form submission happen here, // which would refresh the page. event.preventDefault(); if (!stripe || !elements) { // Stripe.js hasn't yet loaded. // Make sure to disable form submission until Stripe.js has loaded. return; } const {error} = await stripe.confirmPayment({ //`Elements` instance that was used to create the Payment Element elements, confirmParams: { return_url: 'https://example.com/order/123/complete', }, }); if (error) { // This point will only be reached if there is an immediate error when // confirming the payment. Show error to your customer (for example, payment // details incomplete) setErrorMessage(error.message); } else { // Your customer will be redirected to your `return_url`. For some payment // methods like iDEAL, your customer will be redirected to an intermediate // site first to authorize the payment, then redirected to the `return_url`. } }; return (
{/* Show error message to your customers */} {errorMessage &&
{errorMessage}
} ); }; export default CheckoutForm; ``` `return_url` が、Web サイト上の支払いステータスを表示するページと対応していることを確認します。Stripe が顧客を `return_url` にリダイレクトするときは、以下の 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)。 | > 顧客のブラウザーセッションを追跡するツールを利用している場合、リファラー除外リストに `stripe.com` ドメインの追加が必要になる場合があります。リダイレクトを行うと、一部のツールでは新しいセッションが作成され、セッション全体の追跡ができなくなります。 クエリパラメーターのいずれか 1 つを使用して PaymentIntent を取得します。[PaymentIntent のステータス](https://docs.stripe.com/payments/paymentintents/lifecycle.md)を調べて、顧客に表示する内容を決定します。また、`return_url` を指定するときにカスタムのクエリパラメーターを追加することもできます。このパラメーターはリダイレクトプロセスの間維持されます。 #### HTML + JS ```javascript // Initialize Stripe.js using your publishable key const stripe = Stripe('<>'); // Retrieve the "payment_intent_client_secret" query parameter appended to // your return_url by Stripe.js const clientSecret = new URLSearchParams(window.location.search).get( 'payment_intent_client_secret' ); // Retrieve the PaymentIntent stripe.retrievePaymentIntent(clientSecret).then(({paymentIntent}) => { const message = document.querySelector('#message') // Inspect the PaymentIntent `status` to indicate the status of the payment // to your customer. // // Some payment methods will [immediately succeed or fail][0] upon // confirmation, while others will first enter a `processing` state. // // [0]: https://stripe.com/docs/payments/payment-methods#payment-notification switch (paymentIntent.status) { case 'succeeded': message.innerText = 'Success! Payment received.'; break; case 'processing': message.innerText = "Payment processing. We'll update you when payment is received."; break; case 'requires_payment_method': message.innerText = 'Payment failed. Please try another payment method.'; // Redirect your user back to your payment page to attempt collecting // payment again break; default: message.innerText = 'Something went wrong.'; break; } }); ``` #### React ```jsx import React, {useState, useEffect} from 'react'; import {useStripe} from '@stripe/react-stripe-js'; const PaymentStatus = () => { const stripe = useStripe(); const [message, setMessage] = useState(null); useEffect(() => { if (!stripe) { return; } // Retrieve the "payment_intent_client_secret" query parameter appended to // your return_url by Stripe.js const clientSecret = new URLSearchParams(window.location.search).get( 'payment_intent_client_secret' ); // Retrieve the PaymentIntent stripe .retrievePaymentIntent(clientSecret) .then(({paymentIntent}) => { // Inspect the PaymentIntent `status` to indicate the status of the payment // to your customer. // // Some payment methods will [immediately succeed or fail][0] upon // confirmation, while others will first enter a `processing` state. // // [0]: https://stripe.com/docs/payments/payment-methods#payment-notification switch (paymentIntent.status) { case 'succeeded': setMessage('Success! Payment received.'); break; case 'processing': setMessage("Payment processing. We'll update you when payment is received."); break; case 'requires_payment_method': // Redirect your user back to your payment page to attempt collecting // payment again setMessage('Payment failed. Please try another payment method.'); break; default: setMessage('Something went wrong.'); break; } }); }, [stripe]); return message; }; export default PaymentStatus; ``` ## リダイレクトして取引を認証する 顧客はモバイルアプリまたはデスクトップアプリで MobilePay 取引を認証できます。顧客が使用するクライアントによって、`confirmPayment` が呼び出された後に認証方法が決定されます。 #### モバイルアプリ認証 `confirmPayment` が呼び出されると、 Stripe は顧客を MobilePay にリダイレクトし、支払いを承認または拒否します。顧客が支払いを承認すると、ページは Payment Intent の `return_url` に顧客をリダイレクトします。 Stripe は、(`return_url` の既存のクエリパラメーターとともに) `payment_intent`、`payment_intent_client_secret`、`redirect_pm_type`、`redirect_status` を URL クエリパラメーターとして追加します。 認証セッションは 5 分後に期限切れになり、PaymentIntent のステータスは `require_payment_method` に戻ります。ステータスの移行後、顧客には支払いエラーが表示され、支払いプロセスをもう一度開始する必要があります。 #### デスクトップ版ウェブアプリの認証 `confirmPayment` が呼び出されると、Stripe は顧客を MobilePay がホストするページにリダイレクトします。顧客はここで MobilePay アカウントに関連付けられた電話番号を入力できます。これにより、支払い認証のための MobilePay アプリにプッシュ通知が送信されます。顧客が支払いの認証に成功すると、ページは顧客を `return_url` にリダイレクトします。支払い後に顧客をウェブでリダイレクトしない場合、`redirect: if_required` を Payment Element に渡します。 認証セッションは 5 分後に期限切れになり、PaymentIntent のステータスは `require_payment_method` に戻ります。ステータスの移行後、顧客には支払いエラーが表示され、支払いプロセスをもう一度開始する必要があります。 ## 支払い後のイベントを処理する 支払いが完了すると、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)をご確認ください。 - **ダッシュボードでイベントを手動で処理する** ダッシュボードを使用して、テスト決済を[ダッシュボードで表示](https://dashboard.stripe.com/test/payments)したり、メール領収書を送信したり、入金を処理したり、失敗した決済を再試行したりできます。 - **Custom Webhook を構築する** [Build a custom webhook](https://docs.stripe.com/webhooks/handling-payment-events.md#build-your-own-webhook) handler to listen for events and build custom asynchronous payment flows. Test and debug your webhook integration locally with the Stripe CLI. - **構築済みアプリを導入する** パートナーアプリケーションを統合することで、[自動化](https://stripe.partners/?f_category=automation)や[マーケティング/セールス](https://stripe.partners/?f_category=marketing-and-sales)などの一般的なビジネスイベントを処理します。 ## 組み込みをテストする #### モバイル版ウェブアプリのテスト 実装内容をテストするには、決済手段として MobilePay を選択して、**支払う**をタップします。テスト環境では、テスト決済ページにリダイレクトされ、そこで支払いを承認または拒否できます。 本番環境で **支払う** をタップすると、MobilePay モバイルアプリにリダイレクトされます。ここで支払いを承認または拒否できます。 #### デスクトップ版ウェブアプリのテスト テスト環境で実装内容をテストする場合、テスト決済ページにリダイレクトされ、ここでテスト決済を承認または拒否できます。 本番環境で、MobilePay に関連付けられている電話番号を入力して、MobilePay モバイルアプリにプッシュ通知を送信します。MobilePay モバイルアプリで支払いを承認または拒否できます。 ## Optional: 支払いをオーソリし、後でキャプチャーする MobilePay は[オーソリとキャプチャの分離](https://docs.stripe.com/payments/place-a-hold-on-a-payment-method.md)に対応しています。 ### オーソリのみを行うよう Stripe に指示する オーソリとキャプチャーを分離することを指定するには、PaymentIntent の作成時に、[capture_method](https://docs.stripe.com/api/payment_intents/create.md#create_payment_intent-capture_method) を `manual` に設定します。このパラメーターは、MobilePay に関連付けられている顧客のカードの金額のみをオーソリするよう Stripe に指示します。 ```curl curl https://api.stripe.com/v1/payment_intents \ -u "<>:" \ -d amount=1099 \ -d currency=dkk \ -d capture_method=manual \ -d "payment_method_types[]=mobilepay" \ -d "payment_method_data[type]=mobilepay" ``` オーソリが成功すると、Stripe は [payment_intent.amount_capturable_updated](https://docs.stripe.com/api/events/types.md#event_types-payment_intent.amount_capturable_updated) イベントを送信します。詳細については、[イベント](https://docs.stripe.com/api/events.md)をご覧ください。 ### 売上をキャプチャーする オーソリが成功すると、PaymentIntent の[ステータス](https://docs.stripe.com/api/payment_intents/object.md#payment_intent_object-status)が `requires_capture` に移行し、オーソリされた売上を[キャプチャー](https://docs.stripe.com/api/payment_intents/capture.md)できるようになります。Stripe は全額の手動キャプチャーにのみ対応しています。 ```curl curl https://api.stripe.com/v1/payment_intents/{{PAYMENTINTENT_ID}}/capture \ -u "<>:" \ -d amount_to_capture=1099 ``` ## Optional: キャンセル MobilePay 決済に関連付けられた[PaymentIntent をキャンセル](https://docs.stripe.com/api/payment_intents/cancel.md)することにより、MobilePay 決済を期限切れ前にキャンセルできます。 ## 失敗した支払い 基になったカード取引が拒否されると、MobilePay 取引が失敗することがあります。詳しくは、[カードの支払い拒否](https://docs.stripe.com/declines/card.md)をご覧ください。この場合、PaymentMethod は解除され、PaymentIntent のステータスは自動的に `requires_payment_method` に移行します。 PaymentIntent のステータスが `requires_action` の場合、顧客は 5 分以内に支払いを認証する必要があります。5 分経過してもアクションが実行されない場合、PaymentMethod は解除され、PaymentIntent のステータスは自動的に `requires_payment_method` に移行します。 ## 返金と不審請求の申請 Stripe は、MobilePay 取引の一環として標準のカードネットワークを使用してカード取引を実行します。[返金](https://docs.stripe.com/refunds.md) と[不審請求の申し立て](https://docs.stripe.com/disputes/how-disputes-work.md)には、Visa と Mastercard のネットワークのルールが適用されます。 # ダイレクト API > This is a ダイレクト API for when payment-ui is direct-api. View the full page at https://docs.stripe.com/payments/mobilepay/accept-a-payment?payment-ui=direct-api. MobilePay は、デンマークとフィンランドで使われている [1 回限りの使用](https://docs.stripe.com/payments/payment-methods.md#usage)のカードウォレット決済手段です。顧客は MobilePay アプリを使用して、支払いを[認証して承認](https://docs.stripe.com/payments/payment-methods.md#customer-actions)できます。 顧客が MobilePay で支払う場合、Stripe は MobilePay から受け取ったカードデータを使用してカード取引を実行します。カード取引の処理は実装には表示されず、Stripe は支払いの成功または失敗を[直ちに通知](https://docs.stripe.com/payments/payment-methods.md#payment-notification)します。 ## Stripe を設定する [サーバー側] まず、Stripe アカウントが必要です。[今すぐ登録してください](https://dashboard.stripe.com/register)。 アプリケーションから 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' ``` ## PaymentIntent を作成する [サーバー側] [PaymentIntent](https://docs.stripe.com/api/payment_intents/object.md) は、顧客から支払いを回収する意図を表すオブジェクトであり、支払いプロセスのライフサイクルをステージごとに追跡します。サーバーで `PaymentIntent` を作成し、回収する金額とサポートされている通貨 (`eur`、`dkk`、`sek`、`nok`) を指定します。[Payment Intents API](https://docs.stripe.com/payments/payment-intents.md) を使用した組み込みをすでにお持ちの場合には、`mobilepay` を[決済手段タイプ](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 amount=1099 \ -d currency=dkk \ -d "payment_method_types[]=mobilepay" \ -d "payment_method_data[type]=mobilepay" ``` ### レスポンスの例 ```json { "id": "pi_12345", "amount": 1099, "client_secret": "pi_12345_secret_abcdef", "currency": "dkk", "payment_method": "pm_12345", "payment_method_types": [ "mobilepay" ], "status": "requires_confirmation" } ``` ### client secret を取得する PaymentIntent には、*client secret* (The client secret is a unique key returned from Stripe as part of a PaymentIntent. This key lets the client access important fields from the PaymentIntent (status, amount, currency) while hiding sensitive ones (metadata, customer)) が含まれています。これは、支払いプロセスを安全に完了するためにクライアント側で使用されます。client secret をクライアント側に渡す際は、いくつかの方法を使用できます。 #### 1 ページのアプリケーション ブラウザーの `fetch` 関数を使用して、サーバーのエンドポイントから client secret を取得します。この方法は、クライアント側が 1 ページのアプリケーションで、特に React などの最新のフロントエンドフレームワークで構築されている場合に最適です。client secret を処理するサーバーのエンドポイントを作成します。 #### Ruby ```ruby get '/secret' do intent = # ... Create or retrieve the PaymentIntent {client_secret: intent.client_secret}.to_json end ``` その後、クライアント側で JavaScript を使用して client secret を取得します。 ```javascript (async () => { const response = await fetch('/secret'); const {client_secret: clientSecret} = await response.json(); // Render the form using the clientSecret })(); ``` #### サーバ側のレンダリング サーバーからクライアントに client secret を渡します。この方法は、アプリケーションがブラウザーへの送信前に静的なコンテンツをサーバーで生成する場合に最適です。 決済フォームに [client_secret](https://docs.stripe.com/api/payment_intents/object.md#payment_intent_object-client_secret) を追加します。サーバー側のコードで、PaymentIntent から client secret を取得します。 #### Ruby ```erb
``` ```ruby get '/checkout' do @intent = # ... Fetch or create the PaymentIntent erb :checkout end ``` ## PaymentIntentを確定する [ステップ 2](https://docs.stripe.com/payments/mobilepay/accept-a-payment.md#create-payment-intent) の PaymentIntent [ID](https://docs.stripe.com/api/payment_intents/object.md#payment_intent_object-id) を使用して、PaymentIntent を*確定* (Confirming an intent indicates that the customer intends to use the current or provided payment method. Upon confirmation, the intent attempts to initiate the portions of the flow that have real-world side effects)します。これは、指定された *PaymentMethod* (PaymentMethods represent your customer's payment instruments, used with the Payment Intents or Setup Intents APIs) を使用して支払うことを宣言するものです。Stripe は PaymentIntent が確定されると、支払いを開始します。[return_url](https://docs.stripe.com/api/payment_intents/create.md#create_payment_intent-return_url) は、支払い完了後に顧客をリダイレクトする場所を指定します。 ```curl curl https://api.stripe.com/v1/payment_intents/{{PAYMENTINTENT_ID}}/confirm \ -u "<>:" \ --data-urlencode "return_url=https://example.com/checkout/complete" ``` ### レスポンスの例 ```json { "id": "pi_12345", "amount": 1099, "currency": "dkk", "payment_method": "pm_12345", "next_action": { "redirect_to_url": { "return_url": "https://example.com/checkout/complete", "url": "https://pm-redirects.stripe.com/authorize/acct_123/pa_nonce_abc" }, "type": "redirect_to_url" }, "payment_method_types": [ "mobilepay" ], "status": "requires_action" } ``` 支払いを承認するには、[next_action[redirect_to_url][url]](https://docs.stripe.com/api/payment_intents/object.md#payment_intent_object-next_action-redirect_to_url-url) フィールドの URL に顧客をリダイレクトします。 - デスクトップでは、URL によって MobilePay スタートページが開き、顧客はそこで、MobilePay アカウントを識別する電話番号を入力します。その後、顧客は MobilePay スマートフォンアプリを使用して支払いの認証を進めることができます。 - モバイルデバイスでは、デスクトップでのプロセスと同様に、この URL によって、MobilePay アプリケーションが直接開くか (存在する場合)、MobilePay スタートページに移動します。 顧客は 5 分以内にリダイレクト URL を開き、MobilePay アプリで支払いを承認できます。基のカードによる支払いが失敗した場合、顧客は別のカードを選択して、MobilePay アプリで再試行できます。支払いが 5 分以内に承認されない場合、支払いは失敗し、PaymentIntent のステータスは `requires_payment_method` に移行します。 ## 支払い後のイベントを処理する 支払いが完了すると、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)をご確認ください。 - **ダッシュボードでイベントを手動で処理する** ダッシュボードを使用して、テスト決済を[ダッシュボードで表示](https://dashboard.stripe.com/test/payments)したり、メール領収書を送信したり、入金を処理したり、失敗した決済を再試行したりできます。 - **Custom Webhook を構築する** [Build a custom webhook](https://docs.stripe.com/webhooks/handling-payment-events.md#build-your-own-webhook) handler to listen for events and build custom asynchronous payment flows. Test and debug your webhook integration locally with the Stripe CLI. - **構築済みアプリを導入する** パートナーアプリケーションを統合することで、[自動化](https://stripe.partners/?f_category=automation)や[マーケティング/セールス](https://stripe.partners/?f_category=marketing-and-sales)などの一般的なビジネスイベントを処理します。 ## 組み込みをテストする [テスト API キー](https://docs.stripe.com/keys.md#test-live-modes)を使用して、PaymentIntent を作成します。PaymentIntent を確定したら、`next_action` リダイレクト URL に従い、支払いをオーソリまたは失敗させるオプションのあるテストページをテストします。 - **Authorize test payment (テスト支払いをオーソリする)** をクリックして、支払い成功のケースをテストします。 PaymentIntent は `requires_action` から `succeeded` に移行します。 - **Fail test payment (テスト支払いを失敗させる)** をクリックして、顧客の認証失敗のケースをテストします。PaymentIntent が `requires_action` から `requires_payment_method` に移行します。 ## Optional: 支払いをオーソリし、後でキャプチャーする MobilePay は[オーソリとキャプチャの分離](https://docs.stripe.com/payments/place-a-hold-on-a-payment-method.md)に対応しています。 ### オーソリのみを行うよう Stripe に指示する オーソリとキャプチャーを分離することを指定するには、PaymentIntent の作成時に、[capture_method](https://docs.stripe.com/api/payment_intents/create.md#create_payment_intent-capture_method) を `manual` に設定します。このパラメーターは、MobilePay に関連付けられている顧客のカードの金額のみをオーソリするよう Stripe に指示します。 ```curl curl https://api.stripe.com/v1/payment_intents \ -u "<>:" \ -d amount=1099 \ -d currency=dkk \ -d capture_method=manual \ -d "payment_method_types[]=mobilepay" \ -d "payment_method_data[type]=mobilepay" ``` オーソリが成功すると、Stripe は [payment_intent.amount_capturable_updated](https://docs.stripe.com/api/events/types.md#event_types-payment_intent.amount_capturable_updated) イベントを送信します。詳細については、[イベント](https://docs.stripe.com/api/events.md)をご覧ください。 ### 売上をキャプチャーする オーソリが成功すると、PaymentIntent の[ステータス](https://docs.stripe.com/api/payment_intents/object.md#payment_intent_object-status)が `requires_capture` に移行し、オーソリされた売上を[キャプチャー](https://docs.stripe.com/api/payment_intents/capture.md)できるようになります。Stripe は全額の手動キャプチャーにのみ対応しています。 ```curl curl https://api.stripe.com/v1/payment_intents/{{PAYMENTINTENT_ID}}/capture \ -u "<>:" \ -d amount_to_capture=1099 ``` ## Optional: キャンセル MobilePay 決済に関連付けられた[PaymentIntent をキャンセル](https://docs.stripe.com/api/payment_intents/cancel.md)することにより、MobilePay 決済を期限切れ前にキャンセルできます。 ## 失敗した支払い 基になったカード取引が拒否されると、MobilePay 取引が失敗することがあります。詳しくは、[カードの支払い拒否](https://docs.stripe.com/declines/card.md)をご覧ください。この場合、PaymentMethod は解除され、PaymentIntent のステータスは自動的に `requires_payment_method` に移行します。 PaymentIntent のステータスが `requires_action` の場合、顧客は 5 分以内に支払いを認証する必要があります。5 分経過してもアクションが実行されない場合、PaymentMethod は解除され、PaymentIntent のステータスは自動的に `requires_payment_method` に移行します。 ## 返金と不審請求の申請 Stripe は、MobilePay 取引の一環として標準のカードネットワークを使用してカード取引を実行します。[返金](https://docs.stripe.com/refunds.md) と[不審請求の申し立て](https://docs.stripe.com/disputes/how-disputes-work.md)には、Visa と Mastercard のネットワークのルールが適用されます。 # 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/mobilepay/accept-a-payment?payment-ui=mobile&platform=ios. MobilePay は、デンマークとフィンランドで使われている [1 回限りの使用](https://docs.stripe.com/payments/payment-methods.md#usage)のカードウォレット決済手段です。顧客は MobilePay アプリを使用して、支払いを[認証して承認](https://docs.stripe.com/payments/payment-methods.md#customer-actions)できます。 顧客が MobilePay で支払う場合、Stripe は MobilePay から受け取ったカードデータを使用してカード取引を実行します。カード取引の処理は実装には表示されず、Stripe は支払いの成功または失敗を[直ちに通知](https://docs.stripe.com/payments/payment-methods.md#payment-notification)します。 Stripe は [Mobile Payment Element](https://docs.stripe.com/payments/accept-a-payment.md?payment-ui=mobile&platform=ios) のご利用を推奨しています。これは、MobilePay やその他の決済手段を最小限の労力で貴社の連携機能に追加できる埋め込み型の決済フォームです。 このガイドでは、カスタムの決済フォームを使用して、ネイティブのモバイルアプリから MobilePay を受け付ける方法をご説明します。ネイティブのモバイルアプリによって、顧客は MobilePay モバイルアプリにリダイレクトされ、決済を完了します。購入を完了するにあたり、MobilePay モバイルアプリで追加のアクションは必要ありません。 ## 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 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` を作成して確定するには、以下のようにします。 - 回収する金額と対応している通貨 (`eur`、`dkk`、`sek`、`nok`) を指定します。 - `mobilepay` を `PaymentIntent` の[決済手段タイプ](https://docs.stripe.com/api/payment_intents/create.md#create_payment_intent-payment_method_types)のリストに追加します。[ダッシュボード](https://dashboard.stripe.com/settings/payment_methods)で MobilePay を有効にしていることを確認してください。 - `payment_method_data[type]` を `mobilepay` に設定すると、*PaymentMethod* (PaymentMethods represent your customer's payment instruments, used with the Payment Intents or Setup Intents APIs) を作成して、PaymentIntent ですぐに使用できます。 ```curl curl https://api.stripe.com/v1/payment_intents \ -u "<>:" \ -d amount=1099 \ -d currency=dkk \ -d "payment_method_types[]=mobilepay" \ -d "payment_method_data[type]=mobilepay" \ --data-urlencode "return_url=payments-example://stripe-redirect" ``` PaymentIntent には *client secret* (The client secret is a unique key returned from Stripe as part of a PaymentIntent. This key lets the client access important fields from the PaymentIntent (status, amount, currency) while hiding sensitive ones (metadata, customer)) が含まれています。次のステップで PaymentIntent を*確定* (Confirming an intent indicates that the customer intends to use the current or provided payment method. Upon confirmation, the intent attempts to initiate the portions of the flow that have real-world side effects)するために、client secret をクライアントに送信します。 ### クライアント側 クライアントで、サーバーの PaymentIntent をリクエストし、その client secret を保存します。 #### Swift ```swift class CheckoutViewController: UIViewController { var paymentIntentClientSecret: String? // ...continued from previous step override func viewDidLoad() { // ...continued from previous step startCheckout() } func startCheckout() { // Request a PaymentIntent from your server and store its client secret // Click View full sample to see a complete implementation } } ``` ## Stripe に支払いを送信する [クライアント側] 顧客が MobilePay での支払いをタップしたら、`PaymentIntent` を確定して支払いを完了します。`STPPaymentIntentParams` オブジェクトを `PaymentIntent` の [client secret](https://docs.stripe.com/api/payment_intents/object.md#payment_intent_object-client_secret) で構成します。 client secret は、 Stripe API リクエストを認証する API キーとは異なります。このデバイスは支払いを完了できるため、慎重に扱う必要があります。記録したり、URL に埋め込んだり、当該の顧客以外に漏洩することがないようにしてください。 ### 戻り先 URL を設定する 顧客はお客様のアプリから離れて、(Safari やバンキングアプリなどで) 認証する場合があります。ユーザーが認証後にアプリに自動的に戻れるようにするには、[カスタム URL スキームを構成](https://developer.apple.com/documentation/xcode/defining-a-custom-url-scheme-for-your-app)し、URL を SDK に転送するようにアプリのデリゲートを設定します。Stripe は[ユニバーサルリンク](https://developer.apple.com/documentation/xcode/allowing-apps-and-websites-to-link-to-your-content)には対応していません。 #### 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 } ``` #### SwiftUI #### Swift ```swift @main struct MyApp: App { var body: some Scene { WindowGroup { Text("Hello, world!").onOpenURL { incomingURL in let stripeHandled = StripeAPI.handleURLCallback(with: incomingURL) if (!stripeHandled) { // This was not a Stripe url – handle the URL normally as you would } } } } } ``` ### 支払いを確定する [ステップ 2](https://docs.stripe.com/payments/mobilepay/accept-a-payment.md#create-payment-intent)の PaymentIntent client secret を使用し、[STPPaymentHandler.shared.confirmPayment()](https://stripe.dev/stripe-ios/stripepayments/documentation/stripepayments/stppaymenthandler/confirmpayment\(_:with:completion:\)) で PaymentIntent を確認します。これにより、MobilePay アプリが直接開くか (ダウンロード済みの場合)、MobilePay スタートページを示す WebView が開きます。顧客が決済をオーソリすると、completion block に決済のステータスが含まれます。 #### Swift ```swift let paymentIntentParams = STPPaymentIntentParams(clientSecret: paymentIntentClientSecret) paymentIntentParams.paymentMethodParams = STPPaymentMethodParams( mobilePay: STPPaymentMethodMobilePayParams(), billingDetails: nil, metadata: nil ) paymentIntentParams.returnURL = "your-app://stripe-redirect" // Set returnURL to your app's return URL that you set up in the previous step 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() } } ``` 顧客は 5 分以内に MobilePay アプリで支払いを承認できます。基のカードによる支払いが失敗した場合、顧客は別のカードを選択して、MobilePay アプリで再試行できます。 ## 支払い後のイベントを処理する 支払いが完了すると、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)をご確認ください。 - **ダッシュボードでイベントを手動で処理する** ダッシュボードを使用して、テスト決済を[ダッシュボードで表示](https://dashboard.stripe.com/test/payments)したり、メール領収書を送信したり、入金を処理したり、失敗した決済を再試行したりできます。 - **Custom Webhook を構築する** [Build a custom webhook](https://docs.stripe.com/webhooks/handling-payment-events.md#build-your-own-webhook) handler to listen for events and build custom asynchronous payment flows. Test and debug your webhook integration locally with the Stripe CLI. - **構築済みアプリを導入する** パートナーアプリケーションを統合することで、[自動化](https://stripe.partners/?f_category=automation)や[マーケティング/セールス](https://stripe.partners/?f_category=marketing-and-sales)などの一般的なビジネスイベントを処理します。 ## 組み込みをテストする [テスト API キー](https://docs.stripe.com/keys.md#test-live-modes)を使用して、PaymentIntent を作成します。PaymentIntent を確定したら、`next_action` リダイレクト URL に従い、支払いをオーソリまたは失敗させるオプションのあるテストページをテストします。 - **Authorize test payment (テスト支払いをオーソリする)** をクリックして、支払い成功のケースをテストします。PaymentIntent の [status (ステータス)](https://docs.stripe.com/api/payment_intents/object.md#payment_intent_object-status) が `requires_action` から `succeeded` に移行します。 - **Fail test payment (テスト支払いを失敗させる)** をクリックして、顧客が認証に失敗するケースをテストします。PaymentIntent の [status (ステータス)](https://docs.stripe.com/api/payment_intents/object.md#payment_intent_object-status) が `requires_action` から `requires_payment_method` に移行します。 ## Optional: キャンセル MobilePay 決済に関連付けられた[PaymentIntent をキャンセル](https://docs.stripe.com/api/payment_intents/cancel.md)することにより、MobilePay 決済を期限切れ前にキャンセルできます。 ## 失敗した支払い 基になったカード取引が拒否されると、MobilePay 取引が失敗することがあります。詳しくは、[カードの支払い拒否](https://docs.stripe.com/declines/card.md)をご覧ください。この場合、PaymentMethod は解除され、PaymentIntent のステータスは自動的に `requires_payment_method` に移行します。 PaymentIntent のステータスが `requires_action` の場合、顧客は 5 分以内に支払いを認証する必要があります。5 分経過してもアクションが実行されない場合、PaymentMethod は解除され、PaymentIntent のステータスは自動的に `requires_payment_method` に移行します。 ## 返金と不審請求の申請 Stripe は、MobilePay 取引の一環として標準のカードネットワークを使用してカード取引を実行します。[返金](https://docs.stripe.com/refunds.md) と[不審請求の申し立て](https://docs.stripe.com/disputes/how-disputes-work.md)には、Visa と Mastercard のネットワークのルールが適用されます。 # 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/mobilepay/accept-a-payment?payment-ui=mobile&platform=android. MobilePay は、デンマークとフィンランドで使われている [1 回限りの使用](https://docs.stripe.com/payments/payment-methods.md#usage)のカードウォレット決済手段です。顧客は MobilePay アプリを使用して、支払いを[認証して承認](https://docs.stripe.com/payments/payment-methods.md#customer-actions)できます。 顧客が MobilePay で支払う場合、Stripe は MobilePay から受け取ったカードデータを使用してカード取引を実行します。カード取引の処理は実装には表示されず、Stripe は支払いの成功または失敗を[直ちに通知](https://docs.stripe.com/payments/payment-methods.md#payment-notification)します。 Stripe は [Mobile Payment Element](https://docs.stripe.com/payments/accept-a-payment.md?payment-ui=mobile&platform=android) のご利用を推奨しています。これは、MobilePay やその他の決済手段を最小限の労力で貴社の連携機能に追加できる埋め込み型の決済フォームです。 このガイドでは、カスタムの決済フォームを使用して、ネイティブのモバイルアプリから MobilePay を受け付ける方法をご説明します。ネイティブのモバイルアプリによって、顧客は MobilePay モバイルアプリにリダイレクトされ、決済を完了します。購入を完了するにあたり、MobilePay モバイルアプリで追加のアクションは必要ありません。 ## 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.3.0") // Include the financial connections SDK to support US bank account as a payment method implementation("com.stripe:financial-connections:23.3.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) も使用します。 ## PaymentIntent を作成する [サーバー側] [クライアント側] ### サーバー側 [PaymentIntent](https://docs.stripe.com/api/payment_intents/object.md) は、顧客から支払いを回収する意図を表すオブジェクトであり、支払いプロセスのライフサイクルをステージごとに追跡します。 サーバーで `PaymentIntent` を作成して確定するには、以下のようにします。 - 回収する金額と対応している通貨 (`eur`、`dkk`、`sek`、`nok`) を指定します。 - `mobilepay` を[決済手段タイプ](https://docs.stripe.com/api/payment_intents/create.md#create_payment_intent-payment_method_types)のリストに追加します。[ダッシュボード](https://dashboard.stripe.com/settings/payment_methods)で MobilePay を有効にしていることを確認してください。 - `payment_method_data[type]` を `mobilepay` に設定すると、*PaymentMethod* (PaymentMethods represent your customer's payment instruments, used with the Payment Intents or Setup Intents APIs) を作成して、PaymentIntent ですぐに使用できます。 ```curl curl https://api.stripe.com/v1/payment_intents \ -u "<>:" \ -d amount=1099 \ -d currency=dkk \ -d "payment_method_types[]=mobilepay" \ -d "payment_method_data[type]=mobilepay" ``` PaymentIntent には *client secret* (The client secret is a unique key returned from Stripe as part of a PaymentIntent. This key lets the client access important fields from the PaymentIntent (status, amount, currency) while hiding sensitive ones (metadata, customer)) が含まれています。次のステップで PaymentIntent を*確定* (Confirming an intent indicates that the customer intends to use the current or provided payment method. Upon confirmation, the intent attempts to initiate the portions of the flow that have real-world side effects)するために、client secret をクライアントに送信します。 ### クライアント側 クライアントで、サーバーの PaymentIntent をリクエストし、その client secret を保存します。 #### Kotlin ```kotlin class CheckoutActivity : AppCompatActivity() { private lateinit var paymentIntentClientSecret: String override fun onCreate(savedInstanceState: Bundle?) { super.onCreate(savedInstanceState) // ... startCheckout() } private fun startCheckout() { // Request a PaymentIntent from your server and store its client secret in paymentIntentClientSecret // Click View full sample to see a complete implementation } } ``` ## Stripe に支払いを送信する [クライアント側] 顧客が MobilePay での支払いをタップしたら、`PaymentIntent` を確定して支払いを完了します。`ConfirmPaymentIntentParams` オブジェクトを `PaymentIntent` の [client secret](https://docs.stripe.com/api/payment_intents/object.md#payment_intent_object-client_secret) で構成します。 client secret は、Stripe API リクエストを認証する API キーとは異なります。このデバイスは支払いを完了できるため、慎重に扱う必要があります。記録したり、URL に埋め込んだり、当該の顧客以外に漏洩することがないようにしてください。 ### 支払いを確定する [ステップ 2](https://docs.stripe.com/payments/mobilepay/accept-a-payment.md#create-payment-intent)の PaymentIntent client secret を使用し、[PaymentLauncher confirm](https://stripe.dev/stripe-android/payments-core/com.stripe.android.payments.paymentlauncher/-payment-launcher/index.html#74063765%2FFunctions%2F-1622557690) で PaymentIntent を確認します。これにより、MobilePay アプリが直接開くか (ダウンロード済みの場合)、MobilePay スタートページを示す WebView が開きます。顧客が決済をオーソリすると、`onPaymentResult` に決済のステータスが含まれます。 #### Kotlin ```kotlin class CheckoutActivity : AppCompatActivity() { // ... private lateinit var paymentIntentClientSecret: String private val paymentLauncher: PaymentLauncher by lazy { PaymentLauncher.create( this, PaymentConfiguration.getInstance(applicationContext).publishableKey, PaymentConfiguration.getInstance(applicationContext).stripeAccountId, ::onPaymentResult ) } private fun startCheckout() { // ... val confirmParams = ConfirmPaymentIntentParams .createWithPaymentMethodCreateParams( paymentMethodCreateParams = PaymentMethodCreateParams.createMobilePay(), clientSecret = paymentIntentClientSecret ) paymentLauncher.confirm(confirmParams) } private fun onPaymentResult(paymentResult: PaymentResult) { val message = when (paymentResult) { is PaymentResult.Completed -> { "Completed!" } is PaymentResult.Canceled -> { "Canceled!" } is PaymentResult.Failed -> { // This string comes from the PaymentIntent's error message. // See: https://docs.stripe.com/api/payment_intents/object#payment_intent_object-last_payment_error-message "Failed: " + paymentResult.throwable.message } } } } ``` 顧客は 5 分以内に MobilePay アプリで支払いを承認できます。基のカードによる支払いが失敗した場合、顧客は別のカードを選択して、MobilePay アプリで再試行できます。 ## 支払い後のイベントを処理する 支払いが完了すると、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)をご確認ください。 - **ダッシュボードでイベントを手動で処理する** ダッシュボードを使用して、テスト決済を[ダッシュボードで表示](https://dashboard.stripe.com/test/payments)したり、メール領収書を送信したり、入金を処理したり、失敗した決済を再試行したりできます。 - **Custom Webhook を構築する** [Build a custom webhook](https://docs.stripe.com/webhooks/handling-payment-events.md#build-your-own-webhook) handler to listen for events and build custom asynchronous payment flows. Test and debug your webhook integration locally with the Stripe CLI. - **構築済みアプリを導入する** パートナーアプリケーションを統合することで、[自動化](https://stripe.partners/?f_category=automation)や[マーケティング/セールス](https://stripe.partners/?f_category=marketing-and-sales)などの一般的なビジネスイベントを処理します。 ## 組み込みをテストする [テスト API キー](https://docs.stripe.com/keys.md#test-live-modes)を使用して、PaymentIntent を作成します。PaymentIntent を確定したら、`next_action` リダイレクト URL に従い、支払いをオーソリまたは失敗させるオプションのあるテストページをテストします。 - **Authorize test payment (テスト支払いをオーソリする)** をクリックして、支払い成功のケースをテストします。PaymentIntent の [status (ステータス)](https://docs.stripe.com/api/payment_intents/object.md#payment_intent_object-status) が `requires_action` から `succeeded` に移行します。 - **Fail test payment (テスト支払いを失敗させる)** をクリックして、顧客が認証に失敗するケースをテストします。PaymentIntent の [status (ステータス)](https://docs.stripe.com/api/payment_intents/object.md#payment_intent_object-status) が `requires_action` から `requires_payment_method` に移行します。 ## Optional: キャンセル MobilePay 決済に関連付けられた[PaymentIntent をキャンセル](https://docs.stripe.com/api/payment_intents/cancel.md)することにより、MobilePay 決済を期限切れ前にキャンセルできます。 ## 失敗した支払い 基になったカード取引が拒否されると、MobilePay 取引が失敗することがあります。詳しくは、[カードの支払い拒否](https://docs.stripe.com/declines/card.md)をご覧ください。この場合、PaymentMethod は解除され、PaymentIntent のステータスは自動的に `requires_payment_method` に移行します。 PaymentIntent のステータスが `requires_action` の場合、顧客は 5 分以内に支払いを認証する必要があります。5 分経過してもアクションが実行されない場合、PaymentMethod は解除され、PaymentIntent のステータスは自動的に `requires_payment_method` に移行します。 ## 返金と不審請求の申請 Stripe は、MobilePay 取引の一環として標準のカードネットワークを使用してカード取引を実行します。[返金](https://docs.stripe.com/refunds.md) と[不審請求の申し立て](https://docs.stripe.com/disputes/how-disputes-work.md)には、Visa と Mastercard のネットワークのルールが適用されます。 # 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/mobilepay/accept-a-payment?payment-ui=mobile&platform=react-native. MobilePay は、デンマークとフィンランドで使われている [1 回限りの使用](https://docs.stripe.com/payments/payment-methods.md#usage)のカードウォレット決済手段です。顧客は MobilePay アプリを使用して、支払いを[認証して承認](https://docs.stripe.com/payments/payment-methods.md#customer-actions)できます。 顧客が MobilePay で支払う場合、Stripe は MobilePay から受け取ったカードデータを使用してカード取引を実行します。カード取引の処理は実装には表示されず、Stripe は支払いの成功または失敗を[直ちに通知](https://docs.stripe.com/payments/payment-methods.md#payment-notification)します。 Stripe は [Mobile Payment Element](https://docs.stripe.com/payments/accept-a-payment.md?payment-ui=mobile&platform=react-native) のご利用を推奨しています。これは、MobilePay やその他の決済手段を最小限の労力で貴社の連携機能に追加できる埋め込み型の決済フォームです。 このガイドでは、独自のカスタム決済フォームを使用して、ネイティブモバイルアプリから MobilePay を受け付ける方法について説明します。ネイティブモバイルアプリは、顧客をウェブビューにリダイレクトして、MobilePay での決済を完了します。 ## Stripe を設定する [サーバー側] [クライアント側] まず、Stripe アカウントが必要です。[今すぐ登録してください](https://dashboard.stripe.com/register)。 ### サーバー側 この導入には、 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' ``` ### クライアント側 [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` を作成して確定するには、以下のようにします。 - 回収する金額と対応している通貨 (`eur`、`dkk`、`sek`、`nok`) を指定します。 - `mobilepay` を[決済手段タイプ](https://docs.stripe.com/api/payment_intents/create.md#create_payment_intent-payment_method_types)のリストに追加します。[ダッシュボード](https://dashboard.stripe.com/settings/payment_methods)で MobilePay を有効にしていることを確認してください。 ```curl curl https://api.stripe.com/v1/payment_intents \ -u "<>:" \ -d amount=1099 \ -d currency=dkk \ -d "payment_method_types[]=mobilepay" \ --data-urlencode "return_url=payments-example://stripe-redirect" ``` PaymentIntent には *client secret* (The client secret is a unique key returned from Stripe as part of a PaymentIntent. This key lets the client access important fields from the PaymentIntent (status, amount, currency) while hiding sensitive ones (metadata, customer)) が含まれています。次のステップで PaymentIntent を*確定* (Confirming an intent indicates that the customer intends to use the current or provided payment method. Upon confirmation, the intent attempts to initiate the portions of the flow that have real-world side effects)するために、client secret をクライアントに送信します。 ### クライアント側 クライアントで、サーバーの PaymentIntent をリクエストし、その client secret を保存します。 ```javascript function PaymentScreen() { const fetchPaymentIntentClientSecret = async () => { const response = await fetch(`${API_URL}/create-payment-intent`, { method: 'POST', headers: { 'Content-Type': 'application/json', }, body: JSON.stringify({ currency: 'dkk', }), }); const {clientSecret} = await response.json(); return clientSecret; }; const handlePayPress = async () => { // See below }; return (