handlePayment
Method for handling the payment flow across Stripe and commercetools platforms.
Calling the method initializes the payment flow by creating new commercetools Payment and Order from a cart with a given id.
In turn, it triggers Vue Storefront's Extension Module to create a new PaymentIntent in Stripe. Finally, it confirms the PaymentIntent and attempts the payment.
If the payment is successful, the method redirects the user to the default Vue Storefront return url or the custom one returned by the buildReturnUrl callback.
If the payment fails, the method returns the HandlePaymentResult object which contains the error alongside payment & order data.
Signature
export declare function handlePayment(
props: HandlePaymentProperties
): Promise<HandlePaymentResult>;Parameters
| Name | Required | Type | Description |
|---|---|---|---|
props | Required | HandlePaymentProperties | Parameter object which can be used with this method. Refer to its type definition to learn about possible properties. |
Returns
An instance of the HandlePaymentResult object.
Referenced Types
Examples
Handling the payment flow for a cart with a given id.
import { sdk } from '~/sdk.config.ts';
const cart = await sdk.ct.getCart();
const { elements } = await sdk.stripeCt.mountPaymentElement({ cart: cart! });
// On submit
const { paymentAndOrder, confirmPaymentResponse } = await sdk.stripeCt.handlePayment({
cartId: cart!.id,
elements
});Handling the payment flow for a cart with a given id and customizing the return url using the buildReturnUrl callback.
import { sdk } from '~/sdk.config.ts';
import type { PaymentAndOrder } from '@vsf-enterprise/stripe-commercetools-sdk';
const cart = await sdk.ct.getCart();
const { elements } = await sdk.stripeCt.mountPaymentElement({ cart: cart! });
const buildReturnUrl = (order: PaymentAndOrder["order"]) => `http://example.com/my-return-url?order=${order.id}`;
// On submit
const { paymentAndOrder, confirmPaymentResponse } = await sdk.stripeCt.handlePayment({
cartId: cart!.id,
elements,
buildReturnUrl
});