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_US'   // 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_US', 'es_ES'). Defaults to browser language
userInfo	object	No	Optional payer information for the hosted card form. Pass at the top level of init() next to form and apms. See User info (userInfo) below.

User info (userInfo)

Optional object on revup.init(). Use it to collect payer email on the hosted credit card form.

PROPERTY	TYPE	VALUE	DESCRIPTION
email	object	{ ... }	Nested settings for the email field. Omitted unless you need email collection.
email.required	boolean	false	When true, the hosted form shows an email field above the card inputs and requires a valid address before pay.
email.value	string	``	Pre-fills the email field when it is shown.

If the shopper provides an email, the payment request body includes payerEmail (trimmed). If email.required is false or omitted, the email field is not shown.

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
capabilityDetection	string[]	['apple_pay', 'google_pay']	Optional list of APM methods that should run device/browser capability checks before rendering. Methods not listed skip capability checks. Applies to Apple Pay and Google Pay.

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

APM capability detection

The SDK supports optional capability detection for wallet APMs during initialization.

Behavior:

• If a method is included in apms.capabilityDetection, the SDK runs support checks before rendering that button.
• If a method is not included, capability checks are skipped.
• Apple Pay uses canMakePayments() and may run canMakePaymentsWithActiveCard() when merchantIdentifier is available.
• Google Pay uses isReadyToPay().
• If detection fails, the SDK dispatches apm.unavailable for that method and does not render an unusable button

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',
      ...
    },
    capabilityDetection: ['apple_pay', 'google_pay']
  }
});

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