Link Authentication Element

Link は、顧客の決済と配送先の情報を保存して自動入力します。顧客は、クレジットカード、デビットカード、アメリカの銀行口座など、さまざまな資金供給元を使用して Link で支払うことができます。link.com で詳細をご覧ください。

Link Authentication Element を使用して、1 つでメールアドレスの収集と Link の認証の両方に対応するメールアドレス入力フィールドを作成します。

サンプルから開始する

実際の Link Authentication Element を確認するには、まず、以下のいずれかのサンプルをご覧ください。

はじめに

始める前に、ドメインを登録する必要があります。

Link Authentication Element を作成する

次のコードは、Link Authentication Element のインスタンスを作成して、DOM にマウントします。

// Enable the skeleton loader UI for the optimal loading experience.
const loader = 'auto';

// Create an elements group from the Stripe instance passing in the clientSecret and enabling the loader UI.
const elements = stripe.elements({clientSecret, loader});

// Create an instance of the Link Authentication Element.
const linkAuthenticationElement = elements.create("linkAuthentication");

// Mount the Elements to their corresponding DOM node
linkAuthenticationElement.mount("#link-authentication-element");
paymentElement.mount("#payment-element");

メールアドレスを取得する

linkAuthenticationElement コンポーネントの onChange プロパティーを使用して、メールアドレスの詳細を取得できます。ユーザーがメールアドレスフィールドを更新するか、保存された顧客のメールアドレスが自動入力されると、常に onChange ハンドラーが起動します。

linkAuthenticationElement.on('change', (event) => {
  const email = event.value.email;
});

顧客データを事前入力する

Link Authentication Element はメールアドレスを受け付けます。顧客のメールアドレスを指定することにより、顧客が defaultValues オプションを使用して支払いページに到達するとすぐに Link の認証フローが開始されます。

// Create the Link Authentication Element with the defaultValues option
const linkAuthenticationElement = elements.create("linkAuthentication", {defaultValues: {email: "foo@bar.com"}});

// Mount the Link Authentication Element to its corresponding DOM node
linkAuthenticationElement.mount("#link-authentication-element");

追加の顧客データを事前入力する場合、defaultValues.billingDetails オブジェクトを Payment Element に追加します。これにより、顧客の名前、電話番号、配送先住所が事前入力されます。できるだけ多くの顧客の情報を事前入力すると、Link アカウントの作成と再利用を効率化できます。

次のコードは、すべての値が事前入力された Payment Element を示しています。

<PaymentElement
  options={{
    defaultValues: {
      billingDetails: {
        name: 'John Doe',
        phone: '888-888-8888',
        address: {
          postal_code: '10001',
          country: 'US',
        }
      },
    },
  }}
/>;

Elements を組み合わせる

Link Authentication Element は、リピートユーザーが支払い情報を事前入力することによってのみ Payment Element とやり取りします。ただし、Link Authentication Element、Address Element、Payment Element を使用した以下の例のように、他の Element と共に表示することもできます。

Link Authentication Element を他の Elements とともに使用して決済ページを構成する

デザイン

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

Appearance API を使用して、Elements の表示とスタイルを変更する

次の例では、「flat」のテーマで Element に使用されるデフォルトのテキストの色を上書きします。

const stripe = Stripe(
'pk_test_TYooMQauvdEDq54NiTphI7jx');

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