支払いと送金別方式を作成する

Apple 加盟店 ID を登録する

Apple Developer Web サイトで 新規 ID を登録 して、Apple 加盟店 ID を取得します。

フォームに説明と ID を入力します。説明はお客様の記録用であり、後で変更できます。アプリの名前を ID として使用することをお勧めします (merchant.com.{{YOUR_APP_NAME}} など)。

新しい Apple Pay 証明書を作成する

支払いデータを暗号化するためのアプリの証明書を作成します。

ダッシュボードの iOS certificate settings (iOS 証明書の設定) に移動して、新規アプリケーションを追加をクリックし、表示されるガイドに従います。

証明書署名リクエスト (CSR) ファイルをダウンロードして、Apple Pay の利用を可能にする安全な証明書を Apple から取得します。

1 つの CSR ファイルを使用して証明書を 1 つだけ発行する必要があります。Apple 加盟店 ID を切り替えた場合、ダッシュボードの iOS Certificate Settings (iOS 証明書の設定) に移動して、新しい CSR と証明書を取得する必要があります。

Xcode を使用して組み込む

Apple Pay ケイパビリティをアプリに追加します。Xcode でプロジェクト設定を開き、Signing & Capabilities (署名およびケイパビリティ) タブを選択して、Apple Pay ケイパビリティを追加します。この段階で開発者アカウントへのログインを要求される場合があります。前の手順で作成した加盟店 ID を選択すると、アプリで Apple Pay を受け付けられるようになります。

Xcode で Apple Pay ケイパビリティを有効化する

Apple Pay を追加する

import { StripeProvider } from '@stripe/stripe-react-native';

function App() {
  return (
    <StripeProvider
      publishableKey=
"pk_test_TYooMQauvdEDq54NiTphI7jx"
      merchantIdentifier="MERCHANT_ID"
    >
      // Your app code here
    </StripeProvider>
  );
}

await initPaymentSheet({
  // ...
  applePay: {
    merchantCountryCode: 'US',
  },
});

注文の追跡

iOS 16 以降で注文の追跡情報を追加するには、setOrderTracking コールバック関数を設定します。Stripe は決済の完了後、iOS が Apple Pay 支払い画面を閉じる前にご使用の実装を呼び出します。

setOrderTracking コールバック関数の実装で、完了した注文の注文の詳細をサーバーから取得し、指定された completion 関数にその詳細を渡します。

注文の追跡の詳細については、Apple のウォレットでの注文に関するドキュメントをご覧ください。

await initPaymentSheet({
  // ...
  applePay: {
    // ...
    setOrderTracking: async complete => {
      const apiEndpoint =
        Platform.OS === 'ios'
          ? 'http://localhost:4242'
          : 'http://10.0.2.2:4567';
      const response = await fetch(
        `${apiEndpoint}/retrieve-order?orderId=${orderId}`,
        {
          method: 'GET',
          headers: {
            'Content-Type': 'application/json',
          },
        },
      );
      if (response.status === 200) {
        const orderDetails = await response.json();
        // orderDetails should include orderIdentifier, orderTypeIdentifier,
        // authenticationToken and webServiceUrl
        complete(orderDetails);
      }
    },
  },
});

実装方法を設定する

Google Pay を使用するには、まず以下を AndroidManifest.xml の <application> に追加し、Google Pay API を有効化します。

<application>
  ...
  <meta-data
    android:name="com.google.android.gms.wallet.api.enabled"
    android:value="true" />
</application>

詳細は、Google Pay の Android 向け Google Pay API を設定する を参照してください。

Google Pay を追加する

PaymentSheet を初期化する際に、merchantCountryCode にビジネスの国コードを設定し、googlePay を true に設定します。

testEnv パラメーターを渡して、テスト環境を使用することもできます。Google Pay は、物理的な Android デバイスでのみテストできます。React Native ドキュメントに従って、物理デバイスでアプリケーションをテストします。

const { error, paymentOption } = await initPaymentSheet({
  // ...
  googlePay: {
    merchantCountryCode: 'US',
    testEnv: true, // use test environment
  },
});

カードのスキャンサポートを有効にするには、アプリケーションの Info.plist で NSCameraUsageDescription (Privacy - Camera Usage Description (プライバシー - カメラの使用に関する記述)) を設定し、カメラにアクセスする理由を入力します (「To scan cards (カードのスキャンのため)」など)。カードのスキャンは、iOS 13 以降のデバイスでサポートされます。

カスタマイズはすべて initPaymentSheet を使用して設定されます。

デザイン

Appearance API を使用して、アプリのデザインに合うように色やフォントなどをカスタマイズします。

加盟店の表示名

merchantDisplayName を設定し、顧客に対して表示するビジネス名を指定します。デフォルトはアプリ名です。

await initPaymentSheet({
  // ...
  merchantDisplayName: 'Example Inc.',
});

ダークモード

デフォルトで PaymentSheet は、ユーザーのシステム全体の表示設定 (ライト/ダークモード) に合わせて自動的に調整されます。これを変更するには、 iOS で style プロパティを alwaysLight モードまたは alwaysDark モードに設定します。

await initPaymentSheet({
  // ...
  style: 'alwaysDark',
});

Android では、アプリでライトモードまたはダークモードに設定します。

// force dark
AppCompatDelegate.setDefaultNightMode(AppCompatDelegate.MODE_NIGHT_YES)
// force light
AppCompatDelegate.setDefaultNightMode(AppCompatDelegate.MODE_NIGHT_NO)

