アプリ内決済を受け付ける

PaymentSheet では、今後の支払いのためにこのカードを保存するチェックボックスを表示して顧客のカードを保存し、保存済みのカードを表示できます。このチェックボックスを有効にするには、サーバーで Customer (顧客) オブジェクトと、関連する一時キーを作成します。

const stripe = require('stripe')('sk_test_your_secret_key');

app.post('/mobile-payment-element', async (req, res) => {
  // Use an existing Customer ID if this is a returning customer.
  const customer = await stripe.customers.create();
  const ephemeralKey = await stripe.ephemeralKeys.create(
    {customer: customer.id},
    {apiVersion: '2020-08-27'}
  );

  res.json({
    ephemeralKey: ephemeralKey.secret,
    customer: customer.id,
  });
});

次に、顧客の ID と一時キーの client secret を指定して PaymentSheet を設定します。

var configuration = PaymentSheet.Configuration()
configuration.customer = .init(id: customerId, ephemeralKeySecret: customerEphemeralKeySecret)

self.paymentSheet = PaymentSheet(..., configuration: configuration)

遅延型の決済手段では、購入の終了時に顧客から売上を受け取ることが保証されません。これは、決済に時間がかかる (アメリカの銀行口座、SEPA デビット、iDEAL、Bancontact など) 場合や、完了に顧客の対応を必要とする (OXXO、コンビニ決済、Boleto など) 場合があるためです。

デフォルトの場合、PaymentSheet には遅延型の決済手段は表示されません。オプトインするには、PaymentSheet.Configuration で allowsDelayedPaymentMethods を true に設定します。このステップのみでは、特定の決済手段を有効にすることはできませんが、アプリがその決済手段に対応できることが示されます。たとえば、OXXO は PaymentSheet でサポートされていませんが、サポートされるようになり、最新の SDK バージョンに更新すると、実装に関する追加の変更なしで、アプリに OXXO を決済オプションとして表示でます。

var configuration = PaymentSheet.Configuration()
configuration.allowsDelayedPaymentMethods = true

self.paymentSheet = PaymentSheet(..., configuration: configuration)

顧客がいずれかの遅延型の支払い方法を PaymentSheet で正常に使用すると、.completed の支払い結果が返されます。

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 を追加する

var configuration = PaymentSheet.Configuration()
configuration.applePay = .init(
  merchantId: "merchant.com.your_app_name",
  merchantCountryCode: "US"
)

注文の追跡

iOS 16 以降で注文の追跡情報を追加するには、PaymentSheet.ApplePayConfiguration.Handlers で authorizationResultHandler を設定します。支払いの完了後、Stripe は iOS が Apple Pay の決済画面を閉じる前に実装を呼び出します。

authorizationResultHandler の実装で、完了した注文の詳細をサーバーから取得します。この詳細を、指定された PKPaymentAuthorizationResult に追加して、指定された完了ハンドラーを呼び出します。

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

let customHandlers = PaymentSheet.ApplePayConfiguration.Handlers(
    authorizationResultHandler: { result, completion in
        // Fetch the order details from your service
        MyAPIClient.shared.fetchOrderDetails(orderID: orderID) { myOrderDetails
            result.orderDetails = PKPaymentOrderDetails(
                orderTypeIdentifier: myOrderDetails.orderTypeIdentifier, // "com.myapp.order"
                orderIdentifier: myOrderDetails.orderIdentifier, // "ABC123-AAAA-1111"
                webServiceURL: myOrderDetails.webServiceURL, // "https://my-backend.example.com/apple-order-tracking-backend"
                authenticationToken: myOrderDetails.authenticationToken) // "abc123"
            // Call the completion block on the main queue with your modified PKPaymentAuthorizationResult
            completion(result)
        }
    }
)
var configuration = PaymentSheet.Configuration()
configuration.applePay = .init(merchantId: "merchant.com.your_app_name",
                               merchantCountryCode: "US",
                               customHandlers: customHandlers)

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

カスタマイズはすべて、PaymentSheet.Configuration オブジェクトで設定されます。

デザイン

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

決済手段のレイアウト

