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.
_10yarn 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.
_10const stripePack = new StripePack(stripeConfig)_10await stripePack.init()
new StripePack(stripeConfig)
Parameters
stripeConfig- The configuration for the Stripe pack. The options are:
_10StripeConfig {_10 stripePublicKey: string_10 onRampBackendUrl: string_10}
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:
_10StripeOpenOptions {_10 element: string_10 sessionId?: string_10 theme?: 'light' | 'dark'_10 defaultOptions: StripeDefaultOpenOptions_10}
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.
_14// Instantiate and initialize the pack_14const stripePack = new StripePack(stripeConfig)_14stripePack.init()_14_14// Open_14await stripePack.open(stripePackOpenOptions)_14_14// Subscribe to events_14const handler = (event) => {}_14stripePack.subscribe('onramp_ui_loaded', handler)_14stripePack.unsubscribe('onramp_session_updated', handler)_14_14// Close_14await stripePack.close()