You should create a free 100Pay account which will give you access to your unique test key to test your integration.
We're going to use our public keys for this demo. To get your public key, login into your 100Pay dashboard and click on the Settings tab, and then click on Developers Settings.
You'll notice you have two keys: Public and Private. While building your app, it's a good idea to use your public key, as this will allow you to simulate transactions.
Since this is a client-side integration, it means that our API keys will be exposed. To prevent anyone gaining access to our 100Pay account, we want to make sure we're using our public keys. Private keys should only ever be used on the server.
So, let's get to coding! To start off, I'm going to create a new react app. I like to use npx to get started with my react apps, but you're welcome to use yarn.
npm create vite@latest react-100Pay-checkout -- --template react
Once our app is created, we'll need to navigate into our app's directory and start our app:
Let's take a moment and add the UI for our checkout page.
function App() {
<form onSubmit={handleSubmit}>
<div className="wrapper">
{/* name */}
<div className="input-group">
<label htmlFor="name">Name</label>
<input type="text" id="name" name="name" />
</div>
{/* email */}
<div className="input-group">
<label htmlFor="email">Email</label>
<input type="email" id="email" name="email" />
</div>
{/* phone */}
<div className="input-group">
<label htmlFor="phone">Phone</label>
<input type="tel" id="phone" name="phone" />
</div>
{/* currency */}
<div className="input-group">
<label htmlFor="currency">Currency</label>
<select name="currency" id="currency">
<option value="usd">USD</option>
<option value="eur">EUR</option>
<option value="gbp">GBP</option>
</select>
</div>
{/* amount */}
<div className="input-group">
<label htmlFor="amount">Amount</label>
<input type="number" id="amount" name="amount" />
</div>
<div className="action-cont">
<button type="submit">Submit</button>
</div>
</div>
</form>
}
export defualt App;
Now you should be able to a basic form in your browser!
Use the form to capture user details and payment information. The form includes fields for name, email, phone, currency, and amount.
This will help streamline the checkout process on your site. Ensure all fields are correctly filled out to facilitate smooth transactions through the 100Pay Checkout API.
But our form isn't functional yet. We need to add some logic that will submit our customer's data and initialize a transaction on 100Pay. Let's install the 100Pay Checkout SDK:
npm install @100pay-hq/checkout
Once the library installs successfully, we can add some variables to hold state and a function to handle the state changes. I'll explain the variables we're passing and what they're for in a little bit. For now we'll just add them and hardcode our publicKey and product amount, since they won't be changing.
const publicKey = "pk_your_public_key_here"
const [name, setName] = useState("")
const [email, setEmail] = useState("")
const [phone, setPhone] = useState("")
const [currency, setCurrency] = useState("")
const [amount, setAmount] = useState("")
function App() {
<form onSubmit={handleSubmit}>
<div className="wrapper">
{/* name */}
<div className="input-group">
<label htmlFor="name">Name</label>
<input type="text" id="name" name="name" onChange={(e) => setName(e.target.value)} />
</div>
{/* email */}
<div className="input-group">
<label htmlFor="email">Email</label>
<input type="email" id="email" name="email" onChange={(e) => setEmail(e.target.value) />
</div>
...
<button type="submit">Submit</button>
</div>
</form>
}
After completing the form and states for the form, import shop100Pay and call the checkout function to initiate the payment process. The shop100Pay function is the main entry point for integrating 100Pay's checkout process into your application. We will call our new function payWith100Pay;
const payWith100Pay = ({
name,
email,
phone,
currency,
amount,
}: PayWith100PayType) => {
shop100Pay.setup({
ref_id: "" + Math.floor(Math.random() * 1000000000 + 1),
api_key:
publicKey
customer: {
user_id: "1", // optional
name: name,
phone,
email,
},
billing: {
amount: amount,
currency: currency, // or any other currency supported by 100pay
description: "Test Payment",
country: "USA",
vat: 10, //optional
pricing_type: "fixed_price", // or partial
},
metadata: {
is_approved: "yes",
order_id: "OR2", // optional
charge_ref: "REF", // optionalm, you can add more fields
},
call_back_url: "http://localhost:8000/verifyorder/",
onClose: () => {
alert("You just closed the crypto payment modal.");
},
onPayment: (reference) => {
alert(`New Payment detected with reference ${reference}`);
/**
* @dev ⚠️ never give value to the user because you received a callback.
* Always verify payments by sending a get request to 100Pay Get Crypto Charge endpoint on your backend.
* We have written a well detailed article to guide you on how to do this. Check out the link below.
* 👉 https://100pay.co/blog/how-to-verify-crypto-payments-on-100-pay
* */
},
onError: (error) => {
// handle your errors, mostly caused by a broken internet connection.
console.log(error);
alert("Sorry something went wrong pls try again.");
},
callback: (response) => {
console.log(response);
},
});
};
The payWith100Pay function requires the name, email, currency, and amount variables. All other parameters can be passed as they are.
After integrating the payWith100Pay function, add a submit function to handle form submission and call payWith100Pay to process the payment.
const handleSubmit = (e: React.FormEvent<HTMLFormElement>) => {
e.preventDefault();
const values = new FormData(e.currentTarget);
const data = Object.fromEntries(values);
payWith100Pay(name, email, phone, currency, amount);
};
The required parameters are:
- name - All transactions on 100Pay Checkout require a customer's name
- email - All transactions on 100Pay Checkout require a customer's email address
- amount - The amount we're charging the customer
- publicKey - Remember, public keys for client-side code always
- submit - A function that will run when the customer submits the form
Switch over to your browser and you should see a much more appealing form that you can submit to launch the 100Pay Checkout 😎.
