Stripeのクレジット決済フォームをサクッとカスタマイズする

どうもこんにちは塚本です。

https://stripe.com/docs/payments/konbini

先日、オンライン決済プラットフォームである
Stripeがコンビニ決済に対応しました！

実装する機会があるかどうか分かりませんが、
日本ではクレジット決済に次いで多い支払い方法らしいので需要はあるのでしょうね！

Stripe

Stripeは弊社でよく使っているオンライン決済サービスです。
ざっと思いつくだけで以下のメリットがあります。

メリット（ショップ側）

• 初期費用がかからない
• 月額費または隠れた手数料は一切なし
• 手数料は決済成立ごとに3.6%
• 管理画面が見やすい
• 返金処理が簡単

メリット（カスタマー側）

• 画面遷移無しで決済ができる
• PayPalのようにアカウント登録がいらない

また、Stripeは公式ドキュメントがとても充実しているので実装しやすいです。

デメリット

先程まではStripeのことを褒めちぎっていましたが、
もちろんデメリットというか不評な点があります。

それは、純正の支払い画面は日本人にとって馴染みがないという点です。

Stripe Elements

純正の状態では、Stripeのフォームはこんな感じのUIになっています。
とくに、CVCが分からないという意見が多かったです。

ですが、Stripe Elementsを用いることで自由にフォームをカスタムすることができます。

カスタム後のStripe Elements

純正のようなリッチなものも良いのですが、
Tailwind CSSやJavaScriptを使ってサクッとカスタマイズすることもできます。

以下はその例になります。

環境に合わせてコピペして頂ければ動くと思いますが、
実装のポイントを簡単に解説していきます。

HTML

クレジットカード番号・有効期限・セキュリティコードの入力欄を分けるために以下のHTMLが必要になります。
idはご自由なものをふってください。(jsで使います)

<div id="card-number">
    <!-- a Stripe Element will be inserted. -->
</div>

<div id="card-expiry">
    <!-- a Stripe Element will be inserted. -->
</div>

<div id="card-cvc">
    <!-- a Stripe Element will be inserted. -->
</div>

JavaScript

HTML側で作った3つの要素に、
それぞれStripeのフォームをマウントしてください。
他のコードについてはCodePenから御覧ください。

const cardNumber = elements.create("cardNumber", {
    style: elementStyles
});

const cardExpiry = elements.create("cardExpiry", {
    style: elementStyles
});

const cardCvc = elements.create("cardCvc", {
    style: elementStyles
});

window.addEventListener("DOMContentLoaded", function () {
    cardNumber.mount("#card-number");
    cardExpiry.mount("#card-expiry");
    cardCvc.mount("#card-cvc");

    form.addEventListener("submit", function (e) {
        e.preventDefault();
        createToken();
    });
});

まとめ

StripeはAPIもわかりやすく、ドキュメントも充実しているので
サクッと実装できて助かることが多いです。

皆様もコンビニ決済も含め、導入してみてはいかがでしょうか。