Stripe Elements

洗練されたチェックアウトフローの構築

Stripe Elements は、機能豊富な組み込みの UI コンポーネントです。デスクトップやモバイルに対応した独自のピクセルパーフェクトなチェックアウトフローを作成することができます。

ためしてみる ドキュメントを読む

Donate with
Or pay with card
Address
Name City
Email State
Phone Zip Code
Card Number
Expiration
$1
$5
Jane Doe 185 Berry St Jane Doe $20
janedoe@gmail.com San Francisco janedoe@gmail.com $50
(941) 555-0123 CA (941) 555-0123 $100
4242 5200 8282 8282 8210 6011 0009 9013 9424 98431
MM/YY MM/YY MM/YY MM/YY
CVC CVC CVC CVC
ZIP 94107 ZIP Code ZIP
Pay $25 Pay $25 Pay $25 Donate $5

顧客にスムーズな支払い体験を提供

Stripe Elements は、Stripe のフロントエンドチーム、デザインチーム、アナリティクスチームの協力のもとに開発されています。顧客が情報をすばやく正確に入力できるようサポートを行い、入力ミスを減らし、支払い処理の成功率を高めています。

  • リアルタイムの検証

    入力時にリアルタイムでフィードバックを自動的に提供し、入力ミスを早い段階で把握できるようにします。

  • ローカライゼーション

    カードの発行国に応じて、必要な入力項目を動的に特定し、適切にローカライズします。

  • フォーマッティングとマスキング

    カードの形式に合わせたフォーマッティングにより、利用者にわかりやすい入力方式を実現します。

カード番号
MM / YY
CVC
郵便番号
Visa 5556 04 / 21
Amex 98431 07 / 19
で支払う
  • Apple Pay および Payment Request

    1 回の連携処理で、Apple Pay や Payment Request API (Google Payを含む) と常時連携することができます。

  • 自動入力

    自動入力は、プラットフォームやブラウザの種類を問わず同じように機能するので、顧客はチェックアウトの処理をすばやく行うことができます。

  • 応答性

    デスクトップやモバイルなど異なる画面のサイズに応じて表示を調整し、必要に応じて、テンキーを起動します。

カード番号
MM / YY
CVC
郵便番号
Visa 5556 04 / 21
Amex 98431 07 / 19
で支払う
var style = {
  base: {
    color: '#303238',
    fontSize: '16px',
    fontFamily: '"Open Sans", sans-serif',
    fontSmoothing: 'antialiased',
    '::placeholder': {
      color: '#CFD7DF',
    },
  },
  invalid: {
    color: '#e5424d',
    ':focus': {
      color: '#303238',
    },
  },
};

作成も設計も思いのまま

Stripe Elements は、個々のチェックアウトページに最適となるようカスタマイズすることができます。Elements を利用すれば、支払いページをホスティングする必要がなくなり、ビルディングブロックを利用して独自のチェックアウトフォームを作成できます。

Elements を是非お試しください。スタイルオブジェクトをエディタで編集すれば、決済フォームのスタイルを変更できます。ほとんどの CSS プロパティがご利用いただけます。

支払い情報を安全に収集

Stripe Elements では、支払い情報をより安全に収集し、悪意のある人物に盗み出されることのないよう機密情報を保護します。安全な iframe を生成し、機密性の高い情報をサイトから隔離します。これにより、あらゆるクラスの攻撃から情報を守ることができ、同時に、情報を完全かつビジュアルに管理することが可能です。

PCI コンプライアンスを容易に達成

Stripe Elements を利用すれば、現行の PCI 規制に、きわめて容易に準拠することができます。機密性の高いデータの扱いでサーバの運用に影響が生じることはありません。最も簡単な方法で PCI コンプライアンスの要件を満たすことが可能となり、期限の制約を受けながらコストをかけて監査対応をする必要がなくなります。自己問診 (SAQ A) のドキュメントを自動的に生成することも可能です。

コードの記述はわずか。特殊ケースの考慮はほぼ不要。

