Stripe Payment Element

Payment Element は、40 以上の決済手段を受け付け、入力内容を検証し、エラーに対処する、ウェブのための UI コンポーネントです。単独で使用するか、ウェブアプリのフロントエンドの他の Element とともに使用します。

Compatible APIs

Stripe offers two core payments APIs compatible with Elements that give you the flexibility to accept various types of payments from your customers. You can integrate these APIs into Stripe’s prebuilt payment interfaces. While we recommend using Checkout Sessions for most users, the APIs serve slightly different use cases depending on how you choose to structure your checkout flow and how much control you require. You can build a checkout page with the Checkout Session API or build an advanced integration with the Payment Intents API.

• The Checkout Sessions API allows you to model your customer’s checkout flow. This includes the line items included in their purchase, billing and shipping addresses, applicable tax rates, and coupons or discounts. The Checkout Session allows you to create subscriptions, calculate tax rates with Stripe Tax, and initiate payments.
• The Payment Intents API allows you to model the payments step. Unlike the Checkout Sessions API, which requires line item details, you only pass in the final amount you want to charge. This is suitable for payment flows, such as off-session payments. If you want to use Stripe to calculate applicable taxes or create subscriptions, you must integrate with the Stripe Tax API or Subscriptions API, respectively.

Elements を組み合わせる

Payment Element はその他の Element と連携します。たとえば、このフォームは支払い情報の自動入力に 1 つの追加エレメント、配送先住所の収集にもう 1 つの追加エレメントを使用しています。

この例の全体のコードについては、Elementsの組み込みに Link を追加する をご覧ください。

Payment Element を Express Checkout Element と組み合わせることもできます。この場合、Apple Pay や Google Pay などのウォレットの支払い方法は、重複を避けるために Express Checkout Element でのみ表示されます。

支払い方法

Stripe は、特定の支払い方法をデフォルトで有効にします。また、通知後に追加の支払い方法を有効にする場合があります。ダッシュボードを使用すると、いつでも支払い方法を有効または無効にできます。Payment Elemen では、動的な支払い方法を使用して以下を行うことができます。

• ダッシュボードを使用してノーコードで支払い方法を管理する
• 所在地、通貨、取引金額などの要素に基づいて、最も関連性の高い支払いオプションを動的に表示する

たとえば、ドイツの顧客が EUR で支払う場合、EUR を受け付ける有効なすべての支払い方法が、ドイツで広く普及しているものから順に表示されます。

顧客への関連性の高い順に支払い方法を表示する

サポートしないカードブランドをフィルタリングするなど、決済手段の表示方法をさらにカスタマイズしたい場合は、決済手段のカスタマイズをご覧ください。Stripe 外で連携した決済手段を追加する場合、カスタムの決済手段を使用できます。

貴社で構築済みの Stripe システムで支払い方法を手動で一覧表示する必要がある場合は、支払い方法を手動でリストアップするをご覧ください。

レイアウト

決済フローに合わせて Payment Element のレイアウトをカスタマイズできます。以下の画像は、同じ Payment Element を異なるレイアウト設定を使用して描写した場合を示しています。

さまざまなレイアウトの Payment Element。

const stripe = Stripe(
'pk_test_TYooMQauvdEDq54NiTphI7jx');

const appearance = { /* appearance */ };
const options = {
  layout: {
    type: 'tabs',
    defaultCollapsed: false,
  }
};

デザイン

Appearance API を使用して、すべての Elements のスタイルを管理します。テーマを選択するか、特定の詳細を更新します。

たとえば、「flat」のテーマを選択して、主要なテキストの色を上書きします。

const stripe = Stripe(
'pk_test_TYooMQauvdEDq54NiTphI7jx');

const appearance = {
  theme: 'flat',
  variables: { colorPrimaryText: '#262626' }
};

テーマと変数の一覧については、Appearance API のドキュメントをご覧ください。

オプション

Stripe Elements はこれより多くのオプションをサポートします。たとえば、business オプションを使用して、ビジネス名を表示します。

const stripe = Stripe(
'pk_test_TYooMQauvdEDq54NiTphI7jx');

const appearance = { /* appearance */};
const options = {
  business: { name: "RocketRides" }
};

Payment Element は以下のオプションをサポートします。詳細については、各オプションのリファレンス項目をご覧ください。

エラー

Payment Element は、次のエラーコードについて、クライアント確認中にローカライズされた顧客向けのエラーメッセージを自動的に表示します。

• generic_decline
• insufficient_funds
• incorrect_zip
• incorrect_cvc
• invalid_cvc
• invalid_expiry_month
• invalid_expiry_year
• expired_card
• fraudulent
• lost_card
• stolen_card
• card_velocity_exceeded

他のタイプのエラーのメッセージを表示するには、エラーコードおよびエラー処理を参照してください。