Interface CardFormEmbed

CardFormEmbed is a web component that uses shadow DOM and iframes to properly encapsulate its styles and logic to keep the user safe and prevent CSS conflicts.

It displays the necessary text fields for the user to fill out to pay with the specified card. To initiate the payment after the user has entered the information, use the pay method.

It also extends HTMLElement, providing a familiar API for some custom needs, in addition to the API described on this page.

Styling

You can make use of the component's selector verestro-paytool-card-form-embed to style it based on your needs.

Keep in mind, that since we are working with iframes, the component won't be fully rendered immediately after it's attached to the DOM tree, therefore adding things like e.g. padding, border or margin might create an empty space for a split second. This is also the main reason why embedCardForm returns a promise. To mitigate this issue, the component sets the initialized class once it's fully rendered.

For most basic styles it's recommended to always use the initialized class in your CSS selectors, e.g.

verestro-paytool-card-form-embed.initialized {
  display: block;
  background: #F3F4F6;
  border: 2px solid #E8E8E8;
  border-radius: 4px;
  padding: 25px 28px 28px;
}
Copy

Events

Available custom event types and their payloads (event.detail):

• statechange — same as CardFormEmbedOptions.onFormStateChange. Fires when the form validation changes.
  • Payload: CardFormEmbedState
• cardnumberchange — same as CardFormEmbedOptions.onCardNumberChange
  • Payload without paymentMethods: { token: string | null } — Deprecated and will be removed in a future release.
  • Payload with paymentMethods: CardNumberInfo — covers both typing a new card and selecting a saved card. Prefer supplying paymentMethods and rely on CardFormEmbedState.cardNumberInfo / CardFormEmbedState.paymentMethodData.
• submit — same as CardFormEmbedOptions.onSubmit
  • Payload: CardFormEmbedState

embedCardForm already allows you to set up event listeners, but if for some reason you don't want to set them up immediately or your framework makes it unnecessarily hard to do, you can use the standard addEventListener method instead, e.g.:

const cardForm = await Paytool.embedCardForm(/* options */);
cardForm.addEventListener("statechange", event => {
  // event.detail is CardFormEmbedState
  console.log(event.detail);
});
cardForm.addEventListener("cardnumberchange", event => {
  // Deprecated: `token` shape may appear as `{ token: string | null }` when typing a new card number.
  // Prefer listening for `CardNumberInfo` by supplying `paymentMethods` in options.
  console.log(event.detail);
});
// Saved card selections are also surfaced via `cardnumberchange` when using saved methods
cardForm.addEventListener("submit", event => {
  // event.detail is CardFormEmbedState
  console.log(event.detail);
});
Copy

All the data you would normally receive from the callback functions of CardFormEmbedOptions is available under the CustomEvent.detail property.