paymentMethodLayout を使用して、画面上の決済手段のレイアウトを設定します。横や縦に表示することも、Stripe がレイアウトを自動で最適化するように設定することもできます。

var configuration = PaymentSheet.Configuration()
configuration.paymentMethodLayout = .automatic

ユーザーの住所を収集する

Address Element を使用して、顧客から国内および国外の配送先住所や請求先住所を収集します。

加盟店の表示名

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

var configuration = PaymentSheet.Configuration()
configuration.merchantDisplayName = "My app, Inc."

ダークモード

PaymentSheet は、ユーザーのシステム全体の表示設定 (ライト / ダークモード) に合わせて自動的に調整されます。アプリがダークモードに対応していない場合は、style を alwaysLight または alwaysDark モードに設定できます。

var configuration = PaymentSheet.Configuration()
configuration.style = .alwaysLight

デフォルトの請求詳細

支払い画面で収集される請求詳細のデフォルト値を設定するには、defaultBillingDetails プロパティーを設定します。PaymentSheet の各フィールドに、指定したそれらの値が事前に読み込まれます。

var configuration = PaymentSheet.Configuration()
configuration.defaultBillingDetails.address.country = "US"
configuration.defaultBillingDetails.email = "foo@bar.com"

請求の詳細の収集

billingDetailsCollectionConfiguration を使用して、決済画面で請求の詳細を収集する方法を指定します。

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

支払い方法で必須の請求詳細のみを収集する場合は、billingDetailsCollectionConfiguration.attachDefaultsToPaymentMethod を true に設定します。その場合、PaymentSheet.Configuration.defaultBillingDetails が支払い方法の請求詳細として設定されます。

支払い方法で必ずしも必須ではない追加の請求詳細を収集する場合は、billingDetailsCollectionConfiguration.attachDefaultsToPaymentMethod を false に設定します。 その場合、PaymentSheet で収集した請求詳細が支払い方法の請求詳細として設定されます。

var configuration = PaymentSheet.Configuration()
configuration.defaultBillingDetails.email = "foo@bar.com"
configuration.billingDetailsCollectionConfiguration.name = .always
configuration.billingDetailsCollectionConfiguration.email = .never
configuration.billingDetailsCollectionConfiguration.address = .full
configuration.billingDetailsCollectionConfiguration.attachDefaultsToPaymentMethod = true

PaymentIntent の確定時に、保存されたカードのセキュリティコードを再収集する次の手順は、実装システムに以下が含まれていることを前提としています。

• PaymentIntent を作成する前の決済の詳細の収集
• クライアント側での確定

import StripePaymentSheet

class MyCheckoutVC: UIViewController {
  func didTapCheckoutButton() {
    let intentConfig = PaymentSheet.IntentConfiguration(
      mode: .payment(amount: 1099, currency: "USD"),
      confirmHandler: { [weak self] _, _, intentCreationCallback in
        self?.handleConfirm(intentCreationCallback)
      }, requireCVCRecollection: true)
    var configuration = PaymentSheet.Configuration()
    configuration.returnURL = "your-app://stripe-redirect" // Use the return url you set up in the previous step

    let paymentSheet = PaymentSheet(intentConfiguration: intentConfig, configuration: configuration)
    paymentSheet.present(from: self) { result in
      // ... Same as before
    }
  }
}

インテント作成のパラメーターを更新する

支払いの確定時にセキュリティコードを再収集するには、PaymentIntent の作成時に customerId パラメーターと require_cvc_recollection パラメーターの両方を含めます。

require 'stripe'
Stripe.api_key = 
'sk_test_BQokikJOvBiI2HlWgH4olfQ2'

post '/create-intent' do
  data = JSON.parse request.body.read
  params = {
    amount: 1099,
    currency: 'usd',
    # In the latest version of the API, specifying the `automatic_payment_methods` parameter is optional because Stripe enables its functionality by default.
    automatic_payment_methods: {enabled: true},
    customer: customer.id,
    payment_method_options: {
      card: {require_cvc_recollection: true}
    }
  }
  begin
    intent = Stripe::PaymentIntent.create(params)
    {client_secret: intent.client_secret}.to_json
  rescue Stripe::StripeError => e
    {error: e.error.message}.to_json
  end
end