Web SDK API Reference

Mount Card Input

Syntax

window.NI.mountCardInput('mount-point', {
  style,
  apiKey,
  outletRef,
  onSuccess,
  onFail,
  onChangeValidStatus
});

Arguments

Argument	Optional	Description
mount-point	No	A valid DOM id where in the card input needs to get mounted.
style	Yes	A object with different parameters to configure the look and feel of the card input through CSS.
apiKey	No	This is the `apiKey` which needs to be provided to be able to mount the card-input.
outletRef	No	This is the unique outlet reference thats been assigned which can be determined by they N-Genius portal.
onSuccess	Yes	Callback function which will get triggered when card input has been successfully mounted.
language	Yes	Allows you to define the Language for the SDK. Values accepted: "ar" or "en". Default value: "en"
onFail	Yes	Callback function which will get triggered when card input has failed to load with some error.
onChangeValidStatus	Yes	Callback function which will be triggered when the overall validity of user populated fields changes. You may also use this callback as the trigger to display any inline input errors on a per-field or overall basis.

Dynamic currency conversion (DCC)

To offer Global Blue DCC on your card form, add these arguments to mountCardInput. They do nothing unless DCC is switched on for your outlet.

Argument	Optional	Description
`dccEnabled`	Yes	Set to `true` to offer DCC. The two DCC callbacks are only called when it is `true`.
`orderDetails`	No, when `dccEnabled` is `true`	The order's `amount`, in minor units, and its `currency`. The rate is looked up for this amount.
`orderAction`	Yes	`PURCHASE` or `AUTH`, the action your server sends. With `AUTH`, the DCC choice screen shows an authorisation disclaimer.
`onTriggerDCC`	No, when `dccEnabled` is `true`	Callback called with the offer when the card's currency is not the order's. Pass the offer to `handleDCCFlow`.
`onCompleateDcc`	Yes	Callback called with the customer's choice. The name is spelt this way in the SDK, so use it exactly.

Handle DCC Flow

Syntax

const { isDccSelected, globalBlueId } = await window.NI.handleDCCFlow({
  config: { mountId, orderAction },
  dccData
});

Arguments

Argument	Optional	Description
`config.mountId`	No	The DOM ID of the container the DCC choice screen is shown in.
`config.orderAction`	Yes	`PURCHASE` or `AUTH`, as in `mountCardInput`.
`dccData`	No	The payload `onTriggerDCC` received, passed on unchanged.

The promise resolves when the customer chooses, with isDccSelected and, when the offer carried one, globalBlueId. The session generated next by generateSessionId carries the choice. For a worked example, see Using Global Blue DCC with the Web SDK.

Style Options

const style = {
  main: {} /* the style for the main wrapper div around the card input*/,
  base: {} /* this is the default styles that comes with it */,
  input: {} /* custom style options for the input fields */,
  invalid: {} /* custom input invalid styles */
};

Common Style Options

Styles options below are applicable for, base , input , invalid :

Style Name	Description
`color`	This takes in a `string` value for color and supports all the valid values that `CSS` supports.
`height`	This takes in a `string` value in pixels/em/rem and supports all the valid values that `CSS` supports.
`borderStyle`	This takes in a `string` value and supports all the valid values that `CSS` property `border-style` supports.
`borderWidth`	This takes in a `string` value in pixels/em/rem and supports all the valid values that `CSS` property `border-width` supports.
`borderColor`	This takes in a `string` value and supports all the valid values that `CSS` property `border-color` supports.
`borderRadius`	This takes in a `string` value in pixels/em/rem and supports all the valid values that `CSS` property `border-radius` supports.
`backgroundColor`	This takes in a `string` value and supports all the valid values that `CSS` property `background-color` supports.
`fontUrl`	Example: `https://fonts.googleapis.com/css?family=Cinzel&display=swap`
`fontFamily`	Example: `Cinzel`
`fontSize`	This takes in a `string` value and supports all the valid values that `CSS` property `font-size` supports.
`fontWeight`	This takes in a `string` value and supports all the valid values that `CSS` property `font-weight` supports.
`padding`	This takes in a `string` value and supports all the valid values that `CSS` property `padding` supports.

The following `css` options applicable for `main` property:

Style Name	Description
`margin`	This takes in a `string` value and supports all the valid values that `CSS` property `margin` supports.
`marginLeft`	This takes in a `string` value and supports all the valid values that `CSS` property `margin-left` supports.
`marginRight`	This takes in a `string` value and supports all the valid values that `CSS` property `margin-right` supports.
`top`	This takes in a `string` value and supports all the valid values that `CSS` property `top` supports.
`bottom`	This takes in a `string` value and supports all the valid values that `CSS` property `bottom` supports.
`left`	This takes in a `string` value and supports all the valid values that `CSS` property `left` supports.
`right`	This takes in a `string` value and supports all the valid values that `CSS` property `right` supports.
`padding`	This takes in a `string` value and supports all the valid values that `CSS` property `padding` supports.
`position`	This takes in a `string` value and supports all the valid values that `CSS` property `position` supports.
`overflow`	This takes in a `string` value and supports all the valid values that `CSS` property `overflow` supports.
`height`	This takes in a `string` value and supports all the valid values that `CSS` property `height` supports.
`width`	This takes in a `string` value and supports all the valid values that `CSS` property `width` supports.
`maxHeight`	This takes in a `string` value and supports all the valid values that `CSS` property `max-height` supports.
`maxWidth`	This takes in a `string` value and supports all the valid values that `CSS` property `max-width` supports.
`minHeight`	This takes in a `string` value and supports all the valid values that `CSS` property `min-height` supports.
`minWidth`	This takes in a `string` value and supports all the valid values that `CSS` property `min-width` supports.
`color`	This takes in a `string` value and supports all the valid values that `CSS` property `color` supports.
`background`	This takes in a `string` value and supports all the valid values that `CSS` property `background` supports.
`backgroundImage`	This takes in a `string` value and supports all the valid values that `CSS` property `background-image` supports.
`borderStyle`	This takes in a `string` value and supports all the valid values that `CSS` property `border-style` supports.
`borderColor`	This takes in a `string` value and supports all the valid values that `CSS` property `border-color` supports.
`borderRight`	This takes in a `string` value and supports all the valid values that `CSS` property `border-right` supports.
`borderRadius`	This takes in a `string` value and supports all the valid values that `CSS` property `border-radius` supports.
`boxSizing`	This takes in a `string` value and supports all the valid values that `CSS` property `box-sizing` supports.
`boxShadow`	This takes in a `string` value and supports all the valid values that `CSS` property `box-shadow` supports.
`zIndex`	This takes in a `string` value and supports all the valid values that `CSS` property `z-index` supports.

Updated 5 days ago

Did this page help you?