Stripe Elements
洗練されたチェックアウトフローの構築
Stripe Elements は、機能豊富な事前に構築された UI コンポーネントです。デスクトップやモバイルに対応した独自のピクセルパーフェクトなチェックアウトフローを作成することができます。
顧客にスムーズな支払い体験を提供
Stripe Elements は、Stripe のフロントエンドチーム、デザインチーム、アナリティクスチームの協力のもとに開発されています。顧客が情報をすばやく正確に入力できるようサポートを行い、入力ミスを減らし、支払い処理の成功率を高めています。
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 には、入力内容の検証、フォーマッティング、マスキング、スタイル処理、エラー処理の機能が組み込まれています。チェックアウトコードのメンテナンスや特殊ケースの問題解決に時間をかける必要がなくなり、支払いページの機能向上に注力できます。
// 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);
});
// 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]) }
}
// 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; }
Stripe.card.createToken(payload, (status, res) => {
if (res.error) {
window.scrollTo(0, 0);
$('.ui.form').form('add errors', [res.error.message]);
}
stripeResponseHandler(res);
});
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'] }] };
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.js を利用して Elements を React と連携します。
-
完全なカスタマイズが可能なスタイル
また、モジュール方式でカスタマイズ可能な Elements のスタイルを利用すれば、お好みどおりのフォームが作成できます。