# How to create new success page react

![Example](https://2592634121-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FT5HLPrqZhkeNGgJP37dC%2Fuploads%2FGR6Jq6MR6JN9vdVmjg1l%2FScreen%20Shot%202022-08-08%20at%2013.57.50.png?alt=media\&token=b9d7078c-a47e-4326-b3d9-c5e1dfe8378f)

{% code title="App.js" %}

```javascript
import logo from './logo.svg';
import './App.css';
import * as React from "react";
import axios from 'axios';
import { useLocation, useSearchParams } from "react-router-dom";
function App() {

  const queryParams = new URLSearchParams(window.location.search)
  const queryString = queryParams.get("external_id");

  var config = {
    method: 'get',
    url: `https://us-central1-appgregator.cloudfunctions.net/xendit/find?external_id=${queryString}&name=ft-4&connection_name=xendit-sanbox-1`,
    headers: { 
      'x-api-key': 'XXX'
    }
  };  

  axios(config)
  .then(function (response) {
    console.log(JSON.stringify(response.data));
  })
  .catch(function (error) {
    console.log(error);
  });
  
  

  return (
    <div className="App">
      <header className="App-header">
        <img src={logo} className="App-logo" alt="logo" />
        <p>
          {queryString}
        </p>
        <a
          className="App-link"
          href="https://reactjs.org"
          target="_blank"
          rel="noopener noreferrer"
        >
          PAYMENT SUCCESSFULL!
        </a>
      </header>
    </div>
  );
}

export default App;

```

{% endcode %}
