Integration with Stripe
The Stripe Crypto Onramp service (opens in a new tab) allows individuals to securely purchase cryptocurrencies from your application.
This guide demonstrates how to use the StripePack as part of the OnrampKit (opens in a new tab) and incorporate it into your web application.
We are going to learn how to render the Stripe widget into your page. This widget allows the use your own Ethereum address for onramping cryptocurrencies. As Stripe API (opens in a new tab) usage requires a server (opens in a new tab) to start the interaction with their services, we will also be using a pre-deployed server (opens in a new tab) and providing a public key for testing purposes.
Prerequisites
- Node.js and npm (opens in a new tab)
- Stripe account to get your own public and private keys (opens in a new tab)
- A deployed server (example (opens in a new tab)) for communicating with Stripe APIs. We are providing both the public key and the server for testing purposes but you must use your own public key and server in production.
Steps
Install dependencies
_10yarn add @safe-global/onramp-kit @stripe/stripe-js @stripe/crypto
Initialize the StripePack
The StripePack can be used with any frontend framework like React, Vue, Angular or even plain HTML and JavaScript. In this example, we are using it with plain JavaScript.
Load the application and initialize the StripePack using the following snippet:
_10const stripePack = new StripePack({_10 // Get public key from Stripe: https://dashboard.stripe.com/register_10 stripePublicKey:_10 'pk_test_51MZbmZKSn9ArdBimSyl5i8DqfcnlhyhJHD8bF2wKrGkpvNWyPvBAYtE211oHda0X3Ea1n4e9J9nh2JkpC7Sxm5a200Ug9ijfoO',_10 // Deploy your own server: https://github.com/5afe/aa-stripe-service_10 onRampBackendUrl: 'https://aa-stripe.safe.global'_10})_10await stripePack.init()
Render the Stripe widget
Add a container in your web app.
_10<div id="stripe-root"></div>
We choose to add a div container with the stripe-root id to render the Stripe widget inside by providing the CSS selector to the element prop in the open() method.
_22// See options for using the StripePack open method in:_22// https://stripe.com/docs/crypto/using-the-api_22_22const sessionData = await stripePack.open({_22 element: '#stripe-root', // Can be any CSS selector_22 theme: 'light' // light | dark_22 // Optional, if you want to use a specific created session_22 // ---_22 // sessionId: 'cos_1Mei3cKSn9ArdBimJhkCt1XC',_22 // Optional, if you want to specify default options_22 // ---_22 // defaultOptions: {_22 // transaction_details: {_22 // wallet_address: walletAddress,_22 // lock_wallet_address: true_22 // supported_destination_networks: ['ethereum', 'polygon'],_22 // supported_destination_currencies: ['usdc'],_22 // },_22 // customer_information: {_22 // email: 'john@doe.com'_22 // }_22})
Make sure you include the element. Otherwise, you may get the following error:
You can also specify the default options for the widget. For example, you can specify the default wallet address, supported destination networks, and supported destination currencies. See the Stripe API documentation (opens in a new tab) for more details. The default options you specify using the open method will be passed through the Stripe API when using our provided server. When you create your own one (you need to do it on your production apps) you should do something similar.
Listen to Stripe events
Listening to events is important for understanding what's happening around. It helps us to create a proper UI in our web page. Check the Stripe frontend events (opens in a new tab) for the list of available events.
_15const uiLoadedHandler = () => {_15 console.log('UI loaded')_15}_15_15const sessionUpdatedHandler = (e) => {_15 console.log('Session Updated', e.payload)_15}_15_15stripePack.subscribe('onramp_ui_loaded', uiLoadedHandler)_15stripePack.subscribe('onramp_session_updated', sessionUpdatedHandler)_15_15..._15_15stripePack.unsubscribe('onramp_ui_loaded', uiLoadedHandler)_15stripePack.unsubscribe('onramp_session_updated', sessionUpdatedHandler)
Test the Stripe widget
In production, each customer should pass an individual KYC process but probably you want to test your application before 😊. You can use the following test data for bypass the KYC process while in test mode (opens in a new tab).
| Field | Value | Description |
|---|---|---|
| 8404.john.smith@example.com | Use any test or fake emails | |
| Phone Number | +18004444444 | Use +18004444444 for phone number |
| OTP Verification Code | 000000 | Use 000000 for the OTP verification code |
| First Name | John | Use any first name |
| Last Name | Verified | Use Verified for the last name |
| Birthday | 01/01/1901 | Use 01/01/1901 for successful identity verification |
| Identification Type | Social Security Number | Select Social Security Number for identification type |
| Identification Number | 000000000 | Enter 000000000 to fill the identification number field |
| Country | United States | Select United States for country |
| Address Line 1 | address_full_match | Use address_full_match for successful identity verification |
| City | Seattle | Use Seattle for city |
| State | Washington | Select Washington for state |
| Zip Code | 12345 | Use 12345 for zip code |
| Test Credit Card Number | 4242424242424242 | Use test credit card 4242424242424242 |
| Expiration Date | 12/24 | Use future expiration date 12/24 |
| CVC | 123 | Use any CVC 123 |
| Billing Zip Code | 12345 | Use any zip code 12345 for billing |
Onramp Kit KYC test data - Examples
StripePack complete React example
Check a complete example (opens in a new tab) in the safe-core-sdk repository. Follow the steps in the README.md (opens in a new tab) to run the example and configure the environment variables (VITE_MONERIUM_CLIENT_ID isn't necessary) for the pack following the .env.sample (opens in a new tab).