Integration Steps

Onramper API Integration Steps

Integrating Onramper via API allows you to fully customize and control the onramping experience on your platform. Follow these detailed steps to ensure a seamless integration:

Step 1: Obtain API Key and Set Up Webhook URL

  1. Contact Onramper Sales Team:
    • Reach out to the Onramper sales team to acquire your API key. This key is essential for authenticating your requests to the Onramper API.
  2. Set Up Webhook URL:
    • During the setup process, configure a webhook URL to receive notifications about transaction states. Ensure to securely store the given secret key for validating webhook payloads.

Step 2: Configure API Endpoints

  1. Authentication:

    • Use the API key to authenticate your requests. Include it in the header of your API calls:
      headers: {
        'Authorization': `YOUR_API_KEY`
      }			
      
  2. Supported Data endpoint:

    • Fetch the list of different asset, payment method and provider combinations supported by onramper. We currently provide several api endpoints catering to different integration needs here. Supported
  3. Payment Types endpoint

    • Fetch the list of payment methods for each country based on the source (fiat) and destination (crypto) currencies provided, as well as the user’s country, using Payment types.
  4. Defaults endpoint:

  5. Quote Endpoint:

  • GET https://api.onramper.com/quotes/{sourceCurrency}/{destinationCurrency}
    
  1. Create Transaction:
    • create a new transaction session with onramper and obtain the reference link for the transaction provided by the selected onramp: Initiate a Transaction

Step 3: Implement Frontend Integration

  1. Collect User Inputs:

    • Gather the necessary inputs from the user, such as the fiat amount, cryptocurrency, and payment method.
  2. Fetch and Display Quotes:

    • Use the Quotes API to fetch and display real-time quotes based on user inputs. Ensure the selected quote is prominently displayed to the user.
  3. Rank and label onramps:

  4. Transaction Flow:

    • Guide the user through the transaction flow, ensuring they confirm all details before proceeding. Use the transaction API to initiate the transaction and handle the response appropriately.

Step 4: Handle Webhooks and Transaction States

  1. Webhook Listener:

    • Implement a listener to handle webhook notifications. register the webhook endpoint by contacting our custom success team and obtain the webhook secret. This will provide updates on the transaction status, such as pending, completed, or failed states. For implementation details refer to Optional: Webhook Setup
    • Example:
      app.post('/webhook', (req, res) => {
        const payload = req.body;
        const secret = 'YOUR_SECRET_KEY';
        
        // Validate payload and handle transaction status
        if (validatePayload(payload, secret)) {
          // Process transaction status
          processTransactionStatus(payload);
        }
        
        res.sendStatus(200);
      });
      
  2. Transaction States:

    • Update your database and user interface based on the transaction state received from the webhook. Ensure users are notified of any changes to their transaction status in real-time.

Step 5: Testing and Optimization

  1. Test the Integration:

    • Thoroughly test your integration in a staging environment. Ensure all possible user flows and edge cases are covered.
  2. Optimize User Experience:

    • Implement best practices such as localizing fiat currency based on the user’s IP, adding a payment method selector, and displaying relevant labels (e.g., low-KYC, highest success rate) to enhance the user experience.
  3. Monitor and Improve:

    • Continuously monitor the performance of your integration. Use analytics to identify areas for improvement and optimize the flow to increase conversion rates.

By following these steps, you can leverage the full potential of Onramper's API to create a powerful and customised onramping experience for your users.