Stripe Elements には、入力内容の検証、フォーマッティング、マスキング、スタイル処理、エラー処理の機能が組み込まれています。チェックアウトコードのメンテナンスや特殊ケースの問題解決に時間をかける必要がなくなり、支払いページの機能向上に注力できます。

Formatting
// Stripe.js v2 formatting helpers
$('input[name="card"]').on('input', () => {
  let brand = Payment.fns.cardType($('input[name="card"]').val());

  $('.credit-card-img').css('opacity', 0.4);
  $(`#${brand}`).css('opacity', 1);
});
Validation
// We only need to manually validate and format for Stripe.js v2.
$.fn.form.settings.rules.customBillingZip = (value) => {
  if (!$("[name='billingZipSame']").is(':checked') && value === '') {
    return false;
  }
  return true;
}

$.fn.form.settings.rules.customCVV = (value) => {
  return window.Stripe.validateCVC(value);
}

$.fn.form.settings.rules.customExp = (value) => {
  if (value.split('/').length === 1) {
    let sliceIndex = value.length % 2 ? 1 : 2;
    let value = `${value.slice(0, sliceIndex)}/${value.slice(sliceIndex, value.length)}`;
  }
  return window.Stripe.validateExpiry(value);
}

$.fn.form.settings.rules.customCardNumber = (value) => {
  return Payment.fns.validateCardNumber($('input[name="card"]').val());
}
return (formData, stripeResponseHandler) => {
  // Set up Stripe payload
  if (formData.exp.split('/').length > 1) {
    let exp = formData.exp.split('/');
  } else {
    let sliceIndex = formData.exp.length % 2 ? 1 : 2;
    let exp = [formData.exp.slice(0, sliceIndex), formData.exp.slice(sliceIndex, formData.exp.length)];
  }
  let payload = {
    number: formData.card,
    cvc: formData.cvv,
    exp_month: parseInt(exp[0]),
    exp_year: parseInt(exp[1])
  }
}
Payload
// Send address if given.
if ($("name='billingZipSame']").is(':checked')) {
  payload.name = formData.name;
  payload.address_line1 = formData.address1;
  if (formData.address2) {
    payload.address_line2 = formData.address2;
  }
  payload.address_city = formData.city;
  payload.address_state = formData.state;
  payload.address_zip = formData.zip;
} else {
  payload.address_zip = formData.billingZip;
}
Error Handling
Stripe.card.createToken(payload, (status, res) => {
  if (res.error) {
    window.scrollTo(0, 0);
    $('.ui.form').form('add errors', [res.error.message]);
  }
  stripeResponseHandler(res);
});
Localization
base.card = {
  rules: [{
    type: 'customCardNumber',
    prompt: translations['Enter a valid credit card number']
  }]
};

base.cvc = {
  rules: [{
    type: 'empty',
    prompt: translations['Enter a valid CVV code']
  }]
};

base.exp = {
  rules: [{
    type: 'customExp',
    prompt: translations['Enter a valid expiation date (MM/YYYY)']
  }]
};

base.billingZip = {
  rules: [{
    type: 'customBillingZip',
    prompt: translations['Must enter a billing zip']
  }]
};
Elements
let Stripe = () => {}
let stripeClient = Stripe(key);
let stripeElements = stripeClient.elements()

let stripeCardElement = stripeElements.create('card', {
  style: {
    base: {
      fontSize: '16px',
      fontFamily: 'Lato, "Helvetica Neue", Arial, Helvetica, sans-serif',
      color: 'rgba(0,0,0,.87)'
    },
    invalid: {
      color: '#9F3A38',
      iconColor: '#9F3A38'
    },
    focus: {
      color: 'rgba(0,0,0,.95)'
    }
  }
});

製品の開発に集中、他は Stripe にお任せください

