Stripe Link入門: 迅速かつセキュアな決済手段を、数行のコードで実現する方法

この記事では、Stripeが提供するシンプルかつセキュアな決済手段 Link を決済フォームに導入し、テストする方法を紹介します。Linkによる支払いをサポートすることで、顧客はクレジットカード情報を入力することなく、支払いフローを完了させることができます。決済体験をスムーズにすることで、決済フォームでのカゴ落ちを防止でき、コンバージョン率（ CVR ）の向上や、それに伴う売り上げの増加が期待できます。

実装に必要なコードの量もとても少なく、テスト環境を使った決済体験のテストや、表示非表示の制御もとても簡単です。この記事とサンプルコードを元に、少ない手間で実現できる新しいCVR改善・売り上げ向上施策のアイディアをお試しください。

Linkとは

Linkは、Stripeが提供する支払いサービスです。Linkにクレジットカード情報を保存することで、顧客はECサイトやウェブサービスの支払いフォームにカード情報を入力することなく決済やサブスクリプション申し込みを完了できます。

Linkの特徴は、Stripeの決済フォームやリンクを採用していて、Linkを有効化しているサービスであればどこでも保存したクレジットカード情報を使えることです。そのため、例えばOpen AI社のChat GPT Proに申し込みした後、Anthropic社が提供するClaude Proを申し込もうとした場合にも、Linkで保存した支払い情報を利用して簡単に決済を完了できます。

Linkを導入することでカゴ落ちのリスクを減らし、コンバージョン率を高めることができます。これはカード情報を入力するステップを省略できるためで、過去にLinkを使ってクレジットカード情報を保存しているユーザーのコンバージョン率が7％ほど改善したとの結果も出ています。

Linkを決済フォームに追加する

Linkの導入方法はとてもシンプルです。まずStripeダッシュボードにてLinkを有効化します。これによってStripe CheckoutやStripe Payment Links、Stripe Invoicing・Stripe BillingなどのStripeが提供する決済ページにで支払いを行うフローではLinkが利用できるようになります。

もしCheckoutを利用していてLink決済が表示されない場合は、APIリクエスト時にpayment_method_typesを指定していないかをご確認ください。

const ch = await stripe.checkout.sessions.create({
-  payment_method_types: ['card'],
  line_items: [{
    price: 'price_1PvUxTIDF6qBhttt4ZaEsTYm',
    quantity: 1
  }],
  mode: 'payment',
  success_url: 'https://example.com',
  cancel_url: 'https://example.com'
})

Stripe Elementsを使ってLinkの決済をサポートする

アプリケーションに決済フォームを埋め込む場合、フロントエンドのJavaScriptコードをすこし追加する必要があります。まずサーバー側の処理にてPayment Intentを作成しましょう。

app.post('/payment-intent', async c => {
  const stripe = new Stripe('skまたはrkから始まるAPIキー')
  const paymentIntent = await stripe.paymentIntents.create({
    amount: 1000,
    currency: 'jpy'
  })
  return c.json({
    client_secret: paymentIntent.client_secret,
  })
})

もし表示する決済手段の制御をサーバー側の処理で行なっている場合は、次のようにpayment_method_typesの配列にlinkを追加してください。

const paymentIntent = await stripe.paymentIntents.create({
  amount: 1000,
  currency: 'jpy',
-  payment_method_types: ['card'],
+  payment_method_types: ['card', 'link'], // 利用する支払い方法を指定
  // ...その他必要なパラメータ
})

続いてフロントエンド側のJavaScriptを少し変更します。今回は、Link導入前の決済フォームが次のようなHTMLで実装されていると想定して変更箇所を紹介します。

<form id="payment-form">

  <h3>Payment</h3>
  <div id="payment-element"></div>

  <button id="submit-button" type="submit">Submit</button>
  <div id="error-message"></div>
</form>

<script>
  const stripe = Stripe('${STRIPE_PUB_API_KEY}');
  window.onload = async () => {
    const response = await fetch('/payment_intent', {
      method: 'POST'
    })
    const result = await response.json()

    // Stripe Elementsを初期化
    const elements = stripe.elements({
      clientSecret: result.client_secret
    })
    const paymentElement = elements.create('payment')
    paymentElement.mount('#payment-element')

    // フォームの送信イベントを処理
    const form = document.getElementById('payment-form')
    form.addEventListener('submit', async (event) => {
      event.preventDefault()
      // Use the clientSecret and Elements instance to confirm the setup
      const result = await stripe.confirmPayment({
        elements,
        confirmParams: {
          return_url: 'http://127.0.0.1:8787/',
        },
      })
    
      console.log(result)
      if (result.error) {
        const errorMessage = document.getElementById('error-message')
        errorMessage.textContent = result.error.code + ':' + result.error.message
      }
    })
  }
</script>

まず、Link用のフォーム要素を埋め込むためのHTMLタグを追加します。追加するフォーム要素には、メールアドレスを入力する欄が含まれています。そのため、ラベルを追加する場合は、「連絡先情報」などとするとよいでしょう。

<form id="payment-form">
+  <h3>Contact info</h3>
+  <div id="link-authentication-element"></div>

  <h3>Payment</h3>
  <div id="payment-element"></div>

  <button id="submit-button" type="submit">Submit</button>
  <div id="error-message"></div>
</form>

その後、追加したHTMLタグにフォーム要素をマウントするコードを追加します。

    // Stripe Elementsを初期化
    const elements = stripe.elements({
      clientSecret: result.client_secret
    })
    const paymentElement = elements.create('payment')
    paymentElement.mount('#payment-element')
    
+    const linkAuthenticationElement = elements.create('linkAuthentication');
+    linkAuthenticationElement.mount("#link-authentication-element");

