StripePack

Stripe Crypto Onramp service (opens in a new tab) allows individuals to securely purchase cryptocurrencies from your application.

Install dependencies

To use the StripePack, you need to install the stripe frontend libraries in addition to the @safe-global/onramp-kit package.

yarn add @safe-global/onramp-kit @stripe/stripe-js @stripe/crypto

Reference

The StripePack allows users to use the Stripe Crypto Onramp services with Safe.

This pack provides a customizable widget for users to purchase cryptocurrencies using Stripe services and it can be rendered in a DOM node on a webpage.

const stripePack = new StripePack(stripeConfig)
await stripePack.init()

new StripePack(stripeConfig)

Parameters

  • stripeConfig - The configuration for the Stripe pack. The options are:
StripeConfig {
  stripePublicKey: string
  onRampBackendUrl: string
}

The stripePublicKey is the public key for your Stripe account. You can get one using your account (opens in a new tab)

The onRampBackendUrl is the URL of the backend that starts a session with Stripe. For more information on how to create the server, refer to the official documentation (opens in a new tab). You can also check out the example application and server in the Safe{Core} SDK monorepo (opens in a new tab).

Caveats You should always call the init() method afterwards before interacting with the pack.

init()

Loads the Stripe scripts using the public key provided in the class instantiation and initialize the Stripe SDK.

open(stripeOpenOptions)

Opens the Stripe widget in the chosen DOM node (CSS selector) inside a webpage.

Parameters

The options to be passed to this method are:

StripeOpenOptions {
  element: string
  sessionId?: string
  theme?: 'light' | 'dark'
  defaultOptions: StripeDefaultOpenOptions
}
  • element - This is the CSS selector for the element where the widget will be displayed.
  • sessionId - Optionally provide a session ID for the Stripe session. If not provided, the pack will create a new session.
  • theme - This is an optional theme for the widget. If not specified, the default theme will be applied.
  • defaultOptions- The default options for the widget are available here (opens in a new tab). Refer to the official Stripe docs (opens in a new tab) for instructions.

close()

Closes the Stripe widget. This method shouldn't be called directly but using the SafeOnrampKit close method instead.

subscribe(event, handler)

Subscribes to authentication state changes. Check the Stripe frontend events (opens in a new tab) for the list of available events.

Parameters

  • event - The event you want to subscribe from.
  • handler - The handler function that will be called when the event is triggered.

unsubscribe(event, handler)

Unsubscribes from authentication state changes.

Parameters

  • event - The event you want to unsubscribe from.
  • handler - The handler function that will be called when the event is triggered.

Usage

Instantiate the class and call the init method when the page or component are loaded, followed by the open(options) method when you want to start the interaction.

The open method renders the Stripe widget.

// Instantiate and initialize the pack
const stripePack = new StripePack(stripeConfig)
stripePack.init()
 
// Open
await stripePack.open(stripePackOpenOptions)
 
// Subscribe to events
const handler = (event) => {}
stripePack.subscribe('onramp_ui_loaded', handler)
stripePack.unsubscribe('onramp_session_updated', handler)
 
// Close
await stripePack.close()