オンラインビジネスの運営は手間がかかるものです。Stripe Elements を利用すれば、セキュリティや顧客体験の構築と最適化など、Stripe が蓄積してきたノウハウをそのまま活用できるため、ユーザは製品の開発に集中することができます。

  • ブラウザの自動入力サポート
    すべての主要なデスクトップまたはモバイルブラウザで、フォームへの支払い自動入力が可能です。
  • サードパーティの自動入力のサポート
    1Password や LastPass など、主要サードパーティが提供する自動入力ソフトウェアの支払い自動入力機能を、フォーム入力に使用できます。
  • カードブランドの識別
    利用者の入力内容の確認では、利用者のカードブランドを自動検知するほか、フォーマッティングや入力データの検証などの確認も行ないます。たとえば、アメリカン・エキスプレスカードの場合は、4 桁の CVC だけを許可します。
  • カード固有の CVC 情報
    それぞれのカードの CVC や CVV の記載場所を利用者に示すことで、入力ミスを減らします。
  • 入力のマスキング
    内蔵の入力マスキングにより、入力ミスを減らします。
  • フォーマッティング
    入力時に入力内容を自動的にフォーマッティングして、期待どおりの入力結果を実現します。
  • ローカライズされたエラーメッセージ
    エラーメッセージの表示言語を 15 の言語から選択できます。
  • ローカライズされたプレースホルダー
    プレースホルダーがローカライズされており、たとえば米国の ZIP コードも英国の Postal Code も「郵便番号」として表示されます。
  • PCI コンプライアンスを容易に達成 (SAQ A)
    Elements は PCI の準拠状況を最も容易に証明できる SAQ A の評価フォームに対応しているため、PCI の準拠範囲を最小限に絞ることができます。
  • Web フォントのサポート
    Web フォントを自由に選択できます。
  • 右から左へ記述する言語のサポート
    また、右から左へ記述する言語に対応できるよう、右から左への入力をサポートしています。
  • リアルタイムの入力検証
    入力内容をリアルタイムで検証することで、入力ミスや入力漏れを減らします。
  • Payment Request API
    Stripe Elements の要素として W3C Payment Request API による支払い方法をサポートし、顧客に最適な支払いオプションを自動検出できます。
  • Google Pay
    Google Pay を Stripe Elements の要素としてサポートします。
  • Microsoft Pay
    Microsoft Pay を Stripe Elements の要素としてサポートします。
  • Apple Pay
    Apple Pay を Stripe Elements の要素としてサポートします。
  • スマートクリックターゲット
    Elements では、ラベルやパディングのクリックターゲットを自動的に設定するので、フォームのほかの部分と互換性のある安全な入力フィールドを使用できます。
  • モバイル対応の入力方式
    数字入力だけの場合はテンキーだけを表示するといったように、入力内容に合ったモバイルキーボードを画面に表示します。
  • モバイル対応のナビゲーション
    モバイルに対応したナビゲーションアローを、入力フィールドの移動時にネイティブで利用できます。
  • アクセシビリティ (ARIA)
    Elements は W3C ARIA 標準に準拠しており、あらゆる利用者のニーズを満たすことのできる高いアクセシビリティを実現しています。
  • 郵便番号の動的入力
    Elements は、郵便番号を収集することが取引の成功率を高め、不審請求を最小限に抑えるのに役立つのかを動的に判断し、必要と判断された場合にのみ郵便番号を収集します。
  • 全角数字および CJK 数字のサポート
    中国語、日本語、韓国語のソフトウェアキーボードで通常使用される CJK 固有の数字表記がサポートされます。
  • 応答性の高いレイアウト
    Elements はユーザのデバイスの画面サイズに合わせた表示を可能にします。ディスプレイの大きさに最適となるようレイアウトが自動調整されるので、小さな画面での入力も簡単になります。
  • React バインディング
    react-stripe-elements を利用すれば、Elements を React と連携させることが可能です。
  • 完全なカスタマイズが可能なスタイル
    また、モジュール方式でカスタマイズ可能な Elements のスタイルを利用すれば、お好みどおりのフォームが作成できます。
You’re viewing our website for Hong Kong, but it looks like you’re in the United States. Switch to the United States site