Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Feature 260/currency converter #273

Open
wants to merge 8 commits into
base: main
Choose a base branch
from
Open

Feature 260/currency converter #273

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
8 commits
Select commit Hold shift + click to select a range
0c22474
comprehensive guide for developers on implementing Chimoney Payouts
davidongora Oct 13, 2023
6be1ddf
image showing the user interface
davidongora Oct 14, 2023
044e4c9
documentation showing how to integrate payouts
davidongora Oct 14, 2023
2309cfb
fetch method for the api
davidongora Oct 20, 2023
c09bc6b
user interface intergrated with the api
davidongora Oct 20, 2023
9ca8ae8
interface styling
davidongora Oct 20, 2023
dc27716
feat:made the blog inituative
davidongora Oct 28, 2023
f228dd5
Merge branch 'Chimoney:main' into feature-260/currency-converter
davidongora Oct 29, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Binary file added submissions/Payouts_integration/Untitled document.docx
View file
Open in desktop
Binary file not shown.
125 changes: 125 additions & 0 deletions submissions/Payouts_integration/integration_docx.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,125 @@
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Chimoney Payouts Integration Guide</title>
</head>
<h1>Integrate Chimoney Payouts to Streamline Your Business</h1>

<p>Looking for a way to streamline your business and save time and money? Consider integrating Chimoney Payouts. Chimoney Payouts is a global payout platform that makes it easy to send and receive money to and from anywhere in the world.</p>

<h2>Benefits of Chimoney Payouts</h2>

<ul>
<li>Global reach: Supports multiple currencies and countries</li>
<li>Competitive fees</li>
<li>Ease of use</li>
<li>Security</li>
</ul>

<h2>How businesses and platforms use Chimoney Payouts</h2>

<ul>
<li>E-commerce platforms: To pay vendors and affiliates globally</li>
<li>Gig economy apps: To facilitate quick and secure payments to freelancers</li>
<li>Remittance services: To enable seamless money transfers between users</li>
<li>Marketplaces: To efficiently distribute funds to sellers or service providers</li>
<li>Crowdfunding platforms: To disburse funds to project backers with ease</li>
</ul>

<h2>Conclusion</h2>

<p>If you're looking for a way to streamline your business and save time and money, Chimoney Payouts is the perfect solution for you. With its global reach, competitive fees, ease of use, and security features, Chimoney Payouts is the best choice for businesses and platforms of all sizes.</p>

<a href="https://chimoney.io/payouts">Sign up for a free Chimoney Payouts account today!</a>

<body>
<div class="title" align="center">
<p><u><b>Chimoney Payouts Integration Guide</p></u>
</b></div>
<p><b>Finished product: </p></b>
<a href="https://rb.gy/y5awd"> currency converter using chimoney</a>

<p> Integration Steps (Using javascript and html as an Example): </p>


<p><b>Step 1: Obtain API Key</b></p>
<p>Register on Chimoney and obtain your API key in the developers portal </p>
<p>Follow this tutorial on how to get the get started with chimoney api and developer portal</p>
<p>For this tutorial we will be using the convert local currency amount to USD endpoint this is the url for that https://api.chimoney.io/v0.2/payouts/mobile-money
</p>

<p><b>Step 2: user interface</p></b>

We will create a small interface for easier integration with our api key the interface will provide a way for us to pass the two parameters that is the amount and the country code that are required for the endpoint.

<img src="./interface.png" alt="currency converter interface ">

<xmp>
<body>
<div class="title">
<h2>Get usd amount in Local</h2>
</div>
<div class="country">
sample country codes
<ul>
<li>Kenya code : KES</li>
<li>Nigeria code: NG</li>
<li>Ghana code: GHN</li>
</ul>
</div>
<div class="form">
<label>Country symbol</label>
<input type="text" id="symbol"> <br/> <br/> //input tags
<label>Amount </label>
<input type="text" id="amount"><br/><br/> //input tags
</div>
<div class="button">
<button onclick="convert()">Convert</button> //calls the convert function
</div>
<div id="result"></div>
</body>
</xmp>

The major parts of this code is this line <xmp><button onclick="convert()"></xmp>Convert</button>
Which on click calls the convert method which is where we have our api function

<p><b>Step 3: Initialize Chimoney</p></b>

