mountPaymentElement

Method creating and mounting Stripe's Payment Element to the DOM.

The method creates instances of Stripe's Elements and Payment Element objects and mounts the Payment Element to the DOM. They are returned by this method so they can be manipulated further (e.g. by appending event listeners) or passed to other SDK method.

By default, the Payment Element will be mounted inside a DOM element with an id of stripe-payment-element. Make sure the element is present in the DOM tree.

<div id="stripe-payment-element">
  <!-- Payment Element will be mounted here -->
</div>

You can alter this behavior using the paymentDOMElement parameter.

Signature

export declare function mountPaymentElement(
	props: MountPaymentElementProperties
): Promise<MountPaymentElementResult>;

Parameters

Name	Required	Type	Description
`props`	Required	`MountPaymentElementProperties`	Parameter object which can be used with this method. Refer to its type definition to learn about possible properties.

Returns

an instance of the MountPaymentElementResult object.

Referenced Types

Examples

Mounting a Payment Element for a cart.

import { sdk } from '~/sdk.config.ts';

const cart = await sdk.ct.getCart();

const { paymentElement, elements } = await sdk.stripeCt.mountPaymentElement({ cart: cart! });

Mounting a Payment Element to the target DOM element matched by a non-default CSS selector passed as the paymentDOMElement parameter.

import { sdk } from '~/sdk.config.ts';

const cart = await sdk.ct.getCart();

const { paymentElement, elements } = await sdk.stripeCt.mountPaymentElement({
  cart: cart!,
  paymentDOMElement: '#custom-payment-element-id'
});

Mounting a Payment Element and adjusting its appearance using the appearance parameter.

import { sdk } from '~/sdk.config.ts';

const cart = await sdk.ct.getCart();

const { paymentElement, elements } = await sdk.stripeCt.mountPaymentElement({
  cart: cart!,
  appearance: {
    theme: 'night'
  }
});

Mounting a Payment Element and using the ready event listener to detect when the element is ready to be used.

import { sdk } from '~/sdk.config.ts';

let isLoading = true;

const cart = await sdk.ct.getCart();

const { paymentElement, elements } = await sdk.stripeCt.mountPaymentElement({ cart: cart! });

paymentElement.on('ready', () => {
  isLoading = false;
});