@100pay-hq/checkout
v1.4.2
Published
accept crypto payments on your website and apps in 3 mins
Downloads
188
Readme
100Pay Checkout
Accept crypto payments on your website in 3 mins
Getting Started
🏄 🚀
Before you can start accepting crypto payments, you need to create a 100pay account and obtain your api keys from the 100Developers platform
Features
- Accept cryptopayments on your website
- Withdraw to your crypto wallet or fiat balance
- create payment invoice
- create payment links
- create your own coin on any supported network
- analytics to monitor your business
- swap crypto
- buy/sell crypto
100pay-js
Example 👇🏾👇🏾😋👇🏾👇🏾
View Demo
👉 Live example hosted on Netlify here
👉 Source code here
First Import the Javascript Library to your app or add 100pay-js script tag to your website headers.
HTML
<form id="paymentForm">
<div class="form-group">
<label for="email">Email Address</label>
<input type="email" id="email-address" required />
</div>
<div class="form-group">
<label for="phone">Phone </label>
<input type="tel" id="phone" required />
</div>
<div class="form-group">
<label for="amount">Amount</label>
<input type="number" id="amount" required />
</div>
<div class="form-group">
<label for="first-name">First Name</label>
<input type="text" id="first-name" />
</div>
<div class="form-group">
<label for="last-name">Last Name</label>
<input type="text" id="last-name" />
</div>
<div class="form-submit">
<button type="submit">Pay</button>
</div>
</form>
<!-- Wrapper for the 100Pay checkout modal -->
<div id="show100Pay"></div>
Javascript
When the user clicks on pay button, load 100pay modal.
<script>
const paymentForm = document.getElementById('paymentForm');
paymentForm.addEventListener("submit", payWith100pay, false);
function payWith100pay(e) {
e.preventDefault();
const email = document.getElementById("email-address").value;
const phone = document.getElementById("phone").value;
const amount = document.getElementById("amount").value;
const firstName = document.getElementById("first-name").value;
const lastName = document.getElementById("last-name").value;
shop100Pay.setup({
ref_id: "" + Math.floor(Math.random() * 1000000000 + 1),
api_key:
"TEST;PK;XXXX", // paste api key here
customer: {
user_id: "1", // optional
name: firstName + " " + lastName,
phone,
email
},
billing: {
amount,
currency: "USD", // 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: msg => {
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 Verify Payment 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.")
}
});
}
</script>
<script src="https://js.100pay.co/"></script>using npm
npm install @100pay-hq/checkoutStart by importing the library to your javascript file
// using import
import { shop100Pay } from "@100pay-hq/checkout";
// or import using require
const shop100Pay = require("@100pay-hq/checkout")
When the user clicks on pay button, load 100pay modal.
function payWith100pay(e) {
e.preventDefault();
const email = document.getElementById("email-address").value;
const phone = document.getElementById("phone").value;
const amount = document.getElementById("amount").value;
const firstName = document.getElementById("first-name").value;
const lastName = document.getElementById("last-name").value;
shop100Pay.setup({
ref_id: "" + Math.floor(Math.random() * 1000000000 + 1),
api_key: "", // paste api key here
customer: {
user_id: "1", // optional
name: firstName + " " + lastName,
phone,
email
},
billing: {
amount,
currency: "USD", // 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: msg => {
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.")
}
});
}.Vue Example File
<template>
<div>
<div id="app">
<form id="paymentForm">
<div class="form-group">
<label for="email">Email Address</label>
<input type="email" id="email-address" v-model="checkout_form.email" required />
</div>
<div class="form-group">
<label for="amount">Amount</label>
<input type="tel" id="amount" v-model="checkout_form.amount" required />
</div>
<div class="form-group">
<label for="first-name">First Name</label>
<input type="text" id="first-name" v-model="checkout_form.name" />
</div>
<div class="form-submit">
<button type="submit" @click="payWith100pay()"> Pay </button>
</div>
</form>
</div>
<!-- Wrapper for the 100Pay checkout modal -->
<div id="show100Pay"></div>
</div>
</template>
<script>
// using import
import { shop100Pay } from "@100pay-hq/checkout";
// using require
const shop100Pay = require("@100pay-hq/checkout");
export default {
data(){
return {
checkout_form: {
name: "Brainy",
phone: "0123456",
email: "[email protected]",
amount: 10000,
currency: "USD",
country: "NGN"
}
}
},
methods: {
payWith100pay(e) {
e.preventDefault();
shop100Pay.setup({
ref_id: "" + Math.floor(Math.random() * 1000000000 + 1),
api_key: "", // paste api key here
customer: {
user_id: "1", // optional
name: this.checkout_form.name,
phone: this.checkout_form.phone,
email: this.checkout_form.email
},
billing: {
amount: this.checkout_form.amount,
currency: this.checkout_form.currency,
description: "Test Payment",
country: this.checkout_form.country,
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: "https://my-site.com/redirect-user-after-payment",
onClose: msg => {
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 Verify Payment 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.")
}
});
}
}
}
</script>