# カスタムの決済手段を追加する

Mobile Payment Element にカスタムの決済手段を追加します。

[In-app Payments](https://docs.stripe.com/payments/mobile.md) を使用すると、ユーザーは一度の導入で多くの [支払い方法](https://docs.stripe.com/payments/payment-methods/payment-method-support.md) で支払うことができます。Stripe で処理されない追加の支払い方法を表示する必要がある場合は、カスタムの支払い方法を使用します。カスタムの支払い方法を使用する場合は、Stripe 以外で処理された購入をオプションで Stripe アカウントに記録して、レポートを作成することもできます。

カスタム支払い方法を設定するには、Stripe ダッシュボードで支払い方法を作成し、In-app Payments でも表示する表示名とアイコンを指定します。Stripe ダッシュボードでは、50 種類を超える事前設定されたカスタム支払い方法にアクセスすることもできます。支払い方法を作成したら、以下のガイドに従って In-app Payments を設定します。カスタム支払い方法の取引は Stripe の外部で処理され確定されるため、In-app Payments を設定するには、追加の設定作業が必要になります。

> サードパーティーの決済代行業者と連携する場合は、PSP との契約や適用法など、[適用される法務要件](https://docs.stripe.com/payments/payment-methods/custom-payment-methods.md#compliance) に従う責任があります。

# iOS

> This is a iOS for when platform is ios. View the full page at https://docs.stripe.com/payments/mobile/custom-payment-methods?platform=ios.

## Before you begin

1. [Stripe アカウントを作成する](https://dashboard.stripe.com/register)か、[サインイン](https://dashboard.stripe.com/login)してください。
1. [Payment Sheet のサンプル](https://docs.stripe.com/payments/mobile/accept-payment.md?platform=ios&type=payment)に従って、決済システムの構築を完了します。

## ダッシュボードでカスタムの決済手段を作成する [ダッシュボード]

**設定** > **Payments** > [Custom の決済手段](https://dashboard.stripe.com/settings/custom_payment_methods)に移動して、カスタムの決済手段のページにアクセスします。新しいカスタムの決済手段を作成し、Payment Element が表示する表示名とロゴを指定します。

#### 適切なロゴを選択

- 透明な背景のロゴを提供する場合は、ページの Payment Element の背景色を考慮して、ロゴがはっきりと表示されることを確認してください。
- 背景色が入ったロゴを指定する場合、丸い角は提供されないため、ファイルに含めるようにしてください。
- 16 ピクセル× 16 ピクセルに拡大縮小できるロゴのバリアントを選択します。多くの場合、これはブランドのスタンドアロンのロゴマークです。

カスタムの決済手段を作成すると、ステップ 2 で必要なカスタムの決済手段の ID (`cpmt_` で始まる) がダッシュボードに表示されます。

## カスタム決済手段タイプを追加する

`PaymentSheet.Configuration` オブジェクトを作成して `PaymentSheet` を初期化するときに、Mobile Payment Element に追加するカスタムの決済手段と、決済を完了するためのハンドラを指定します。

```swift
@_spi(CustomPaymentMethodsBeta) import StripePaymentSheet

class MyCheckoutVC: UIViewController {
  func setUpPaymentSheet() {
      // ...
      var configuration = PaymentSheet.Configuration()let customPaymentMethod = PaymentSheet.CustomPaymentMethodConfiguration.CustomPaymentMethod(id: "cpmt_...",
                                                                                                            subtitle: "Optional subtitle")
      configuration.customPaymentMethodConfiguration = .init(customPaymentMethods: [customPaymentMethod],
                                                             customPaymentMethodConfirmHandler: handleCustomPaymentMethod(_:_:))
      // ...
  }
func handleCustomPaymentMethod(
        _ customPaymentMethodType: PaymentSheet.CustomPaymentMethodConfiguration.CustomPaymentMethod,
        _ billingDetails: STPPaymentMethodBillingDetails
    ) async -> PaymentSheetResult {
      // ...explained in the next step
  }
}
```

## 支払いを完了する

#### PaymentSheet

顧客がカスタムの決済手段を使用して PaymentSheet の **購入**ボタンをタップすると、カスタムの決済手段を持つハンドラが呼び出され、収集した請求情報が使用されます。

システムが (たとえば、カスタム決済手段のプロバイダーの SDK を使用して) 支払いを完了すると、支払いの結果 (`completed`、`canceled`、`failure(error:)`) を関数から返します。

`.failure(error:)` を渡すと、PaymentSheet は Swift エラーには [errorDescription](https://developer.apple.com/documentation/foundation/localizederror/2946895-errordescription) を、NSErrors には [localizedDescription](https://developer.apple.com/documentation/foundation/nserror/1414418-localizeddescription) を使用してエラーを表示します。

```swift
import StripePaymentSheet

class MyCheckoutVC: UIViewController {
    func setUpPaymentSheet() {
        // ...
        var configuration = PaymentSheet.Configuration()
        let customPaymentMethod = PaymentSheet.CustomPaymentMethodConfiguration.CustomPaymentMethod(id: "cpmt_...",
                                                                                                              subtitle: "Optional subtitle")
        configuration.customPaymentMethodConfiguration = .init(customPaymentMethods: [customPaymentMethod],
                                                              customPaymentMethodConfirmHandler: handleCustomPaymentMethod(_:_:))
        // ...
    }

    func handleCustomPaymentMethod(
          _ customPaymentMethodType: PaymentSheet.CustomPaymentMethodConfiguration.CustomPaymentMethod,
          _ billingDetails: STPPaymentMethodBillingDetails
     ) async -> PaymentSheetResult {// Your implementation needs to complete the payment with the payment method provider
        // When the payment completes, cancels, or fails, return the result.
        // Note you can present on top of PaymentSheet by using the `self.presentedViewController`.
        // This example code just immediately fails:
        let exampleError = NSError(domain: "MyErrorDomain", code: 0, userInfo: [NSLocalizedDescriptionKey: "Failed to complete payment!"])
        return .failed(error: exampleError)
    }
}
```

#### PaymentSheet.FlowController

`PaymentSheet.FlowController` インスタンスで [confirm](https://stripe.dev/stripe-ios/stripepaymentsheet/documentation/stripepaymentsheet/paymentsheet/flowcontroller/confirm\(from:completion:\)) を呼び出し、顧客がカスタムの決済手段を選択すると、カスタムの決済手段を持つハンドラが呼び出され、シートで収集された請求情報が使用されます。

システムが (たとえば、カスタム決済手段のプロバイダーの SDK を使用して) 支払いを完了すると、支払いの結果 (`completed`、`canceled`、`failure(error:)`) を関数から返します。

```swift
import StripePaymentSheet

class MyCheckoutVC: UIViewController {
    func setUpPaymentSheet() {
        // ...
        var configuration = PaymentSheet.Configuration()
        let customPaymentMethod = PaymentSheet.CustomPaymentMethodConfiguration.CustomPaymentMethod(id: "cpmt_...",
                                                                                                              subtitle: "Optional subtitle")
        configuration.customPaymentMethodConfiguration = .init(customPaymentMethods: [customPaymentMethod],
                                                              customPaymentMethodConfirmHandler: handleCustomPaymentMethod(_:_:))
        // ...
    }

    func handleCustomPaymentMethod(
          _ customPaymentMethodType: PaymentSheet.CustomPaymentMethodConfiguration.CustomPaymentMethod,
          _ billingDetails: STPPaymentMethodBillingDetails
     ) async -> PaymentSheetResult {// Your implementation needs to complete the payment with the payment method provider
        // When the payment completes, cancels, or fails, return the result.
        // This example code just immediately fails:
        let exampleError = NSError(domain: "MyErrorDomain", code: 0, userInfo: [NSLocalizedDescriptionKey: "Failed to complete payment!"])
        return .failed(error: exampleError)
    }
}
```

## Optional: カスタムの決済手段の順序を指定

Stripe はカスタムの決済手段に関する情報を持たないため、Stripe のスマート注文ロジックが決済手段をランク付けすることはありません。デフォルトでは、Stripe がサポートしている決済手段の後に表示されます。`PaymentSheet.Configuration.paymentMethodOrder` を設定して、Mobile Payment Element にカスタムの決済手段を配置することが可能です。そのカスタム決済手段の後に続く Stripe がサポートしている決済手段は、引き続きインテリジェントにランク付けされます。

```swift
var configuration = PaymentSheet.Configuration()// Show cards first, followed by cpmt_, followed by all other payment methods
configuration.paymentMethodOrder = ["card", "cpmt_..."]
```

## 請求詳細を収集する

[Payment Sheet 設定の billingDetailsCollectionConfiguration](https://docs.stripe.com/payments/mobile/accept-payment.md?platform=ios#billing-details-collection) で、請求情報を収集できます。カスタムの決済手段は、デフォルトでは請求情報は収集されません。請求情報の収集を有効にするには、`CustomPaymentMethod` で `disableBillingDetailCollection` を `false` に設定します。

```swift
var customPaymentMethod = PaymentSheet.CustomPaymentMethodConfiguration.CustomPaymentMethod(id: "cpmt_...",
                                                                                                      subtitle: "Optional subtitle")customPaymentMethod.disableBillingDetailCollection = false
```

## 実装内容をテストする

1. 決済フローを実行し、Mobile Payment Element にカスタムの決済方法が表示されていることを確認します。この例では、カードの後の 2 番目の位置にカスタムの決済手段を設定しています。
1. カスタムの決済手段を選択します。
1. **今すぐ支払う**をクリックして、カスタムの決済手段の実装をテストします。システムが取引を完了し、支払い後のアクション (確認ページ、成功 / 失敗メッセージの表示など) がカスタムの決済手段で機能していることを確認します。

## Optional: Stripe アカウントへの支払いを記録する [サーバー側]

Stripe 以外でカスタムの決済手段の取引を処理している間も、Stripe アカウントに[取引の詳細を記録](https://docs.stripe.com/api/payment-record/report-payment/report.md)して、レポートの統合や、領収書の発行やレポートの作成などのバックオフィスワークフローの構築を行うことができます。

```javascript

// Don't put any keys in code. See https://docs.stripe.com/keys-best-practices.
const stripe = new Stripe('<<YOUR_SECRET_KEY>>', {
  apiVersion: '2026-04-22.dahlia; invoice_partial_payments_beta=v3'
});

app.get('/process-cpm-payment', async (req, res) => {
  const paymentResult = processMyCustomPayment(...)

  // Create an instance of a custom payment method
  const paymentMethod = await stripe.paymentMethods.create({
    type: 'custom',
    custom: {
      type: '{{CUSTOM_PAYMENT_METHOD_TYPE_ID}}', // ダッシュボードで作成されたカスタムの決済手段タイプの ID。
    }
  });

  // Report successful payment
  const paymentRecord = await stripe.paymentRecords.reportPayment({
    amount_requested: {
      value: paymentResult.amount,
      currency: paymentResult.currency
    },
    payment_method_details: {
      payment_method: paymentMethod.id
    },
    customer_details: {
      customer: paymentResult.customer.id
    },
    processor_details: {
      type: 'custom',
      custom: {
        payment_reference: paymentResult.id
      }
    },
    initiated_at: paymentResult.initiated_at,
    customer_presence: 'on_session',
    outcome: 'guaranteed',
    guaranteed: {
      guaranteed_at: paymentResult.completed_at
    }
  });

  // Respond to frontend to finish buying experience
  return res.json(...)
});

```


# Android

> This is a Android for when platform is android. View the full page at https://docs.stripe.com/payments/mobile/custom-payment-methods?platform=android.

## Before you begin

1. [Stripe アカウントを作成する](https://dashboard.stripe.com/register)か、[サインイン](https://dashboard.stripe.com/login)してください。
1. [Payment Sheet のサンプル](https://docs.stripe.com/payments/mobile/accept-payment.md?platform=android&type=payment)に従って、決済システムの構築を完了します。

## ダッシュボードでカスタムの決済手段を作成する [ダッシュボード]

**設定** > **Payments** > [Custom の決済手段](https://dashboard.stripe.com/settings/custom_payment_methods)に移動して、カスタムの決済手段のページにアクセスします。新しいカスタムの決済手段を作成し、Payment Element が表示する表示名とロゴを指定します。

#### 適切なロゴを選択

- 透明な背景のロゴを提供する場合は、ページの Payment Element の背景色を考慮して、ロゴがはっきりと表示されることを確認してください。
- 背景色が入ったロゴを指定する場合、丸い角は提供されないため、ファイルに含めるようにしてください。
- 16 ピクセル× 16 ピクセルに拡大縮小できるロゴのバリアントを選択します。多くの場合、これはブランドのスタンドアロンのロゴマークです。

カスタムの決済手段を作成すると、ステップ 2 で必要なカスタムの決済手段の ID (`cpmt_` で始まる) がダッシュボードに表示されます。

## カスタム決済手段タイプを追加する

`PaymentSheet.Configuration` オブジェクトを作成して `PaymentSheet` を初期化するときに、Mobile Payment Element に含めるカスタムの決済手段と、支払いを完了するためのハンドラを指定します。

```kotlin
import com.stripe.android.paymentsheet.PaymentSheet

@Composable
fun CheckoutScreen() {
    val paymentSheet = PaymentSheet.Builder { paymentResult ->
        when (paymentResult) {
            is PaymentSheetResult.Completed -> showToast("Payment complete!")
            is PaymentSheetResult.Canceled -> showToast("Payment canceled!")
            is PaymentSheetResult.Failed -> showToast(
                paymentResult.error.localizedMessage ?: paymentResult.error.message
            )
        }
    }.confirmCustomPaymentMethodCallback(viewModel.customPaymentMethodHandler)
        .build()

    Button(
        onClick = {val customPaymentMethod = PaymentSheet.CustomPaymentMethod(
                id = "cpmt_...",
                subtitle = "Optional subtitle"
            )

            val configuration = PaymentSheet.Configuration.Builder(merchantDisplayName = "Example, Inc.").customPaymentMethods(listOf(customPaymentMethod))
                .build()

            // Present Payment Sheet
            paymentSheet.presentWithPaymentIntent(paymentIntentClientSecret, configuration)
        }
    ) {
        Text("Show Payment Sheet")
    }
}
class CheckoutCustomPaymentMethodHandler(...) : ConfirmCustomPaymentMethodCallback {
    override fun onConfirmCustomPaymentMethod(
        customPaymentMethod: PaymentSheet.CustomPaymentMethod,
        billingDetails: PaymentMethod.BillingDetails
    ) {
        // ...explained in the next step
    }
}
```

## 支払いを完了する

#### PaymentSheet

顧客がカスタムの決済手段を使用して PaymentSheet の **支払う**ボタンをタップすると、カスタムの決済手段と収集された請求情報を持つハンドラが呼び出されます。

システムが (たとえば、カスタム決済手段のプロバイダーの SDK を使用して) 支払いを完了すると、支払いの結果を示す `CustomPaymentMethodResultHandler.onCustomPaymentMethodResult()` を呼び出します。

`CustomPaymentMethodResult.failed(displayMessage)` を渡すと、PaymentSheet に `displayMessage` が表示されます。

```kotlin
import com.stripe.android.paymentelement.ConfirmCustomPaymentMethodCallback

class CheckoutCustomPaymentMethodHandler(
    private val context: Context,
    /* Any other parameters required to complete payment. */
) : ConfirmCustomPaymentMethodCallback {
    override fun onConfirmCustomPaymentMethod(
        customPaymentMethod: PaymentSheet.CustomPaymentMethod,
        billingDetails: PaymentMethod.BillingDetails
    ) {/* Your implementation needs to complete the payment with the
         * payment method provider. When the payment completes, cancels,
         * or fails, call `CustomPaymentMethodResultHandler.handleCustomPaymentMethodResult`
         * with the result. This example code just immediately fails:
         */
        CustomPaymentMethodResultHandler.handleCustomPaymentMethodResult(
            context,
            CustomPaymentMethodResult.failed(displayMessage = "Failed to complete payment"),
        )
    }
}
```

#### PaymentSheet.FlowController

`PaymentSheet.FlowController` インスタンスで [confirm](https://stripe.dev/stripe-android/paymentsheet/com.stripe.android.paymentsheet/-payment-sheet/-flow-controller/confirm.html) を呼び出し、顧客がカスタムの決済手段を選択すると、カスタムの決済手段と収集された請求情報を持つハンドラが呼び出されます。

システムが (たとえば、カスタム決済手段のプロバイダーの SDK を使用して) 支払いを完了すると、支払いの結果を示す `CustomPaymentMethodResultHandler.handleCustomPaymentMethodResult()` を呼び出します。システムが支払いを確認せずに終了する場合は、キャンセルの結果を示す `CustomPaymentMethodResultHandler.handleCustomPaymentMethodResult` を呼び出すようにしてください。

```kotlin
import com.stripe.android.paymentelement.ConfirmCustomPaymentMethodCallback

class CheckoutCustomPaymentMethodHandler(
    private val context: Context,
    /* Any other parameters required to complete payment. */
) : ConfirmCustomPaymentMethodCallback {
    override fun onConfirmCustomPaymentMethod(
        customPaymentMethod: PaymentSheet.CustomPaymentMethod,
        billingDetails: PaymentMethod.BillingDetails
    ) {/* Your implementation needs to complete the payment with the
         * payment method provider. When the payment completes, cancels,
         * or fails, call `CustomPaymentMethodResultHandler.handleCustomPaymentMethodResult`
         * with the result. This example code just immediately fails:
         */
        CustomPaymentMethodResultHandler.handleCustomPaymentMethodResult(
            context,
            CustomPaymentMethodResult.failed(displayMessage = "Failed to complete payment"),
        )
    }
}
```

## Optional: カスタムの決済手段の順序を指定

カスタムの決済手段に関する情報がないため、Stripe のスマート注文ロジックは決済手段をランク付けできません。デフォルトでは、Stripe がサポートしている決済手段の後に表示されます。Mobile Payment Element にカスタムの決済手段を配置するには、`PaymentSheet.Configuration.paymentMethodOrder` を設定します。そのカスタム決済手段の後に続く Stripe がサポートしている決済手段は、引き続きインテリジェントにランク付けされます。

```kotlin
val configuration = PaymentSheet.Configuration.Builder("Powdur")// Show cards first, followed by cpmt_..., followed by all other payment methods
    .paymentMethodOrder(listOf("card", "cpmt_..."))
    .build()
```

## 請求詳細を収集する

[Payment Sheet 設定の billingDetailsCollectionConfiguration](https://docs.stripe.com/payments/mobile/accept-payment.md?platform=android#billing-details-collection) で、請求情報を収集できます。カスタムの決済手段は、デフォルトでは請求情報は収集されません。請求情報の収集を有効にするには、`CustomPaymentMethod` で `disableBillingDetailCollection` を `false` に設定します。

```kotlin
val customPaymentMethod = PaymentSheet.CustomPaymentMethod(
    id = "cpmt_...",
    subtitle = "Optional subtitle"
)customPaymentMethod.disableBillingDetailCollection = false
```

## 実装内容をテストする

1. 決済フローを実行し、Mobile Payment Element にカスタムの決済方法が表示されていることを確認します。この例では、カードの後の 2 番目の位置にカスタムの決済手段を設定しています。
1. カスタムの決済手段を選択します。
1. **今すぐ支払う**をクリックして、カスタムの決済手段の実装をテストします。システムが取引を完了し、支払い後のアクション (確認ページ、成功 / 失敗メッセージの表示など) がカスタムの決済手段で機能していることを確認します。

## Optional: Stripe アカウントへの支払いを記録する [サーバー側]

Stripe 以外でカスタムの決済手段の取引を処理している間も、Stripe アカウントに[取引の詳細を記録](https://docs.stripe.com/api/payment-record/report-payment/report.md)して、レポートの統合や、領収書の発行やレポートの作成などのバックオフィスワークフローの構築を行うことができます。

```javascript

// Don't put any keys in code. See https://docs.stripe.com/keys-best-practices.
const stripe = new Stripe('<<YOUR_SECRET_KEY>>', {
  apiVersion: '2026-04-22.dahlia; invoice_partial_payments_beta=v3'
});

app.get('/process-cpm-payment', async (req, res) => {
  const paymentResult = processMyCustomPayment(...)

  // Create an instance of a custom payment method
  const paymentMethod = await stripe.paymentMethods.create({
    type: 'custom',
    custom: {
      type: '{{CUSTOM_PAYMENT_METHOD_TYPE_ID}}', // ダッシュボードで作成されたカスタムの決済手段タイプの ID。
    }
  });

  // Report successful payment
  const paymentRecord = await stripe.paymentRecords.reportPayment({
    amount_requested: {
      value: paymentResult.amount,
      currency: paymentResult.currency
    },
    payment_method_details: {
      payment_method: paymentMethod.id
    },
    customer_details: {
      customer: paymentResult.customer.id
    },
    processor_details: {
      type: 'custom',
      custom: {
        payment_reference: paymentResult.id
      }
    },
    initiated_at: paymentResult.initiated_at,
    customer_presence: 'on_session',
    outcome: 'guaranteed',
    guaranteed: {
      guaranteed_at: paymentResult.completed_at
    }
  });

  // Respond to frontend to finish buying experience
  return res.json(...)
});

```


# React Native

> This is a React Native for when platform is react-native. View the full page at https://docs.stripe.com/payments/mobile/custom-payment-methods?platform=react-native.

## Before you begin

1. [Stripe アカウントを作成する](https://dashboard.stripe.com/register)か、[サインイン](https://dashboard.stripe.com/login)してください。
1. [Payment Sheet の例](https://docs.stripe.com/payments/mobile/accept-payment.md?platform=react-native&type=payment)に従って、決済機能の統合を完了してください。

## ダッシュボードでカスタムの決済手段を作成する [ダッシュボード]

**設定** > **Payments** > [Custom の決済手段](https://dashboard.stripe.com/settings/custom_payment_methods)に移動して、カスタムの決済手段のページにアクセスします。新しいカスタムの決済手段を作成し、Payment Element が表示する表示名とロゴを指定します。

#### 適切なロゴを選択

- 透明な背景のロゴを提供する場合は、ページの Payment Element の背景色を考慮して、ロゴがはっきりと表示されることを確認してください。
- 背景色が入ったロゴを指定する場合、丸い角は提供されないため、ファイルに含めるようにしてください。
- 16 ピクセル× 16 ピクセルに拡大縮小できるロゴのバリアントを選択します。多くの場合、これはブランドのスタンドアロンのロゴマークです。

カスタムの決済手段を作成すると、ステップ 2 で必要なカスタムの決済手段の ID (`cpmt_` で始まる) がダッシュボードに表示されます。

## カスタム決済手段タイプを追加する

PaymentSheet を初期化するときに、モバイル支払い Element に含める Custom 支払い方法と、決済を完了するためのハンドラーを指定します。

```javascript
import { useStripe } from '@stripe/stripe-react-native';
import type {
  BillingDetails,
  CustomPaymentMethod,
  CustomPaymentMethodResult,
  CustomPaymentMethodResultStatus,
  ConfirmCustomPaymentMethodCallback,
} from '@stripe/stripe-react-native';

export default function CheckoutScreen() {
  const { initPaymentSheet } = useStripe();

  const initializePaymentSheet = async () => {const customPaymentMethod: CustomPaymentMethod = {
      id: 'cpmt_...',
      subtitle: Optional subtitle,
    };

    const { error } = await initPaymentSheet({
      // ... other configuration optionscustomPaymentMethodConfiguration: {
        customPaymentMethods: [customPaymentMethod],
        confirmCustomPaymentMethodCallback: handleCustomPaymentMethod,
      },
    });
    if (error) {
      // handle error
    }
  };
const handleCustomPaymentMethod: ConfirmCustomPaymentMethodCallback = (
    customPaymentMethod: CustomPaymentMethod,
    billingDetails: BillingDetails | null,
    resultHandler: (result: CustomPaymentMethodResult) => void
  ) => {
    // ...explained in the next step
  };
}
```

## 支払いを完了する

顧客が PaymentSheet で Custom 支払い方法を使用して**支払う**をタップすると、Custom 支払い方法と徴収した請求詳細と共にハンドラーを呼び出します。

実装は支払いを完了し (たとえば、カスタム決済手段の提供業者の SDK を使用)、支払い結果 (`Completed`、`Canceled`、または `Failed`) と共に `resultHandler` を呼び出します。

エラーメッセージとともに `Failed` を渡すと、PaymentSheet にエラーメッセージが表示されます。

```javascript
import { Alert } from 'react-native';
import { useStripe } from '@stripe/stripe-react-native';
import type {
  BillingDetails,
  CustomPaymentMethod,
  CustomPaymentMethodResult,
  CustomPaymentMethodResultStatus,
  ConfirmCustomPaymentMethodCallback,
} from '@stripe/stripe-react-native';

export default function CheckoutScreen() {
  const { initPaymentSheet } = useStripe();

  const initializePaymentSheet = async () => {
    const customPaymentMethod: CustomPaymentMethod = {
      id: 'cpmt_...',
      subtitle: Optional subtitle,
    };

    const { error } = await initPaymentSheet({
      // ... other configuration options
      customPaymentMethodConfiguration: {
        customPaymentMethods: [customPaymentMethod],
        confirmCustomPaymentMethodCallback: handleCustomPaymentMethod,
      },
    });
    if (error) {
      // handle error
    }
  };

  const handleCustomPaymentMethod: ConfirmCustomPaymentMethodCallback = (
    customPaymentMethod: CustomPaymentMethod,
    billingDetails: BillingDetails | null,
    resultHandler: (result: CustomPaymentMethodResult) => void
  ) => {// Your implementation needs to complete the payment with the payment method provider
    // When the payment completes, cancels, or fails, call resultHandler with the result.
    // This example code shows an alert for demonstration:
    Alert.alert(
      'Custom Payment Method',
      `Processing payment with ${customPaymentMethod.id}`,
      [
        {
          text: 'Success',
          onPress: () => resultHandler({ status: CustomPaymentMethodResultStatus.Completed }),
        },
        {
          text: 'Fail',
          style: 'destructive',
          onPress: () => resultHandler({ 
            status: CustomPaymentMethodResultStatus.Failed, 
            error: 'Failed to complete payment!' 
          }),
        },
        {
          text: 'Cancel',
          style: 'cancel',
          onPress: () => resultHandler({ status: CustomPaymentMethodResultStatus.Canceled }),
        },
      ]
    );
  };
}
```

## Optional: カスタムの決済手段の順序を指定

Stripeのスマートな注文ロジックはカスタム支払い方法のコンテキストがないため、支払い方法をランク付けできません。デフォルトでは、Stripe サポート支払い方法の後に表示されます。モバイル決済 Element に Custom 支払い方法を明示的に配置するには、PaymentSheet 設定で `paymentMethodOrder` を設定します。注文ロジックでは、Stripe がサポートする支払い方法は Custom 支払い方法の次にランク付けされます。

```javascript
const { error } = await initPaymentSheet({
  // ... other configuration options// Show cards first, followed by cpmt_..., followed by all other payment methods
  paymentMethodOrder: ['card', 'cpmt_...'],
  customPaymentMethodConfiguration: {
    customPaymentMethods: [customPaymentMethod],
    confirmCustomPaymentMethodCallback: handleCustomPaymentMethod,
  },
});
```

## 請求詳細を収集する

[PaymentSheet設定のdefaultBillingDetails](https://docs.stripe.com/payments/mobile/accept-payment.md?platform=react-native#billing-details-collection)を使用して請求詳細を徴収できます。ただし、Custom支払い方法はデフォルトでは請求詳細を徴収しません。請求詳細回収を有効にするには、`CustomPaymentMethod` で `disableBillingDetailCollection` を `false` に設定します。

```javascript
const customPaymentMethod: CustomPaymentMethod = {
  id: 'cpmt_...',
  subtitle: Optional subtitle,disableBillingDetailCollection: false,
};
```

## 実装内容をテストする

1. 決済フローを実行し、Mobile Payment Element にカスタムの決済方法が表示されていることを確認します。この例では、カードの後の 2 番目の位置にカスタムの決済手段を設定しています。
1. カスタムの決済手段を選択します。
1. **今すぐ支払う**をクリックして、カスタムの決済手段の実装をテストします。システムが取引を完了し、支払い後のアクション (確認ページ、成功 / 失敗メッセージの表示など) がカスタムの決済手段で機能していることを確認します。

## Optional: Stripe アカウントへの支払いを記録する [サーバー側]

Stripe 以外でカスタムの決済手段の取引を処理している間も、Stripe アカウントに[取引の詳細を記録](https://docs.stripe.com/api/payment-record/report-payment/report.md)して、レポートの統合や、領収書の発行やレポートの作成などのバックオフィスワークフローの構築を行うことができます。

```javascript

// Don't put any keys in code. See https://docs.stripe.com/keys-best-practices.
const stripe = new Stripe('<<YOUR_SECRET_KEY>>', {
  apiVersion: '2026-04-22.dahlia; invoice_partial_payments_beta=v3'
});

app.get('/process-cpm-payment', async (req, res) => {
  const paymentResult = processMyCustomPayment(...)

  // Create an instance of a custom payment method
  const paymentMethod = await stripe.paymentMethods.create({
    type: 'custom',
    custom: {
      type: '{{CUSTOM_PAYMENT_METHOD_TYPE_ID}}', // ダッシュボードで作成されたカスタムの決済手段タイプの ID。
    }
  });

  // Report successful payment
  const paymentRecord = await stripe.paymentRecords.reportPayment({
    amount_requested: {
      value: paymentResult.amount,
      currency: paymentResult.currency
    },
    payment_method_details: {
      payment_method: paymentMethod.id
    },
    customer_details: {
      customer: paymentResult.customer.id
    },
    processor_details: {
      type: 'custom',
      custom: {
        payment_reference: paymentResult.id
      }
    },
    initiated_at: paymentResult.initiated_at,
    customer_presence: 'on_session',
    outcome: 'guaranteed',
    guaranteed: {
      guaranteed_at: paymentResult.completed_at
    }
  });

  // Respond to frontend to finish buying experience
  return res.json(...)
});

```