決済代行サービス Stripe皆様ご存知でしょうか？
Stripe決済システムをVue.jsでフロント構築するためのプラグインとして 「vue-stripe」 というものが存在します。
stripeと公式パートナーを締結している信頼あるプラグインです。
実際にサクッと見てみる
インストール
Yarn経由
yarn add @vue-stripe/vue-stripe
npm経由
npm install @vue-stripe/vue-stripe
使用法
コンポーネントにStripeCheckout をインポートするのみで利用開始可能。
<template>
<!-- stripe-checkout -->
</template>
<script>
import { StripeCheckout } from '@vue-stripe/vue-stripe';
export default {
components: {
StripeCheckout,
},
};
</script>
Props
決済関して必要な情報をあらかじめきちんと用意してくれています。
| Props名 | 型 | デフォルト | 必須 | 説明 |
|---|---|---|---|---|
| pk | string | none | Yes | Stripe の公開可能なキー。 |
| sessionId | string | none | No | Checkout のクライアントとサーバーの統合で使用される Checkout セッションの ID。 |
| LineItems | array(object) | none | No | 顧客が購入したいアイテムを表すオブジェクトの配列。 |
| mode | string | none | No | 一回限りの支払いかまたはサブスクリプション形式支払いのいずれかである、チェックアウト セッションのモード。 |
| customerEmail | string | none | No | 顧客オブジェクトの作成に使用される電子メール アドレス。 |
| successUrl | string | none | No | 支払いが完了したときに Stripe が顧客に送信する ためのURL。 |
| cancelUrl | string | none | No | 支払いがキャンセルされたときに Stripe から顧客を送信するための URL |
などなど、たくさんあるので詳しくは公式で確認してみてください。
※前提としてフロントのみの実装で支払いは完結できません。サーバーサイドから stripeに対しAPIを投げる必要があります。（リファレンスの用意されている言語↓）
と、書いたものの stripeアカウントを作成後ダッシュボードページ（管理画面）から商品を登録しIDと紐付けを行えばフロントのみの決済も行えるそうです！！！！衝撃、、、
実は僕以前にPayPal決済の実装に挑戦したことがありまして、扱いずらさ（リファレンスが古いのもありますが）に白目を向きまくってた記憶があります、、
それに比べstripeはかなりいけてます。リファレンスもとても丁寧で簡単、、、素敵なサービスですねえ ：）
サーバーサイド側の処理も詳しくは見れてませんが、公式のリファレンスをチラッとみるとイメージしやすい部分がたくさんでした。
皆様もぜひ！！！