Vue Storefront is now Alokai! Learn More
Using SDK to perform payment

Using SDK to perform payment

As long as you are using Alokai with SDK, it doesn't really matter which framework you pick. Below you can see a very simple example of implementing payment processing using our Stripe commercetools integration. The ct module comes from the @vsf-enterprise/sdk-commercetools package.

Below, we present a simple example using Vue 3.

<template>
  <div id="stripe-payment-element"></div>
  <button @click="handlePayment">Pay</div>
</template>

<script lang="ts" setup>
import { sdk } from '~/sdk.config.ts';

const cartData = await sdk.commerce.getMe();
const cart = cartData.me.activeCart;
const { paymentElement, elements } = await sdk.stripeCt.mountPaymentElement({ cart });

const handlePayment = async () => {
  const { paymentAndOrder, confirmPaymentResponse } = await sdk.stripeCt.handlePayment({
    cartId: cart.id,
    elements
  });
};
</script>