Configuration reference

PaymentSDK.mount(elementId: string, config: PaymentSdkConfig): Promise<HTMLIFrameElement>

Required options

Option	Type	Description
sessionId	string	Session ID returned by POST /api/session.
productId	number	ID of the product being purchased.
domain	string	Host name of the page, e.g. shop.example.com. Must match the session’s domain. Sent to the API as landingDomain.

Customer data

Option	Type	Description
fields	Field[]	Extra inputs rendered with the card form. See Fields.
values	object	Pre-filled or hidden values: email, name, lastName, phone, country, state, zip. Used when the matching field isn’t shown.
additionalData	Record<string, string>	Your own key/value pairs (click IDs, campaign, order ID…). They are returned in the CONVERSION webhook as additional_data.

Fields

type Field = {
  type: 'email' | 'name' | 'lastName' | 'phone' | 'country' | 'state' | 'zip' | 'text' | 'divider';
  label?: string;
  placeholder?: string;
  position?: 'above' | 'below';   // relative to the card form
  size?: 'full' | 'half';         // two 'half' fields share a row
  name?: string;                  // required for type 'text'
};

• Every type except text and divider can appear once.
• state and zip require a country field.
• email (or values.email) is required to complete a payment.

Card form

Option	Type	Description
cardFields.showNameField	boolean	Show a “name on card” input.
cardFields.name	{ label, placeholder }	Name on card labels.
cardFields.cardNumber	{ label, placeholder }	Card number labels.
cardFields.expiration	{ label, placeholder }	Expiry labels, e.g. MM/YY.
cardFields.cvc	{ label, placeholder }	CVC labels.
cardFields.showIcons	boolean	Show card brand icons.
cardFields.autoComplete	boolean	Allow browser autofill.

Appearance

Option	Type	Description
payButton	{ text?, color?, backgroundColor? }	Pay button label and colors.
theme.styles	{ label?, input?, select? }	CSS style objects applied to labels, inputs and selects. See Styling.

3-D Secure Beta

Option	Type	Description
threeDSRequired	boolean	Run a 3-D Secure authentication before submitting the payment.
failOnThreeDSChallenge	boolean	Fail instead of showing a challenge to the buyer.
cancelOnThreeDSFailure	boolean	Stop the payment if 3-D Secure fails.

Caution

3-D Secure is in beta. Contact CreditCore before enabling it in production.

Callbacks

Option	Signature	When
onReady	() => void	The form is rendered and ready for input.
onError	(error: { message: string }) => void	Invalid configuration or the card form failed to load.
onMessage	(message: SdkMessage) => void	Checkout result and 3-D Secure progress. See Events & callbacks.

Other

Option	Type	Description
sandbox	boolean	Reserved. Sandbox vs. production is decided by your account configuration.

Full example

PaymentSDK.mount('checkout', {
  sessionId: '3f6c2b8e-1d2a-4c55-9a3e-7b1f0c9d2e41',
  productId: 12,
  domain: 'shop.example.com',
  fields: [
    { type: 'email', label: 'Email', placeholder: 'you@example.com' },
    { type: 'name', label: 'First name', size: 'half' },
    { type: 'lastName', label: 'Last name', size: 'half' },
    { type: 'country', label: 'Country', position: 'below' },
  ],
  cardFields: {
    cardNumber: { label: 'Card number', placeholder: '0000 0000 0000 0000' },
    expiration: { label: 'Expiry', placeholder: 'MM/YY' },
    cvc: { label: 'CVC', placeholder: '123' },
    showIcons: true,
    autoComplete: true,
  },
  payButton: { text: 'Start subscription', backgroundColor: '#2563eb', color: '#ffffff' },
  additionalData: { clickId: 'abc123', campaignId: '77' },
  onReady: () => {},
  onError: (e) => console.error(e.message),
  onMessage: (m) => console.log(m),
});