Checkout Component

In order to maintain the integrity of the parameters passed to the checkout web component, these properties must now be passed as a JWT (JSON Web Token) in the jwt attribute.

To simplify tasks, we've introduced the getCheckoutToken RPC. It returns the user's access token and a checkout JWT, which includes parameters like basket-id, voucher and campaignKey. Additionally, the <ay-checkout> web component got renamed to <scayle-checkout>.

To use the getCheckoutToken RPC, you will need to have version 7.72.1 of the @scayle/storefront-nuxt package.

You can start using the checkout JWT with the following code snippet:

page/checkout.vue

<template>
  <div id="ayCheckoutContainer" class="min-h-[85vh]">
-   <ay-checkout
-     v-if="accessToken && basketKey && showCheckout"
+   <scayle-checkout
+     v-if="checkoutToken.accessToken && checkoutToken.checkoutJwt"
      ref="checkoutRef"
      :access-token="accessToken"
-     :basket-id="basketKey"
-     :campaign-key="campaignKey"
+     :jwt="checkoutJwt"
      header-element="#header"
      @error="handleError"
    />
  </div>
 </template>

 <script setup lang="ts">
 
 // ...
 
- const basketKey = computed(() => basketData?.value?.key)
 const checkoutRef = ref(null)
- const { data: campaignKey, fetch: fetchCampaignKey } = await useCampaign()

- const showCheckout = ref(false)
- const accessToken = computed(() => {
-  return user.value?.authentication?.storefrontAccessToken
- })

 // ...

- onMounted(async () => {
- try {
-    await _retry({ times: 5, delay: 100 }, fetchCampaignKey)
-  } catch (error: any) {
-    log.error('[checkout.vue] Error getting campaign key', error)
-  }
-  showCheckout.value = true
- })

+ const { data: checkoutToken, fetch: fetchCheckoutToken } = useRpc(
+   'getCheckoutToken',
+   'getCheckoutToken',
+   undefined,
+   { immediate: false },
+ )


 onBeforeMount(async () => {
- await Promise.all([fetchBasket(), fetchUser()])
+ await Promise.all([fetchBasket(), fetchUser(), fetchCheckoutToken()])
 })
 // ...
</script>