> ## Documentation Index > Fetch the complete documentation index at: https://dev.moonpay.com/llms.txt > Use this file to discover all available pages before exploring further. # Quickstart > Build a working MoonPay on-ramp integration in your browser, from setup to a live fiat-to-crypto purchase. ## Overview Quickstart overview In this Quickstart, you will process cryptocurrency purchases via the MoonPay On-Ramp directly from your browser. Whether you are a complete beginner to coding or a seasoned expert, this guide will take you through all of the necessary steps to have you converting fiat to cryptocurrency in no time. ## What you will accomplish In this tutorial, you will: Configure On-Ramps widget in a local environment Create a new folder for code Initialize the widget in a file using HTML and JavaScript Edit the widget parameters Display the fully functional widget locally in your browser ## Prerequisites Before beginning, you will need: * **A MoonPay account**: If you do not have one, set one up on [this page](https://dashboard.moonpay.com/). * **An IDE (coding software):** Some popular ones are [Visual Studio Code](https://code.visualstudio.com/) and [IntelliJ WebStorm](https://www.jetbrains.com/webstorm/). We will be using Visual Studio Code in this tutorial. * **A web browser:** Any web browser will work. We will be using Google Chrome in this tutorial. ## Implementation ### Step 1: Set up a file for your integration In your IDE, create a new file for your On-Ramp code. Ours will be called `on-ramp.html`. ### Step 2: Retrieve API keys from the MoonPay Dashboard * Navigate to your [MoonPay Dashboard](https://dashboard.moonpay.com/) and log in. * Once logged in, navigate to the Developers tab on the sidebar → API Keys. * Here, you will be able to copy your API keys. In this tutorial, we will be using the publishable test key. Dashboard ### Step 3: Insert HTML and code into `on-ramp.html` * The code below will embed our Software Development Kit (SDK) directly into your HTML by way of `
``` * This script will detect when the HTML page loads and immediately run the JavaScript within the ` ``` ### Step 4: Do a test transaction * The first step of processing a test transaction using the MoonPay On-Ramp is to make sure that `environment` is set to`"sandbox"`, as shown above in the example code. This puts your widget in test mode. * Next, open up the widget, enter your email address, and log in. Login * Next, you will be asked to enter a wallet address if one hasn’t been passed through the parameters already. If you already have existing wallet addresses with MoonPay, they will show up here. Any wallet address will work for a test transaction. * Next, go and grab a test card from [this page of our documentation](/widget/sandbox-testing#adding-a-payment-method). Never use a test credit card on anything other than a test widget that has environment: "sandbox", otherwise your MoonPay account may be blocked. * If successful, you should see a screen that looks like the below. Order complete ## Completion Congratulations, you have just integrated the MoonPay On-Ramp! 🎉 There are so many ways to integrate this widget to enhance user experience when buying cryptocurrency. If you want to know about alternative ways to integrate with MoonPay, check our [Integrations (SDKs)](/widget/on-ramp/integration-methods/sdks/overview) page. Any questions? Feel free to visit our [Help Center](https://support.moonpay.com/en/) to dig into our other resources or drop us a line!