latest
Safe{Core} Protocol WhitepaperSupportGitHub
Search
⌃K
Links
Comment on page

Stripe

The Stripe Crypto OnRamp service allows individuals to securely purchase cryptocurrencies from your application.

What are we going to learn?

This guide demonstrates how to use the StripePack as part of the OnRampKit 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 usage requires a server to start the interaction with their services, we will also be using a pre-deployed server and providing a public key for testing purposes.
The Stripe widget

Prerequisites

  1. 1.
    ​Node.js and npm​
  2. 2.
    ​Stripe account to get your own public and private keys​
  3. 3.
    A deployed server (example) 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.

Install dependencies

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

Using the StripePack in your Web App

The StripePack can be used with any frontend framework like Reactjs, Vuejs, Angular or even plain HTML and Javascript. In this example, we are using it with plain JavaScript.
  1. 1.
    Load the application and initialize the StripePack using the following snippet:
const stripePack = new StripePack({
// Get public key from Stripe: https://dashboard.stripe.com/register
stripePublicKey:
'pk_test_51MZbmZKSn9ArdBimSyl5i8DqfcnlhyhJHD8bF2wKrGkpvNWyPvBAYtE211oHda0X3Ea1n4e9J9nh2JkpC7Sxm5a200Ug9ijfoO',
// Deploy your own server: https://github.com/5afe/aa-stripe-service
onRampBackendUrl: 'https://aa-stripe.safe.global'
})
await stripePack.init()
  1. 2.
    Add a container in any place in your web page. We choose to add a div container with an id of stripe-root:
<div id="stripe-root"></div>
  1. 3.
    Render the Stripe widget inside the container by providing the CSS selector to the element prop in the open() method:
// See options for using the StripePack open method in:
// https://stripe.com/docs/crypto/using-the-api
const sessionData = await stripePack.open({
element: '#stripe-root', // Can be any CSS selector
theme: 'light' // light | dark
// Optional, if you want to use a specific created session
// ---
// sessionId: 'cos_1Mei3cKSn9ArdBimJhkCt1XC',
// Optional, if you want to specify default options
// ---
// defaultOptions: {
// transaction_details: {
// wallet_address: walletAddress,
// lock_wallet_address: true
// supported_destination_networks: ['ethereum', 'polygon'],
// supported_destination_currencies: ['usdc'],
// },
// customer_information: {
// email: '[email protected]'
// }
})
Make sure you include the element. Otherwise, you may get the following error:
Error when Specifying the element ID is not provided
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 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.
  1. 4.
    Listening to events is important for understanding what is happening around. It helps us to create a proper UI in our web page.
Check the Stripe frontend events for the list of available events.
const uiLoadedHandler = () => {
console.log('UI loaded')
}
​
const sessionUpdatedHandler = (e) => {
console.log('Session Updated', e.payload)
}
​
stripePack.subscribe('onramp_ui_loaded', uiLoadedHandler)
stripePack.subscribe('onramp_session_updated', sessionUpdatedHandler)
​
...
​
stripePack.unsubscribe('onramp_ui_loaded', uiLoadedHandler)
stripePack.unsubscribe('onramp_session_updated', sessionUpdatedHandler)

Testing my DApp containing 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.
Field
Value
Description
Email
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

KYC Personal info example
KYC Address Example
Payment Method

StripePack complete React example

Check a complete example in the safe-core-sdk repo. Follow the steps in the README.md to run the example and configure the environment variables (VITE_MONERIUM_CLIENT_ID is not necessary) for the pack following the .env.sample.
Previous
Guides
Next
Monerium
Last modified 4mo ago