Create a WebElementGroup

GETTRX.js allows you to create WebElement Group which will hold the customizable UI components (i.e Payment Web Element and/or Checkout Web Element) and load them within secure iframes on your website. Additionally it seamlesly handles any required interactions between the Web Elements that you choose to initialize.

The Web Element Group will hold the common configurations for the web elements that will be mounted on your UI. For example you will be able to configure:

SDK Tokenization Mode (Payment/Set up)
Tokenization for Future Use
Payment Methods allowed
UI Appearance & Fonts
and more...

Initializing the Web Elements Group

To initialize the webElements Group you must call its initialization method and pass any the initialization options to customize the Web Elements that will be linked to the group.

Initialization Method

gettrx.webElements(options?)

The options parameter allows you to customize the WebElementGroup. Refer to WebElementGroup Options Page for details on the available options that you can use.

Initialization Examples

const webElementGroup = gettrx.webElements({
  mode: 'payment',
  currency: 'usd',
  amount: 10.99,
  paymentMethodTypes: ['card','us_bank_account'],
  fonts: {                             
		cssFontSource: {
			src : 'https://fonts.googleapis.com/css2?family=Instrument+Serif:ital@1&display=swap',
			family: 'Instrument Serif',
		}                                                      
  },
  appearance: {
    labels:'above',
    variables: {
      colorPrimary: '#0570de',
      colorBackground: '#ffffff',
      colorText: '#30313d',
      colorDanger: '#df1b41',
      fontFamily: 'Ideal Sans, system-ui, sans-serif',
      spacingUnit: '2px',
      borderRadius: '4px'
    }
  }
});

Other Methods Available

The Web Element Group has an "Update" method that allows you to update the gre. For the details please refer to WebElementGroup Methods Page