Initialization

After the container exists in the DOM, call the asynchronous init() method:

await revup.init({
  containerId: 'revup-container',
  form: { ... },      // Optional - card form configuration
  apms: { ... },      // Optional - APMs configuration
  language: 'en_EN'   // Optional - defaults to browser language
});

Parameters: RevupOptions

PROPERTY	TYPE	REQUIRED	DESCRIPTION
containerId	string	Yes	ID of the DOM element that will host the payment UI
form	object	No	Card form configuration (see Form Configuration section)
apms	object	No	APMs configuration (see APMs Configuration section)
language	string	No	Language code (e.g., 'en_EN', 'es_ES'). Defaults to browser language

Form Configuration

PROPERTY	TYPE	VALUE	DESCRIPTION
styles	object	{}	Custom CSS styles for form elements (see Styling and Customization section)
showZipCode	boolean	false	Whether to show the ZIP code field
collapsed	boolean	true	If true, form is initially hidden with a "Pay with card" entry point
buttonStyles	object	{ backgroundColor: '#FFFFFF', textColor: '#000000', height: 44, borderRadius: 16 }	Styles for the primary submit button rendered by the hosted card form. Use these to match your brand while keeping accessible contrast and touch targets
cardBrands	array	['cb1', 'cb2', 'cb3', ...]	List of supported card brands used to display brand icons in the card input and to recognize the card type as the user types the card number. Supported Card Brands: "visa", "mastercard", "american_express", "unionpay", "jcb", "discover", "diners_club", "maestro", "elo", "hipercard", "troy", "mir", "cartes_bancaires", "dankort"

APMs Configuration

PROPERTY	TYPE	VALUE	DESCRIPTION
enabled	string[]	'[...apms]'	Array of APMs to display and their render order. Use getApmsAvailable() to query supported methods
buttonTypes	object	{ apple_pay: 'plain', google_pay: 'plain', paypal: 'plain', ... }	Defines the visual style variant for each APM button (e.g. plain). Use it to control how individual APM buttons are rendered

Supported APM values: 'apple_pay', 'google_pay', 'paypal', 'stripe_link'

Complete Initialization Example

await revup.init({
  containerId: 'revup-container',
  form: {
    collapsed: false,
    showZipCode: true,
    buttonStyles: { 
      backgroundColor: '#306de5',
      textColor: '#FFFFFF',
      height: 44,
      borderRadius: 16
    },
    cardBrands: ['visa', 'masterCard', 'american_express', ...],
  },
  apms: {
    enabled: ['apple_pay', 'google_pay', 'paypal'],
    buttonTypes: {
      apple_pay: 'book',
      google_pay: 'buy',
      paypal: 'checkout',
      ...
    }
  }
});

Minimal Initialization

const revup = new Revup({
    apiKey: '...',
    merchantDomain: window.location.host,
    orderId: '...',
});
const revupMessageCleanup = revup.onRevupMessage((event) => {
    console.log('Received Revup event:', event);
});
await revup.init({
    containerId: 'revup-container'
});

Error Handling: If the container ID is not found in the DOM, init() throws:

Container with id: <containerId> not found, please check if the container is present in the DOM