Using SDK to perform payment

As long as you are using Vue Storefront 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 cart = await sdk.ct.getCart();
const { paymentElement, elements } = await sdk.stripeCt.mountPaymentElement({ cart });

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