Onramp

``` Use the *client\_secret* from your server-side call in the previous step to initiate and mount the onramp session: ```javascript const stripeOnramp = StripeOnramp("<>"); initialize(); // Initialize the onramp element with a client secret function initialize() { // IMPORTANT: replace the following with your logic of how to mint/retrieve the client secret const clientSecret = "cos_1Lb6vsAY1pjOSNXVWF3nUtkV_secret_8fuPvTzBaxj3XRh14C6tqvdl600rpW7hG4G"; const onrampSession = stripeOnramp.createSession({clientSecret}); onrampSession .mount("#onramp-element"); } ``` To use the onramp in React, define two components: `CryptoElements` and `OnrampElement`. `CryptoElements` is a [React context](https://reactjs.org/docs/context.html) provider for an initialized `StripeOnramp` instance. The `OnrampElement` component renders the onramp UI using the *client\_secret* from the server-side call, shown in the previous step. ```jsx import {loadStripeOnramp} from '@stripe/crypto'; import {CryptoElements, OnrampElement} from './StripeCryptoElements'; const stripeOnrampPromise = loadStripeOnramp("<>"); export default () => { // IMPORTANT: replace with your logic of how to mint/retrieve client secret const clientSecret = "cos_1Lb6vsAY1pjOSNXVWF3nUtkV_secret_8fuPvTzBaxj3XRh14C6tqvdl600rpW7hG4G"; return ( ); } ``` ```jsx import React, { ReactNode } from 'react'; // ReactContext to simplify access of StripeOnramp object const CryptoElementsContext = React.createContext(null); export const CryptoElements = ({ stripeOnramp, children, }) => { const [ctx, setContext] = React.useState(() => ({ onramp: null })); React.useEffect(() => { let isMounted = true; Promise.resolve(stripeOnramp).then((onramp) => { if (onramp && isMounted) { setContext((ctx) => (ctx.onramp ? ctx : { onramp })); } }); return () => { isMounted = false; }; }, [stripeOnramp]); return ( {children} ); }; // React hook to get StripeOnramp from context export const useStripeOnramp = () => { const context = React.useContext(CryptoElementsContext); return context?.onramp; }; // React element to render Onramp UI export const OnrampElement = ({ clientSecret, appearance, ...props }) => { const stripeOnramp = useStripeOnramp(); const onrampElementRef = React.useRef(null); React.useEffect(() => { const containerRef = onrampElementRef.current; if (containerRef) { containerRef.innerHTML = ''; if (clientSecret && stripeOnramp) { stripeOnramp .createSession({ clientSecret, appearance, }) .mount(containerRef) } } }, [clientSecret, stripeOnramp]); return

; }; ``` After running the script, the onramp renders the following dialog: ![Stripe's fiat-to-crypto onramp being embedded into a third-party application](images/crypto/crypto-onramp-overview.png) Stripe’s fiat-to-crypto onramp embedded within a third-party application ### Sandbox values Sandbox transaction amounts are overridden by our pre-decided limits. Use the following values to complete an onramp transaction in *sandbox*: - On the OTP screen, use `000000` for the verification code. - On the personal information screen, use `000000000` for the SSN and `address_full_match` for address line 1. - On the payment details screen, use the test credit card number `4242424242424242`. ## View integration usage After you’ve launched the onramp, you can view customized usage reports in the [Stripe Dashboard](https://dashboard.stripe.com/crypto-onramp/reports). You can also return to the [onboarding page](https://dashboard.stripe.com/crypto-onramp/onboarding) to update the domains where you plan to host the onramp, and check the status of any onboarding tasks.