この記事は、Svelte Advent Calendar 2022 13日目の記事です。
Svelteは、WebアプリケーションやGUIを構築するためのUIライブラリの１つです。
Reactなどと異なり、仮想DOMを利用せず、軽量かつシンプルに実装できることを謳っています。
Svelteでアプリケーションを開発する場合、svelte-stripeライブラリを利用することで、Stripeでのオンライン決済機能の組み込みが簡単に行えます。
Viteでプロジェクトをセットアップする
早速Svelteアプリを作成しましょう。
今回はViteを利用します。
$ yarn create vite svelte-app --template svelte-ts
..
Scaffolding project in /Users/sandbox/svelte-app...
Done. Now run:
cd svelte-app
yarn
yarn dev
✨ Done in 3.34s.
完了メッセージに表示されたコマンドを実行して、セットアップされたアプリを起動しましょう。
$ cd svelte-app
$ yarn
$ yarn dev
svelte-stripeでStripeの決済フォームを組み込む
セットアップが完了しましたので、Stripeの組み込みを行いましょう。
今回はコミュニティライブラリのsvelte-stripeを利用します。
ライブラリのインストール
まずはライブラリをインストールしましょう。
$ yarn add stripe svelte-stripe
環境変数の設定
StripeのAPIキーを.env.localファイルに保存しましょう。
VITE_STRIPE_PUBLIC_KEY=pk_test_...
STRIPE_SECRET_KEY=sk_test_...
Stripe用のコンポーネントファイルを作成
Stripeに関するリソースをまとめるファイル・コンポーネントを用意しましょう。
今回は、src/lib/Stripe.svelteファイルを作成しました。
<script>
import { loadStripe } from '@stripe/stripe-js'
import { Elements } from 'svelte-stripe'
import { onMount } from 'svelte';
let stripe = null
onMount(async () => {
stripe = await loadStripe(import.meta.env.VITE_STRIPE_PUBLIC_KEY)
})
</script>
{#if stripe}
<Elements {stripe}>
<!-- this is where your Stripe components go -->
<b>Hello Stripe</b>
</Elements>
{/if}
これをsrc/App.svelteで読み込みます。
<script lang="ts">
import svelteLogo from './assets/svelte.svg'
import Counter from './lib/Counter.svelte'
+ import StripeFrom from './lib/Stripe.svelte'
</script>
...
<div class="card">
<Counter />
+ <StripeFrom />
</div>
カウンターの横に、「Hello Stripe」が表示されていれば、追加成功です。
Stripeの決済フォームを描画する
Stripe組み込みの準備ができましたので、決済フォームを表示させましょう。
Svelteにはサーバー側の機能がないため、Stripeのクイックスタートなどで別途Payment Intentを作成するAPIを用意します。
続いてコンポーネント内のコードを変更します。
<script>
import { loadStripe } from '@stripe/stripe-js'
- import { Elements } from 'svelte-stripe'
+ import { Elements, PaymentElement } from 'svelte-stripe'
import { onMount } from 'svelte';
let stripe = null
+ let clientSecret = ''
+ let elements
onMount(async () => {
stripe = await loadStripe(import.meta.env.VITE_STRIPE_PUBLIC_KEY)
+ const response = await fetch('http://localhost:3100/stripe', {
+ method: 'POST'
+ })
+ const result = await response.json()
+ clientSecret = result.client_secret // クイックスタートの場合、「result.clientSecret」
})
</script>
-{#if stripe}
+{#if stripe && clientSecret}
- <Elements {stripe}>
+ <Elements {stripe} {clientSecret} bind:elements>
+ <PaymentElement />
</Elements>
{/if}
まず、onMountにてPayment Intentを作成するAPIを呼び出し、ClientSecretを取得しています。
次に、取得したClientSecretを利用して、PaymentElementを表示させています。
最後に、Elementsをelements変数にbindして、この後のsubmitイベントに備えています。
変更を保存すると、決済フォームが画面に表示されます。
決済フォームのSubmit処理を実装する
最後に、決済を完了するためのイベントを実装します。
以下の関数をStripe.svelteに追加しましょう。
async function submit() {
if (!stripe || !elements) {
throw new Error('stripe or elements not defined')
}
const { error, paymentIntent } = await stripe.confirmPayment({
elements,
redirect: 'if_required'
})
if (error) {
window.alert(JSON.stringify(error))
} else {
window.alert('done')
}
}
続いて、Stripe.svelteのHTMLを以下のように変更します。
- <Elements {stripe} {clientSecret} bind:elements>
- <PaymentElement />
- </Elements>
+ <form on:submit|preventDefault={submit}>
+ <Elements {stripe} {clientSecret} bind:elements>
+ <PaymentElement />
+ <button type='submit'>Pay now</button>
+ </Elements>
formタグを追加し、on:submitでフォームのsubmitイベントを設定しました。
これでフォームにボタンが追加され、決済を完了できるようになります。
Stripeが用意している「テストカード番号」を利用して、決済をテストしましょう。
成功メッセージが表示されれば、実装完了です。
追加の学習リソース
PaymentElementを利用しない場合の、クレジットカード以外の実装方法などについては、公式のサンプルを参考にできます。
コンビニ決済やApple Pay/Google Payなどもサポートされています。
SvelteKitを利用して、Payment IntentやSetup Intentを作成する方法やWebhook APIを実装する方法なども紹介されています。