@100pay-hq/checkout

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
• launch an ICO/IDO to raise funds for your project
• 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.

<script src="https://js.100pay.co/"></script>

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/checkout

Start 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: "[e-mail]",
        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>

Want More?

Verify Payments

Enable Webhooks

Read our API documentation 100Pay Developers Documentation