StripePack

​Stripe Crypto OnRamp service 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)
Params
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​
The onRampBackendUrl is the URL for the backend that starts a session with Stripe. For more information on how to create the server, refer to the official documentation. You can also check out the example application and server in the Safe{Core} SDK monorepo.
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.
Params
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. Refer to the official Stripe docs 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 for the list of available events.
Params
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.
Params
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()

OnRampKitBasePack

MoneriumPack

Last modified 2mo ago