これで実装完了です。4行コードを追加するだけで、新しい決済手段のサポートが完了しました。

この状態でアプリケーションにアクセスすると、次のスクリーンショットのような画面が表示されます。

メールアドレスの入力欄が表示されていれば、実装成功です。

Link決済の動作をテストする

実装が完了しましたので、動作を確認してみましょう。Link決済は、すでにLinkへログインしているかいないかによってフォームの動作が変わります。

Linkにログインしていない状態では、メールアドレス入力欄が表示されています。ここにメールアドレスを入力すると、そのメールアドレスがLinkに登録されているかいないかをStripe.jsが自動で判定します。

まだLinkアカウントがない場合は、クレジットカード情報の入力後に、決済フォームの下部にLinkを使って入力したカード情報を保存できるフォームが自動表示されます。ここで電話番号を入力し、支払いを完了させると、電話番号・メールアドレスを利用してLinkのアカウントが作成されます。これで次回以降の支払いで保存したカード情報が使えるようになります。

もし過去にLinkで登録したことがある場合は、メールアドレスを入力するとSMS認証画面が表示されます。ここでSMSにて受信したコードを入力すると、過去に保存した決済情報を選択できるUIが自動表示されます。

テスト環境でのLinkの認証について
テスト環境では、000000を入力すると自動で認証が完了します。もし認証に失敗したケースなどもテストしたい場合は、ドキュメントに記載されているテスト用コードをお使いください。

もちろん保存したクレジットカードを使わずに決済を進めることもできます。

このようにして、Linkの決済フローを簡単にテストすることができます。

3Dセキュア認証について

2025年3月から義務化される3Dセキュア認証にもLinkは対応しています。テストモードで登録するカード番号を4000000000003220にすると、Linkを使った決済処理でも3Dセキュア認証のテスト画面が表示されます。

ワンクリックで決済するフローを商品詳細ページに実装する

もう１つのLink決済導入方法が、Express Checkout Elementを利用することです。これは1クリックで決済を完了できる決済手段だけを顧客に提示する要素で、商品詳細ページや商品を紹介するブログ記事のCTAなどに利用できます。

この決済手段を組み込む場合は、ユーザーがボタンをクリックするまでサーバー側の処理は実行しません。まずHTML側で決済要素を表示させる実装を追加しましょう。

<div id="express-checkout-element"></div>
<div id="error-message"></div>

<script>
  const stripe = Stripe('${STRIPE_PUB_API_KEY}');
  window.onload = async () => {
    const elements = stripe.elements({
      mode: 'payment',
      amount: 1000,
      currency: 'jpy',
    })
    const expressCheckoutElement = elements.create('expressCheckout')
    expressCheckoutElement.mount('#express-checkout-element')  
  }
</script>

これだけでサイトやアプリケーションに1クリックで決済できるボタンを表示できます。ユーザーがボタンをクリックした後は、「決済操作が完了したこと」をトリガーにJavaScriptを実行し、サーバー側でPayment Intentを作成することで決済を完了させます。

const stripe = Stripe('${STRIPE_PUB_API_KEY}');
window.onload = async () => {
  const elements = stripe.elements({
    mode: 'payment',
    amount: 1000,
    currency: 'jpy',
  })
  const expressCheckoutElement = elements.create('expressCheckout')
  expressCheckoutElement.mount('#express-checkout-element')

+  expressCheckoutElement.on('confirm', async e => {
+    const { error: submitError } = await elements.submit()
+    const errorMessage = document.getElementById('error-message')
+    if (submitError) {
+      errorMessage.textContent = submitError.message
+      return
+    }
+
+    const response = await fetch('/payment_intent', {
+      method: 'POST'
+    })
+    const { client_secret: clientSecret } = await response.json()
+
+    const result = await stripe.confirmPayment({
+      elements,
+      clientSecret,
+      confirmParams: {
+        return_url: 'http://127.0.0.1:8787/cs',
+      },
+    });
+  
+    if (result.error) {
+      const errorMessage = document.getElementById('error-message');
+      errorMessage.textContent = result.error.code + ':' + result.error.message;
+    }
+  })    
}

これによって、LinkやApple Pay / Google Payを利用した1クリックで注文できるフローを簡単に実装できます。

フロントエンドからは決済金額を送信しない
ユーザーが開発者ツールなどを用いて、支払い金額を書き換えられるリスクがあります。そのため、Payment Intentを作成するAPIリクエストのBodyには金額などに関する情報を含めないようにしましょう。

商品ページでの決済処理であれば、ページのURLなどに含まれる商品IDを送信し、IDを利用してDBから決済金額を集計します。

デザインのカスタマイズや配送料金等の処理については、ドキュメントをご確認ください。

まとめ

Stripeが提供するLinkをサポートすると、リピート客やLinkユーザーが注文を完了させるための手間を大幅に削減できます。Linkを利用した場合は、決済操作を6秒程度で完了できるとも言われており、その手軽さからコンバージョン率の改善やカゴ落ちリスクを削減することが期待できます。また、クレジットカード情報を入力するステップを省略できるため、決済フォームを改ざんするタイプの攻撃からもユーザーを保護できます。

すでにOpen AI社やAnthropic社なども導入している決済手段で、数行コードを追加するだけで対応が可能ですので、まだ導入されていない方は、ぜひお試しの上導入をご検討ください。

Stripe PaymentElementとLinkの統合に関する関連ドキュメント:

• Stripe Linkについての詳細はこちら
• Stripe Elementsのセットアップに関する情報はこちら
• サーバーサイドのコード設定についてのガイドはPaymentIntents API documentationにあります
• Stripe Payment Elementを利用した再利用可能な支払いのセットアップに関する情報はFuture payments with Elements and Linkで確認できます
• 支払いを受け付ける方法についてはAccept a payment guideを参照してください