デフォルトの請求詳細

PaymentSheet で収集される請求先情報のデフォルト値を設定するには、defaultBillingDetails プロパティを設定します。PaymentSheet の各フィールドに、指定した値が事前に読み込まれます。

await initPaymentSheet({
  // ...
  defaultBillingDetails: {
      email: 'foo@bar.com',
      address: {
        country: 'US',
      },
  },
});

請求詳細を収集する

billingDetailsCollectionConfiguration を使用して、PaymentSheet で請求先情報を収集する方法を指定します。

顧客の名前、メールアドレス、電話番号、住所を収集できます。

支払い方法に必要な値を収集しない場合は、以下を実行する必要があります。

1. PaymentSheet によって収集されない値を defaultBillingDetails プロパティに関連付けます。
2. billingDetailsCollectionConfiguration.attachDefaultsToPaymentMethod を true に設定します。

await initPaymentSheet({
  // ...
  defaultBillingDetails: {
    email: 'foo@bar.com',
  }
  billingDetailsCollectionConfiguration: {
    name: PaymentSheet.CollectionMode.ALWAYS,
    email: PaymentSheet.CollectionMode.NEVER,
    address: PaymentSheet.AddressCollectionMode.FULL,
    attachDefaultsToPaymentMethod: true
  },
});

支払い画面を表示して支払い方法の詳細のみを収集し、その後 confirm メソッドを呼び出して、アプリの UI で支払いを完了できます。これは、カスタムの購入ボタンがある場合や、支払いの詳細を収集した後で追加のステップが必要な場合に便利です。

1. まず initPaymentSheet を呼び出し、customFlow: true を渡します。initPaymentSheet は、顧客の支払い方法を示す画像とラベルが格納された、最初の支払いオプションで解決されます。これらの詳細で UI を更新します。

const {
  initPaymentSheet,
  presentPaymentSheet,
  confirmPaymentSheetPayment,
} = useStripe()

const { error, paymentOption } = await initPaymentSheet({
  customerId: customer,
  customerEphemeralKeySecret: ephemeralKey,
  paymentIntentClientSecret: paymentIntent,
  customFlow: true,
  merchantDisplayName: 'Example Inc.',
});
// Update your UI with paymentOption

1. presentPaymentSheet を使用して支払いの詳細を収集します。顧客が操作を完了すると、シートは自動的に閉じられ、promise が解決されます。UI は選択された支払い方法の詳細で更新されます。

const { error, paymentOption } = await presentPaymentSheet();

1. confirmPaymentSheetPayment を使用し、支払いを確定します。これは、支払いの結果で解決されます。

const { error } = await confirmPaymentSheetPayment();

if (error) {
  Alert.alert(`Error code: ${error.code}`, error.message);
} else {
  Alert.alert(
    'Success',
    'Your order is confirmed!'
  );
}

allowsDelayedPaymentMethods を true に設定すると、アメリカの銀行口座などの 遅延通知型の支払い方法を使用できます。これらの支払い方法では、PaymentSheet が完了した時点では最終的な支払いステータスが判明せず、後になって成功または失敗が確定します。このようなタイプの支払い方法に対応する場合は、注文が確定済みであることを顧客に通知し、支払いが成功した場合にのみ注文のフルフィルメント (商品の発送など) を実行するようにします。

ダッシュボードの連結アカウントの支払い方法を管理するに移動して、連結アカウントで対応する支払い方法を設定します。デフォルトの設定に対する変更は、新規および既存のすべての連結アカウントに適用されます。

支払い方法の情報に関する次のリソースをご覧ください。

• 支払い方法ガイドは、プラットフォームに適した支払い方法の選択に役立ちます。
• アカウントのケイパビリティ を使用して、選択した決済手段が連結アカウントで機能することを確認します。
• 決済手段と製品サポートの表を参照して、選択した決済手段が使用中の Stripe プロダクトと決済フローで機能することを確認します。

支払い方法ごとに、次のいずれかのドロップダウンオプションを選択できます。

支払い方法のオプション

支払い方法を変更した場合は、画面下部のバーにある変更を確認をクリックし、保存して適用をクリックして、連結アカウントを更新する必要があります。

保存ダイアログ

連結アカウントによる支払い方法の管理を許可する

Stripe では、連結アカウントが自身の支払い方法をカスタマイズできるようにすることをお勧めしています。このオプションを有効にすると、Stripe ダッシュボードにアクセスできる各連結アカウントは、支払い方法ページを表示および更新できるようになります。Stripe ダッシュボードには、新規および既存のすべての連結アカウントに対して適用される支払い方法のデフォルトのセットが表示されます。連結アカウントは、お客様がブロックした支払い方法を除き、これらのデフォルトを上書きできます。

このオプションを有効にするには、アカウントのカスタマイズチェックボックスを選択します。画面下部のバーにある変更を確認をクリックし、保存して適用をクリックして、この設定を更新する必要があります。

アカウントのカスタマイズのチェックボックス

支払い方法ケイパビリティ

連結アカウントが追加の支払い方法を受け付けられるようにするには、連結アカウントが有効な各支払い方法のケイパビリティを設定していることを確認する必要があります。ほとんどの支払い方法には、card_payments ケイパビリティと同じ確認要件が適用されますが、いくつかの制限と例外があります。支払い方法ケイパビリティのテーブルには、カードの追加確認が必要な支払い方法のリストが記載されています。