<p></p>Let's now dive into the real part we will be using javascript for this and use the fetch in built method
<p></p>function convert () { //function triggered on click the
<p></p>const countrySymbol = document.getElementById('symbol').value; // this are to passed as parameter to the endpoint and the are keyed in by the user
<p></p>const amountInUSD = document.getElementById('amount').value;

<p>const options = { // fetch method takes to params that is the options and url so lets define the options
<p>method: 'GET', // this is the method used get method retrieves data
<p>headers: { // takes in our api key as application json
<p>accept: 'application-json',
<p>'X-API-KEY': "f53b14db7658d93aeb2f8589838b87e01d730d82b9c73e9878065452902790b7" //for best practices save your api key in the .env file
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

You should not have this key in the frontend

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

i passed it has an env variable. The one above is for demo purposes for those who may not know how to use env

<p>}
<p>};
<p>const apiUrl = 'https://api.chimoney.io/v0.2/info/usd-amount-in-local?destinationCurrency=USD&amountInUSD=1' //pass the url to the endpoint where data is to bne fetched
<p>fetch(apiUrl, options) //as we said earlier fetch takes two params pass them here, you can also use the axios method.it's also safe to test your codes in the sandbox/postman before coding it
<p>.then(response => response.json())
<p>.then(response => { document.getElementById('result').innerText = `Result: ${JSON.stringify(response)}`; ///we stringify the response we get so that it becomes user friendly then we render it under the result div
<p>})
<p>.catch(err => console.error(err));//if the response is not of status 200 a descriptive error will be returned
<p>}


<p><b>Step 4: Make a conversion</b>
<p>Click on the covert button and the result will be displayed

<p><b>Step 5: Handle Errors</b>

<p>Implement error handling to manage API responses:
<p>javascript
<p>.catch(err => console.error(err)); //this will make it easier to debug your code

<p><b>Demo Project:</b>

<p>link to GitHub repository containing the demo project showcasing the integration steps and a working example.
<a href="https://github.com/Davidongora/currency_converter">Github link</a> <p>
</div>
</body>
</html>
Binary file added submissions/Payouts_integration/interface.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
21 changes: 21 additions & 0 deletions submissions/currency_converter/apifetch.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,21 @@
// import APIKEY from "./key";

const convert = () => {
const countrySymbol = document.getElementById('symbol').value;
const amountInUSD = document.getElementById('amount').value;

const options = {
method: 'GET',
headers: {
accept: 'application-json',
// 'X-API-KEY': APIKEY
'X-API-KEY' : "f53b14db7658d93aeb2f8589838b87e01d730d82b9c73e9878065452902790b7"
}
};
const apiUrl = 'https://api.chimoney.io/v0.2/info/usd-amount-in-local?destinationCurrency=USD&amountInUSD=1'
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

What does this do?

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

this is the endpoint for currency converter it is then passed to the fetch method

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

IS this not converting USD to USD?

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

it converts local to usd

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The issue is that you’re using the prod endpoint instead of staging. You can switch between prod and staging endpoint in the api docs

also consider managing api keys, chimoney base url and other changeable parameters in env variable

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

cant find any resources about the prod and staging endpoints can we have a live meeting you show me the way around?

fetch(apiUrl, options)
.then(response => response.json())
.then(response => { document.getElementById('result').innerText = `Result: ${JSON.stringify(response)}`;
})
.catch(err => console.error(err));
}
35 changes: 35 additions & 0 deletions submissions/currency_converter/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,35 @@
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="./apifetch.js"></script>
<script src="./key.js"></script>
<link rel="stylesheet" href="./style.css">
</head>
<body>
<div class="title">
<h2>Get usd amount in Local</h2>
</div>
<div class="country">
sample country codes
<ul>
<li>Kenya code : KES</li>
<li>Nigeria code: NG</li>
<li>Ghana code: GHN</li>
</ul>
</div>
<div class="form">
<label>Country symbol</label>
<input type="text" id="symbol"> <br/> <br/>
<label>Amount </label>
<input type="text" id="amount"><br/><br/>
</div>
<div class="button">
<button onclick="convert()">Convert</button>
</div>

<div id="result"></div>

</body>
</html>
29 changes: 29 additions & 0 deletions submissions/currency_converter/style.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,29 @@
.country, .form {
margin-left: 30%;

}
.title {
color:purple;
text-align: center;
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}
.button {
text-align: center;
}

button {
background-color: purple;
border: none;
color: white;
padding: 15px 32px;
text-align: center;
font-size: 16px;
cursor: pointer;
border-radius: 8px;

}
#result {
margin-top: 20px;
text-align: center;
font-size: 18px;
}