Initialization

If you are upgrading from SDK 1.0, focus on the sections below that changed: APMs configuration (zoned layout), Form configuration (enabled, selfHostedDomain), and the top-level appearance object (see Appearance API).

5. Initialize the payment UI: init(options)

After the container exists in the DOM, call revup.init(options). This method is async and builds the layout, initializes APMs, and loads the credit card form iframe.

await revup.init({
  containerId: 'revup-container',
  form: { ... },
  apms: { ... },
  appearance: { ... },
  language: 'en-US'
});

Parameters: RevupOptions

PROPERTY	TYPE	REQUIRED	VALUE / DEFAULT	DESCRIPTION
containerId	string	Yes	'revup-container'	ID of the DOM element that will host the payment UI.
form	object	No	{...}	See Form configuration.
apms	object	No	{...}	See APMs configuration.
appearance	object	No	{ theme: "default", variables: {}, rules: {} }	Optional checkout styling via themes, variables, and rules. Replaces deprecated form.styles and form.buttonStyles. See the Appearance API.
language	string	No	'en-US'	BCP 47 language code for form labels, APM buttons, and placeholders. If omitted, the SDK detects the browser language and falls back to 'en-US'.

Supported language codes can be inspected with Revup.getAvailableLanguages().

Form configuration

PROPERTY	TYPE	DEFAULT	DESCRIPTION
enabled	boolean	true	When false, the card form and "Pay with card" button are not rendered.
collapsed	boolean	true	If true, the card accordion starts collapsed. If false, starts expanded.
showZipCode	boolean	false	Whether to show the ZIP/postal code field. Set to true to display it.
cardBrands	array	['visa', 'mastercard']	Card-brand icons shown in the card-number field before a brand is detected (not on the accordion button).
selfHostedDomain	boolean	true	When true (default), DDC / device-fingerprint requests run inside the hosted card form iframe. When false, the Revup SDK on your merchant page performs those HTTP posts and hidden form submissions so the browser context matches your checkout origin (some ACS / gateway 3DS flows require a first-party merchant context). Use false only when integrating the SDK on your primary checkout page; nested iframe setups are not supported.
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.

Supported brands: "visa", "mastercard", "american_express", "unionpay", "jcb", "discover", "diners_club", "maestro", "visa_electron", "vpay", "rupay", "elo", "elo_new", "hipercard", "verve", "troy", "mir", "cartes_bancaires", "girocard", "dankort", "bancontact", "interac", "bc_card", "dinacard", "cabal", "napas", "mada", "knet", "benefit".

info

Checkout styling is configured through the top-level appearance object (not form.styles or form.buttonStyles) — see the Appearance API.

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.

APMs configuration

The apms object configures alternative payment method buttons in three optional zones. Each zone is an array of ApmEntry objects; the SDK skips a zone when it is empty or contains no available methods.

A payment method may appear in only one zone. Duplicates across zones are de-duplicated with priority primary > secondary > other.

PROPERTY	TYPE	DESCRIPTION
primary	ApmEntry[]	APM buttons rendered above the credit-card accordion. Maximum of 4 entries (extra entries are dropped).
secondary	ApmEntry[]	Compact 2-column grid rendered below the card accordion, preceded by an "Or pay with" divider. Maximum of 4 entries. Hidden when empty. By default we set all APMs light theme color.
other	ApmEntry[]	Collapsed "+ N more payment methods" dropdown below the secondary grid. Unlimited entries. Hidden when empty. By default we set all APMs light theme color.

ApmEntry fields

PROPERTY	TYPE	REQUIRED	DESCRIPTION
name	string	Yes	APM identifier (e.g. apple_pay, paypal, google_pay). credit_card is not valid here; configure the card flow through form.
type	string	No	Vendor-specific button style (e.g. checkout for PayPal, buy for Google Pay).
color	string	No	Vendor-specific button color. Supported values depend on the APM (see below). By default we set all APMs light theme color in the secondary and other sections.
capabilityDetection	boolean	No	When true, the APM performs a device/browser capability check before rendering — hiding the button if unsupported. Defaults to false. Only honoured by Apple Pay and Google Pay. If detection fails, the SDK dispatches apm.unavailable for that method.

Supported color values by APM:

• apple_pay: any valid CSS color (e.g. #1f6feb), or presets black, white, white-outline. If omitted in primary, the SDK auto-selects black or white from background contrast.
• google_pay: default, black, white.
• paypal: gold, blue, silver, white, black.
• stripe_link: no color customization (value is ignored).
• amazon_pay: no color customization (value is ignored).

Secondary / other defaults: methods listed only in secondary or other (not in primary) without an explicit color receive Apple Pay white-outline, Google Pay white, and PayPal white.

Complete initialization example

await revup.init({
  containerId: 'revup-container',
  language: 'en-US',
  appearance: {
    theme: 'default',
    variables: {
      submitButtonBackgroundColor: '#306de5',
      submitButtonTextColor: '#FFFFFF',
      submitButtonHeight: '44px',
      submitButtonBorderRadius: '16px'
    }
  },
  form: {
    collapsed: false,
    showZipCode: true,
    cardBrands: ['visa', 'mastercard', 'american_express']
  },
  userInfo: {
    email: { required: true, value: '' }
  },
  apms: {
    primary: [
      { name: 'apple_pay', color: '#111111', capabilityDetection: true },
      { name: 'google_pay', color: 'white', capabilityDetection: true },
      { name: 'paypal', type: 'checkout', color: 'blue' }
    ],
    secondary: [
      { name: 'amazon_pay' },
      { name: 'stripe_link' }
    ],
    other: [
      // Additional APMs hidden behind the "+ N more" toggle
    ]
  }
});

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'
});

If the container id is missing from the DOM, init() throws:

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

6. Optional: Get available APMs

To know which APMs are available for the current merchant/session (e.g. for debugging or UI logic), you can call:

const paymentMethods = await revup.getApmsAvailable();
// e.g. ['apple_pay', 'google_pay', 'paypal', 'stripe_link', 'amazon_pay']

This can be called before init() (as in the reference integration) or whenever you need to inspect merchant-enabled APMs for the current session.

info

This method is optional and has an additional loading time. It can be called in parallel to loading the SDK as it is not necessary for its initialization.

7. Cleanup and re-init

If the user navigates away or you need to re-render (e.g. new orderId):

1. Remove the onRevupMessage listener with the cleanup function:

const revupMessageCleanup = revup.onRevupMessage((event) => {
  // Handle Revup event
});
// Clean listener
revupMessageCleanup();

2. Clear the container: container.innerHTML = ''.
3. When the container is available again and you have a new config/orderId, create a new Revup instance and call init() again.

caution

Do not reuse the same Revup instance for a different order without clearing the DOM and re-initializing; use a fresh instance per checkout session if your app flow requires it.

const container = document.getElementById('revup-container');
if (container) container.innerHTML = '';
// Later, when sdkLoaded && orderId:
revup = new Revup(config);
await revup.init({ containerId: 'revup-container', form: { ... } });