Skip to main content

Stripe Payment Methods

The Revup Unified SDK supports Stripe Link as an alternative payment method through the stripe_link APM identifier. Stripe Link lets returning customers pay with saved payment details without re-entering card information.

This page covers Stripe Link configuration for both Revup Unified SDK 1.0 and Revup Unified SDK 1.1.


Stripe Payment Methods — PIX, iDEAL, Amazon Pay and SEPA Direct Debit

RevUp supports three Stripe-backed alternative payment methods through the Stripe Payment Element: pix, ideal, and sepa_debit. They share the same checkout UX and event contract.

SDK keyMethodTypical flow after submit
pixPIX (Brazil)QR code or bank UI inside Stripe; may require user interaction, amount must be in BRL
idealiDEAL (Netherlands)Bank redirect when required
sepa_debitSEPA Direct DebitIBAN and mandate fields inside Stripe Element

Important: Use sepa_debit in your SDK configuration. Some backend APIs expose the alias sepa; the SDK maps that alias when calling the pay endpoint. Using name: 'sepa' in revup.init() is not valid and will cause initialization failure.
Regarding pix, the button will show only when amount inside the Order POST request is in BRL.


Enabling the methods

No new revup.init() fields are required. Enable a method when:

  1. Your backend returns it as available for the order (with Stripe provider config including publicKey).
  2. You list it in apms.primary, apms.secondary, or apms.other.
await revup.init({
containerId: 'revup-container',
apms: {
secondary: [
{ name: 'pix' },
{ name: 'ideal' }
],
other: [
{ name: 'sepa_debit' }
]
}
});

type and color on ApmEntry are ignored for Payment Element methods (they apply to Express Checkout buttons only).


Checkout UX

  • Each method renders a collapsible Stripe Payment Element (accordion layout, starts collapsed).
  • A RevUp Pay Now submit button appears below the Element when expanded.
  • Only one payment section (card form or one Stripe method) is expanded at a time.
  • While a payment is processing, other payment slots are disabled automatically.
  • PIX, iDEAL, and SEPA logos appear in the “+ N more payment methods” toggle when placed in the other zone.

Backend prerequisites

  • Stripe publishable key (publicKey) in APM configuration.
  • Pay endpoint returns client_secret and return_url for Stripe confirmPayment.
  • Optional paymentMethodConfiguration for Stripe Payment Method Configuration.
  • Content Security Policy must allow https://js.stripe.com.

Events

Listen via revup.onRevupMessage(). See Log & Event Service for the full contract.

EventWhen
payment.submittedUser clicked Pay Now; payment attempt started
payment.action_requiredUser must complete an step (QR, redirect, mandate). See payload below.
payment.successTerminal success
payment.failedTerminal failure — error.name is pix_error, ideal_error, or sepa_debit_error
apm.unavailableMethod cannot be used (config, SDK load, or capability)

payment.action_required payload (Stripe Payment Element):

  • context.apmpix, ideal, or sepa_debit
  • context.transactionStatuswaiting_user_interaction
  • data.message — human-readable status (e.g. awaiting QR scan)

Note: payment.cancelled is not emitted for these methods. Users dismiss the flow by collapsing the accordion.


Appearance

RevUp partially themes the Stripe Payment Element by mapping Appearance API variables (border radius, font family, primary/background/text colors, accordion border, input focus). Full Appearance API rules do not apply to Stripe-hosted input fields.


Include stripe_link in your APM configuration when calling init().

SDK 1.0

Add stripe_link to the apms.enabled array:

await revup.init({
containerId: 'revup-container',
apms: {
enabled: ['apple_pay', 'google_pay', 'paypal', 'stripe_link'],
buttonTypes: {
apple_pay: 'plain',
google_pay: 'plain',
paypal: 'plain'
}
}
});

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

SDK 1.1

Place stripe_link in the appropriate zone (primary, secondary, or other):

await revup.init({
containerId: 'revup-container',
apms: {
primary: [
{ name: 'apple_pay', capabilityDetection: true },
{ name: 'google_pay', capabilityDetection: true },
{ name: 'paypal', type: 'checkout', color: 'blue' }
],
secondary: [
{ name: 'stripe_link' }
]
}
});
info

Stripe Link does not support color customization in SDK 1.1 — the color property is ignored.


Checking availability

Before rendering Stripe Link, you can query which APMs are available for the current merchant session:

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

If Stripe Link is not returned, the method is not enabled for the merchant or order context.


Payment flow

Stripe Link payments follow the same indirect status flow as PayPal:

  1. The SDK returns a WAITING_USER_INTERACTION status.
  2. The customer completes authentication or confirmation in the Stripe Link UI.
  3. A notification unlocks the payment to a final status (SUCCESS, FAILED, etc.).

This behavior is similar to 3D Secure card payments — the redirection URL is provided in the threeDSChallengeResult field.


Events

Stripe Link dispatches events with context.apm set to stripe_link. Key events include:

EventDescription
validation.changedFired when the Stripe Link element completeness changes (data.complete indicates whether the element is ready)
payment.submittedPayment processing has started
payment.action_requiredCustomer interaction is required
payment.success / payment.failedTerminal payment outcome
payment.cancelledCustomer cancelled the payment
apm.unavailableStripe Link could not be rendered (SDK load error or no available methods)
stripe_link_errorStripe Link module encountered an error

For the full event reference, see Event Handling in the SDK 1.0 documentation.


Layout behavior (SDK 1.1)

In SDK 1.1, Stripe Link can be placed in any payment zone (primary, secondary, or other). If Stripe Link fails after initial render — for example, when the Stripe SDK loads but no saved methods are available — the SDK removes the method's slot and updates the layout automatically. No additional merchant handling is required; re-calling init() resets the layout.

See Checkout Layout for details on zone configuration and reactive layout behavior.