Package Exports

@shop100/100pay-checkout
@shop100/100pay-checkout/index.min.js

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (@shop100/100pay-checkout) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

100Pay Checkout

Accept crypto payments on your website in 3 mins

✋ ✋ PACKAGE HAS BEEN DISCONTINUED

Please 👉 click here for the updated package 📦

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 Usage

Example Demo

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("User closed payment modal.");
      },
      callback: reference => {
        alert(`Transaction successful with id: ${reference}`);
      },
      onError: error => {
          console.log(error)
          alert("Sorry something went wrong pls try again.")
      }
    });

}
</script>

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

using npm

Start by importing the library to your javascript file

// using import
import { shop100Pay } from "@shop100/100pay-checkout";

// or import using require
const shop100Pay = require("@shop100/100pay-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: "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("User closed payment modal.");
      },
      callback: reference => {
        alert(`Transaction successful with id: ${reference}`);
      },
      onError: error => {
          console.log(error)
          alert("Sorry something went wrong pls try again.")
      }
    });

}

.Vue Example File

<template>
  <div id="app">
     <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="amount">Amount</label>
      <input type="tel" 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" @click="payWith100pay()"> Pay </button>
    </div>
  </form>
  </div>
</template>

<script>
// using import
import { shop100Pay } from "@shop100/100pay-checkout";

// using require
const shop100Pay = require("@shop100/100pay-checkout");

export default {
  data(){
    return {
      checkout_form: {
        name: "Brainy",
        phone: "0123456",
        email: "brainy@100pay.co",
        amount: 10000,
        currency: "USD",
        country: "NGN"
      }
    }
  },
  methods: {
      payWith100pay(e) {
        e.preventDefault();

        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: 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: "http://localhost:8000/verifyorder/",
          onClose: msg => {
            alert("User closed payment modal.");
          },
          callback: reference => {
            alert(`Transaction successful with id: ${reference}`);
          },
          onError: error => {
              console.log(error)
              alert("Sorry something went wrong pls try again.")
          }
        });
    }
}
}
</script>

Want More?

Read our documentation 100Developers platform