How to use customerSessionClientSecret on Elements?

[siraphobk]

Hi!

Background

I tried to create a checkout page with PaymentElement, and all went well with clientSecret. Everything works as expected.

Now I want to allow my customers to save and retrieve their payment methods. According to the official guide, I need to create CustomerSession which returns customerSessionClientSecret that'll be used on the frontend side to enable the feature.

The Problem

When supplying customerSessionClientSecret directly to <Elements>, it didn't work as expected. There's no check button for saving payment method for future use.

Things I've tried.

1. Supply customerSessionClientSecret directly to like so.

   <Elements {stripe} {clientSecret} {customerSessionClientSecret} bind:elements>
     <PaymentElement />
   </Elements>

   Doesn't work. I believe because does not have the property customerSessionClientSecret so nothing happens.

2. Call stripe.elements() to initialize elements variable. The payment form didn't render, and the following error is shown in the browser console.

Code

Here's my code of the payment page. The idea is that I fetch a payment object that contains clientSecret and customerSessionClientSecret and supply it to <Elements>. The expected result is that the payment form should be shown with save payment details like the following image.

<script lang="ts">
	import { onMount } from 'svelte';
	import Container from '$lib/components/Container.svelte';
	import { loadStripe } from '@stripe/stripe-js';
	import type { Stripe } from '@stripe/stripe-js';
	import { Elements, PaymentElement } from 'svelte-stripe';
	import { PUBLIC_STRIPE_PUBLISHABLE_KEY } from '$env/static/public';
	import type { PageData } from './$types';
	import { fetchPayment } from './payment.svelte';
	import Log from '$lib/components/Log.svelte';

	let { data }: { data: PageData } = $props();

	let stripe: Stripe | null = $state(null);
	let elements: any = $state(null);
	let clientSecret: string | null = $state(null);
	let customerSessionClientSecret: string | null = $state(null);
	let error: string | null = $state(null);
	let ready: boolean = $state(false);

	onMount(async () => {
		const result = await fetchPayment(data.paymentId);
		clientSecret = result.payment.paymentData.clientSecret;
		customerSessionClientSecret = result.payment.paymentData.customerSessionClientSecret;

		stripe = await loadStripe(PUBLIC_STRIPE_PUBLISHABLE_KEY, {
			stripeAccount: data.stripeAccountId!
		});

		elements = stripe?.elements({
			clientSecret: clientSecret!,
			customerSessionClientSecret: customerSessionClientSecret!
		});

		ready = true;
	});

	// A list of test cards
	// https://docs.stripe.com/testing
</script>

<Container>
	<h1 class="mb-4 text-2xl">Make a payment!</h1>
	<form
		onsubmit={async (e: SubmitEvent) => {
			e.preventDefault();

			if (!stripe || !elements) {
				console.error('Stripe or Elements not loaded');
				return;
			}

			const result = await stripe?.confirmPayment({
				elements,
				confirmParams: {
					return_url: `http://localhost:5173/payments/${data.paymentId}/thank`
				}
			});

			if (result.error) {
				error = JSON.stringify(result.error, null, '  ');
			}
		}}
	>
		{#if ready}
			<Elements {stripe} {clientSecret} bind:elements>
				<PaymentElement />
			</Elements>

			<button
				type="submit"
				class="mt-2 w-full rounded border bg-gray-800 px-2 py-1 text-white hover:bg-gray-900"
				>Pay</button
			>
		{/if}
	</form>

	{#if error}
		<Log heading="Confirming payment error" content={error} />
	{/if}
</Container>

Thanks in advance for your help. :)