Guides
Stripe

Integration with Stripe

The Stripe Crypto Onramp service (opens in a new tab) 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 (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.

The Stripe widget

Prerequisites

  1. Node.js and npm (opens in a new tab)
  2. Stripe account to get your own public and private keys (opens in a new tab)
  3. 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.

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 React, Vue, Angular or even plain HTML and JavaScript. In this example, we are using it with plain JavaScript.

  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. 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. 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: 'john@doe.com'
  // }
})

Make sure you include the element. Otherwise, you may get the following error:

Error when Specifying the element ID isn't 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 (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.

  1. 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.

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 (opens in a new tab).

FieldValueDescription
Email8404.john.smith@example.comUse any test or fake emails
Phone Number+18004444444Use +18004444444 for phone number
OTP Verification Code000000Use 000000 for the OTP verification code
First NameJohnUse any first name
Last NameVerifiedUse Verified for the last name
Birthday01/01/1901Use 01/01/1901 for successful identity verification
Identification TypeSocial Security NumberSelect Social Security Number for identification type
Identification Number000000000Enter 000000000 to fill the identification number field
CountryUnited StatesSelect United States for country
Address Line 1address_full_matchUse address_full_match for successful identity verification
CitySeattleUse Seattle for city
StateWashingtonSelect Washington for state
Zip Code12345Use 12345 for zip code
Test Credit Card Number4242424242424242Use test credit card 4242424242424242
Expiration Date12/24Use future expiration date 12/24
CVC123Use any CVC 123
Billing Zip Code12345Use 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 (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).