Customizing return URL

Here (opens new window) you can learn more about localePath.

The integration gives you a possibility to build custom value for the return_url (opens new window) property by providing builder function to the PaymentStripeProvider component.

<template>
  <!-- Payment.vue -->
  <div>
    <PaymentStripeProvider
      v-if="cart && cart.id"
      :cartId="cart.id"
      :amount="cart.totalPrice.centAmount"
      :currency="cart.totalPrice.currencyCode"
      :buildReturnUrl="buildReturnUrl"
    />
  </div>
</template>

<script>
import PaymentStripeProvider from '@vsf-enterprise/stripe-commercetools/src/components/PaymentStripeProvider';
import { useContext } from '@nuxtjs/composition-api';
import { Order } from '@vsf-enterprise/commercetools-types';

export default {
  components: {
    PaymentStripeProvider
  },
  setup() {
    const {
      cart,
      load,
    } = useCart();
    const {
      app: {
        localePath
      }
    } = useContext();

    const buildReturnUrl = ({ order }: { order: Order }) => {
      return window.location.origin + localePath(`/checkout/custom-thank-you?order=${order.id}`);
      // Or like that:
      // return (window.location.origin + localePath({ name: 'custom-thank-you', query: { order: order.id } }));
    };

    onMounted(async () => {
      await load();
    });

    return {
      // ...
      cart: computed(() => cart.value),
      buildReturnUrl
    }
  }
};
</script>