# Vipps による支払い ノルウェーで一般的な支払い方法である Vipps を受け付ける方法をご紹介します。 # Checkout > This is a Checkout for when payment-ui is checkout. View the full page at https://docs.stripe.com/payments/vipps/accept-a-payment?payment-ui=checkout. Vipps は、ノルウェーで使用されている [1 回限りの使用](https://docs.stripe.com/payments/payment-methods.md#usage)のカードウォレット決済手段です。顧客は Vipps アプリを使用して、支払いを[認証して承認](https://docs.stripe.com/payments/payment-methods.md#customer-actions)できます。 顧客が Vipps で支払う場合、Stripe は Vipps から受け取ったカードデータを使用してカード取引を実行します。カード取引の処理は実装には表示されず、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) で Vipps を有効にする方法をご案内しています。また動的な決済方法を使用した支払いの受け付けと手動で設定する決済方法との違いをご確認ください。 ## 互換性を判定する **サポート対象のビジネスの所在地**: EEA, GB **対応可能な通貨**: `nok` **取引通貨**: `nok` **支払いモード**: Yes **セットアップモード**: No **サブスクリプションモード**: No Vipps の支払いに対応するには、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)を、ノルウェークローネ (通貨コード `NOK`) で示す必要があります。 ## Stripe を設定する [サーバー側] まず、Stripe アカウントが必要です。[今すぐ登録](https://dashboard.stripe.com/register)してください。 公式ライブラリを使用して、アプリケーションから 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' ``` ## 支払いを受け入れる > このガイドは、基本的な[決済を受け付ける](https://docs.stripe.com/payments/accept-a-payment.md?integration=checkout) Checkout の実装を基盤にしています。 ### 決済手段として Vipps を有効にします 新しい [Checkout セッション](https://docs.stripe.com/api/checkout/sessions.md)を作成する際は、次のことを行う必要があります。 1. リクエストがあった場合には [API バージョン](https://docs.stripe.com/sdks/set-version.md) と共に `vipps_preview=v1` のプレビューヘッダーを提供します。 1. `vipps` を `payment_method_types` の一覧に追加します。 1. すべての `line_items` が `nok` を通貨として使用していることを確認してください。 #### Stripe ホスト型ページ ```curl curl https://api.stripe.com/v1/checkout/sessions \ -u "<>:" \ -H "Stripe-Version: 2026-03-25.preview; vipps_preview=v1" \ -d "line_items[0][price_data][currency]=nok" \ -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]=vipps" \ --data-urlencode "success_url=https://example.com/success" ``` #### 組み込みフォーム ```curl curl https://api.stripe.com/v1/checkout/sessions \ -u "<>:" \ -H "Stripe-Version: 2026-03-25.preview; vipps_preview=v1" \ -d "line_items[0][price_data][currency]=nok" \ -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]=vipps" \ --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)などの一般的なビジネスイベントを処理します。 ## 組み込みをテストする テスト環境で実装内容をテストする場合、テスト決済ページにリダイレクトされ、ここでテスト決済を承認または拒否できます。 本番環境で、Vipps に関連付けられている電話番号を入力すると、Vipps モバイルアプリにプッシュ通知が送信されます。Vipps モバイルアプリで支払いを承認または拒否できます。 ## 決済をオーソリし、後でキャプチャ Vipps は、7 日間の保持期間で[オーソリとキャプチャーの分離](https://docs.stripe.com/payments/place-a-hold-on-a-payment-method.md)に対応しています。7 日間の保持期間中に支払いがキャプチャーされない場合、Stripe は決済をキャンセルし、[payment_intent.canceled](https://docs.stripe.com/api/events/types.md#event_types-payment_intent.canceled) イベントを送信します。 ### オーソリのみを行うよう Stripe に指示する オーソリとキャプチャーの分離を指定するには、Checkout セッションの作成時に [capture_method](https://docs.stripe.com/api/checkout/sessions/create.md#create_checkout_session-payment_intent_data-capture_method) を `manual` に設定します。このパラメーターは、Vipps に関連付けられている顧客のカードの金額のみをオーソリするよう Stripe に指示します。 #### Stripe ホスト型ページ ```curl curl https://api.stripe.com/v1/checkout/sessions \ -u "<>:" \ -H "Stripe-Version: 2026-03-25.preview; vipps_preview=v1" \ -d "line_items[0][price_data][currency]=nok" \ -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_intent_data[capture_method]=manual" \ -d "payment_method_types[0]=card" \ -d "payment_method_types[1]=vipps" \ --data-urlencode "success_url=https://example.com/success.html" ``` #### 組み込みフォーム ```curl curl https://api.stripe.com/v1/checkout/sessions \ -u "<>:" \ -H "Stripe-Version: 2026-03-25.preview; vipps_preview=v1" \ -d "line_items[0][price_data][currency]=nok" \ -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_intent_data[capture_method]=manual" \ -d "payment_method_types[0]=card" \ -d "payment_method_types[1]=vipps" \ --data-urlencode "return_url=https://example.com/return" \ -d ui_mode=embedded_page ``` オーソリが成功すると、Stripe は [payment_intent.amount_capturable_updated](https://docs.stripe.com/api/events/types.md#event_types-payment_intent.amount_capturable_updated) イベントを送信します。詳細については、[Event (イベント)](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: キャンセル Vipps 支払いに関連付けられている [PaymentIntent をキャンセル](https://docs.stripe.com/api/payment_intents/cancel.md)することにより、有効期限が切れる前の Vipps 支払いをキャンセルできます。 ## 失敗した支払い 基になるカード取引が拒否されると、Vipps 取引が失敗する可能性があります。詳細については、[カードの支払い拒否](https://docs.stripe.com/declines/card.md)をご覧ください。この場合、PaymentMethod は解除され、PaymentIntent のステータスは自動的に `requires_payment_method` に移行します。 PaymentIntent のステータスが `requires_action` の場合、顧客は 5 分以内に支払いを認証する必要があります。5 分経過してもアクションが実行されない場合、PaymentMethod は解除され、PaymentIntent のステータスは自動的に `requires_payment_method` に移行します。 ## 返金と不審請求の申請 Stripe は、Vipps 取引の一環として標準のカードネットワークを使用してカード取引を実行します。[返金](https://docs.stripe.com/refunds.md) と[不審請求の申し立て](https://docs.stripe.com/disputes/how-disputes-work.md)には、Visa と Mastercard のネットワーク規則が適用されます。 ## See also - [Vipps の詳細](https://docs.stripe.com/payments/vipps.md) - [Checkout のフルフィルメント](https://docs.stripe.com/checkout/fulfillment.md) - [決済フローをカスタマイズする](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/vipps/accept-a-payment?payment-ui=elements. Vipps は、ノルウェーで使用されている [1 回限りの使用](https://docs.stripe.com/payments/payment-methods.md#usage)のカードウォレット決済手段です。顧客は Vipps アプリを使用して、支払いを[認証して承認](https://docs.stripe.com/payments/payment-methods.md#customer-actions)できます。 顧客が Vipps で支払う場合、Stripe は Vipps から受け取ったカードデータを使用してカード取引を実行します。カード取引の処理は実装には表示されず、Stripe は支払いの成功または失敗を[直ちに通知](https://docs.stripe.com/payments/payment-methods.md#payment-notification)します。 このガイドでは、[Payment Element](https://docs.stripe.com/payments/payment-element.md) を使用して、ウェブサイトまたはアプリケーションにカスタムの Stripe 決済フォームを埋め込む方法をご紹介します。Payment Element を使用すると、Vipps とその他の決済手段に自動的に対応できます。高度な設定とカスタマイズについては、[決済の受け付け](https://docs.stripe.com/payments/accept-a-payment.md)に関する導入ガイドをご覧ください。 ## Stripe を設定する [サーバー側] まず、Stripe アカウントが必要です。[今すぐ登録](https://dashboard.stripe.com/register)してください。 アプリケーションから 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' ``` ## PaymentIntent を作成する [サーバー側] Stripe は [PaymentIntent](https://docs.stripe.com/api/payment_intents.md) オブジェクトを使用して、顧客から支払いを回収するお客様の意図を示し、プロセス全体を通して請求の実施と支払い状態の変化を追跡します。 `payment_method_types` 属性を使用して一覧表示することにより、決済手段を手動で指定します。 金額、通貨、支払い方法のリストを使用して、サーバーで PaymentIntent を作成します。支払い額は常に、クライアント側ではなく、信頼性の高い環境であるサーバー側で決定してください。これにより、悪意のある顧客が価格を操作できないようにします。 PaymentIntent の作成時に Vipps による決済を有効にするには、API リクエストに `vipps_preview=v1` プレビューヘッダーを含める必要があります。 ```curl curl https://api.stripe.com/v1/payment_intents \ -u "<>:" \ -H "Stripe-Version: 2026-03-25.preview; vipps_preview=v1" \ -d amount=1000 \ -d currency=nok \ -d "payment_method_types[]=vipps" ``` ### 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('<>', { betas: 'vipps_pm_beta_1', apiVersion: vipps_preview=v1, }); ``` ### 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('<>', { betas: 'vipps_pm_beta_1', apiVersion: vipps_preview=v1, }); 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; ``` ## 取引をリダイレクトして認証する 顧客は、モバイルアプリまたはデスクトップアプリで Vipps 取引を認証できます。`confirmPayment` の呼び出し後、顧客が使用するクライアントによって認証方法が決定されます。 #### モバイルアプリの認証 `confirmPayment` を呼び出すと、顧客は Vipps にリダイレクトされ、そこで支払いを承認または拒否します。顧客が支払いを承認すると、ページは Payment Intent の `return_url` に顧客をリダイレクトします。Stripe は `payment_intent`、`payment_intent_client_secret`、`redirect_pm_type`、`redirect_status` を URL クエリパラメーターとして (`return_url` の既存のクエリパラメーターとともに) 追加します。 認証セッションは 5 分後に期限切れになり、PaymentIntent のステータスは `require_payment_method` に戻ります。ステータスが移行すると、顧客には支払いエラーが表示され、決済プロセスをもう一度開始する必要があります。 #### デスクトップ版ウェブアプリの認証 `confirmPayment` が呼び出されると、Stripe は顧客を Vipps がホストするページにリダイレクトします。顧客はここで Vipps アカウントに関連付けられた電話番号を入力できます。これにより、Vipps アプリに支払い認証のためのプッシュ通知が送信されます。顧客が支払いの認証に成功すると、ページは `return_url` に顧客をリダイレクトします。決済後に顧客をウェブでリダイレクトしない場合は、Payment Element に `redirect: if_required` を渡します。 認証セッションは 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)などの一般的なビジネスイベントを処理します。 ## 組み込みをテストする #### モバイル版ウェブアプリのテスト 実装内容をテストするには、決済手段として Vipps を選択して、**支払う**をタップします。テスト環境では、テスト決済ページにリダイレクトされ、そこで支払いを承認または拒否できます。 本番環境で**支払う**をタップすると、Vipps モバイルアプリにリダイレクトされ、ここで支払いを承認または拒否できます。 #### デスクトップ版ウェブアプリのテスト テスト環境で実装内容をテストする場合、テスト決済ページにリダイレクトされ、ここでテスト決済を承認または拒否できます。 本番環境で、Vipps に関連付けられている電話番号を入力すると、Vipps モバイルアプリにプッシュ通知が送信されます。Vipps モバイルアプリで支払いを承認または拒否できます。 ## Optional: 支払いをオーソリし、後でキャプチャ Vipps は、7 日間の保持期間で[オーソリとキャプチャーの分離](https://docs.stripe.com/payments/place-a-hold-on-a-payment-method.md)に対応しています。7 日間の保持期間中に支払いがキャプチャーされない場合、Stripe は決済をキャンセルし、[payment_intent.canceled](https://docs.stripe.com/api/events/types.md#event_types-payment_intent.canceled) イベントを送信します。 ### オーソリのみを行うよう Stripe に指示する オーソリとキャプチャーの分離を指定するには、PaymentIntent の作成時に、[capture_method](https://docs.stripe.com/api/payment_intents/create.md#create_payment_intent-capture_method) を `manual` に設定します。このパラメーターは、Vipps に関連付けられている顧客のカードの金額のみをオーソリするよう Stripe に指示します。 ```curl curl https://api.stripe.com/v1/payment_intents \ -u "<>:" \ -H "Stripe-Version: 2026-03-25.preview; vipps_preview=v1" \ -d amount=1099 \ -d currency=dkk \ -d capture_method=manual \ -d "payment_method_types[]=vipps" \ -d "payment_method_data[type]=vipps" ``` オーソリが成功すると、Stripe は [payment_intent.amount_capturable_updated](https://docs.stripe.com/api/events/types.md#event_types-payment_intent.amount_capturable_updated) イベントを送信します。詳細については、[Event (イベント)](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 "<>:" \ -H "Stripe-Version: 2026-03-25.preview; vipps_preview=v1" \ -d amount_to_capture=1099 ``` ## Optional: キャンセル Vipps 支払いに関連付けられている [PaymentIntent をキャンセル](https://docs.stripe.com/api/payment_intents/cancel.md)することにより、有効期限が切れる前の Vipps 支払いをキャンセルできます。 ## 失敗した支払い 基になるカード取引が拒否されると、Vipps 取引が失敗する可能性があります。詳細については、[カードの支払い拒否](https://docs.stripe.com/declines/card.md)をご覧ください。この場合、PaymentMethod は解除され、PaymentIntent のステータスは自動的に `requires_payment_method` に移行します。 PaymentIntent のステータスが `requires_action` の場合、顧客は 5 分以内に支払いを認証する必要があります。5 分経過してもアクションが実行されない場合、PaymentMethod は解除され、PaymentIntent のステータスは自動的に `requires_payment_method` に移行します。 ## 返金と不審請求の申請 Stripe は、Vipps 取引の一環として標準のカードネットワークを使用してカード取引を実行します。[返金](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/vipps/accept-a-payment?payment-ui=direct-api. Vipps は、ノルウェーで使用されている [1 回限りの使用](https://docs.stripe.com/payments/payment-methods.md#usage)のカードウォレット決済手段です。顧客は Vipps アプリを使用して、支払いを[認証して承認](https://docs.stripe.com/payments/payment-methods.md#customer-actions)できます。 顧客が Vipps で支払う場合、Stripe は Vipps から受け取ったカードデータを使用してカード取引を実行します。カード取引の処理は実装には表示されず、Stripe は支払いの成功または失敗を[直ちに通知](https://docs.stripe.com/payments/payment-methods.md#payment-notification)します。 ## Stripe を設定する [サーバー側] まず、Stripe アカウントが必要です。[今すぐ登録](https://dashboard.stripe.com/register)してください。 公式ライブラリを使用して、アプリケーションから 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' ``` ## PaymentIntent を作成する [サーバー側] [PaymentIntent](https://docs.stripe.com/api/payment_intents/object.md) は、顧客から支払いを回収する意図を表すオブジェクトであり、支払いプロセスのライフサイクルをステージごとに追跡します。サーバーで `PaymentIntent` を作成し、回収する金額とサポートされている通貨 (`nok`) を指定します。[Payment Intents API](https://docs.stripe.com/payments/payment-intents.md) を使用した組み込みをすでにお持ちの場合には、`vipps` を[決済手段タイプ](https://docs.stripe.com/api/payment_intents/create.md#create_payment_intent-payment_method_types)のリストに追加します。Vipps を有効にするには、API リクエストに `vipps_preview=v1` ヘッダーを含めてください。 ```curl curl https://api.stripe.com/v1/payment_intents \ -u "<>:" \ -H "Stripe-Version: 2026-03-25.preview; vipps_preview=v1" \ -d amount=1099 \ -d currency=nok \ -d "payment_method_types[]=vipps" \ -d "payment_method_data[type]=vipps" ``` ### レスポンスの例 ```json { "id": "pi_12345", "amount": 1099, "client_secret": "pi_12345_secret_abcdef", "currency": "nok", "payment_method": "pm_12345", "payment_method_types": [ "vipps" ], "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/vipps/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) は、支払い完了後に Stripe が顧客をリダイレクトする場所を指定します。 ```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": "nok", "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": [ "vipps" ], "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 によって Vipps ランディングページが開き、顧客はここに Vipps アカウントを識別する電話番号を入力できます。その後、Vipps スマートフォンアプリを使用して支払いの承認を進めることができます。 - モバイルデバイスでは、デスクトップでのプロセスと同様に、この URL によって Vipps アプリケーションが直接開くか (存在する場合)、Vipps ランディングページに移動します。 顧客は 5 分以内にリダイレクト URL を開き、Vipps アプリで支払いを承認する必要があります。基のカードによる支払いが失敗した場合、顧客は別のカードを選択して、Vipps アプリで再試行できます。支払いが 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: 支払いをオーソリし、後でキャプチャ Vipps は、7 日間の保持期間で[オーソリとキャプチャーの分離](https://docs.stripe.com/payments/place-a-hold-on-a-payment-method.md)に対応しています。7 日間の保持期間中に支払いがキャプチャーされない場合、Stripe は決済をキャンセルし、[payment_intent.canceled](https://docs.stripe.com/api/events/types.md#event_types-payment_intent.canceled) イベントを送信します。 ### オーソリのみを行うよう Stripe に指示する オーソリとキャプチャーの分離を指定するには、PaymentIntent の作成時に、[capture_method](https://docs.stripe.com/api/payment_intents/create.md#create_payment_intent-capture_method) を `manual` に設定します。このパラメーターは、Vipps に関連付けられている顧客のカードの金額のみをオーソリするよう Stripe に指示します。 ```curl curl https://api.stripe.com/v1/payment_intents \ -u "<>:" \ -H "Stripe-Version: 2026-03-25.preview; vipps_preview=v1" \ -d amount=1099 \ -d currency=dkk \ -d capture_method=manual \ -d "payment_method_types[]=vipps" \ -d "payment_method_data[type]=vipps" ``` オーソリが成功すると、Stripe は [payment_intent.amount_capturable_updated](https://docs.stripe.com/api/events/types.md#event_types-payment_intent.amount_capturable_updated) イベントを送信します。詳細については、[Event (イベント)](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 "<>:" \ -H "Stripe-Version: 2026-03-25.preview; vipps_preview=v1" \ -d amount_to_capture=1099 ``` ## Optional: キャンセル Vipps 支払いに関連付けられている [PaymentIntent をキャンセル](https://docs.stripe.com/api/payment_intents/cancel.md)することにより、有効期限が切れる前の Vipps 支払いをキャンセルできます。 ## 失敗した支払い 基になるカード取引が拒否されると、Vipps 取引が失敗する可能性があります。詳細については、[カードの支払い拒否](https://docs.stripe.com/declines/card.md)をご覧ください。この場合、PaymentMethod は解除され、PaymentIntent のステータスは自動的に `requires_payment_method` に移行します。 PaymentIntent のステータスが `requires_action` の場合、顧客は 5 分以内に支払いを認証する必要があります。5 分経過してもアクションが実行されない場合、PaymentMethod は解除され、PaymentIntent のステータスは自動的に `requires_payment_method` に移行します。 ## 返金と不審請求の申請 Stripe は、Vipps 取引の一環として標準のカードネットワークを使用してカード取引を実行します。[返金](https://docs.stripe.com/refunds.md) と[不審請求の申し立て](https://docs.stripe.com/disputes/how-disputes-work.md)には、Visa と Mastercard のネットワーク規則が適用されます。