LogoLogo
  • Introduction
    • 🏁What is PIP?
  • Product Guide
    • 💧Social Pay
    • 🎭PIP.ME
    • 🔗Payment Links
    • 🛍️Checkout
      • Setting your Store
      • Dashboard (For Merchants)
      • Start Selling
      • Payments
      • Store Policy
    • 🔷Pay Button
      • HTML
      • React
      • Javascript
    • 📃Invoice
  • Tokenomics
    • 🅿️PIP Token
    • 🪙Reward Farming
    • ↔️PIP Token - ERC20 Bridge Guide
  • Additional Guides
    • ❔Frequently Asked Questions
    • 💸How to Install Wallets
    • ⬆️Update Your Extension
  • Announcements
    • 🔵PIP Version 2.1 - Base Network Integration
    • 🔴PIP Version 2.0 - Optimism Network & Worldcoin
    • ❤️PIP Version 1.9 - Avalanche Network & Coinbase Wallet
    • 📄New Product: PIP invoice
    • 🖤PIP Version 1.8 - Ethereum Integration
    • 💜PIP Version 1.7 - Polygon Integration
    • 🦊PIP Version 1.6 - MetaMask and Github Integration + New Listings
    • 🪙BAB Exclusive PIP Reward Event
    • 🔶PIP.ME 2.0 Now Live
    • 🦄PIP Version 1.5 - BNB Chain Integration
    • 4️⃣PIP Version 1.4 & NFT Support Now Live
    • 3️⃣PIP Version 1.3 & PIP.ME Now Live
    • 2️⃣PIP Version 1.2 & Discord Support
    • 1️⃣PIP Version 1.1 & Reward Farming. Now Live
    • 💎PIP Token & Extension App Launched
  • Resources
    • Getpip.com (Website)
    • Twitter
    • Discord
    • Telegram
Powered by GitBook
On this page
  1. Product Guide
  2. Pay Button

Javascript

To use the Javascript of the Pay Button, start by adding this script in your website’s HTML.

<script src="https://{https://button.getpip.com/cdn/pipbutton.js}"></script>

PIP-BUTTON Objects

render

<div id='pip-button'></div>
<script>
const div = document.getElementById('pip-button')
  pipButton.render(div, {
    receiver: "GrWtQjkcEMQWKo4xfj6yfyRw2skNyubuXKU...",
    amount: "1",
		chainNetwork: "SOLANA",
    currency: "SOL",
    label: "PAY",
    onPayment:function (arg) { console.log('onPayment', arg) },
    onError:function (arg) { console.log('onError', arg) },
    onLoad:function (arg) { console.log('onLoad', arg) }
  })
</script>
Name
Required
Type
Default Value

receiver

true

string

null

amount

true

string

null

currency

true

string

‘USDC’

chainNetwork

false

string

‘SOLANA’

label

false

string

‘PAY’

useLabel

false

boolean

true

buttonColor

false

string

‘#1149FF’

buttonTextColor

false

string

‘#FFFFFF’

onLoad

false

function

null

onPayment

false

function

null

onError

false

function

null

receiver

A receiver’s address that is compatible with a selected blockchain network

amount

The amount of dollar (Fiat) that a receiver will receive

chainNetwork

The type of blockchain network that the symbol of the token is included

currency

The symbol of token that will actually be sent to the receiver

label

A label of the button

useLabel

Option to display the label of the button. The default value is ‘TRUE’.

buttonColor

The background color of the button

buttonTextColor

Text color of the button

onPayment

Function(s) that will be executed when the payment is successful.

function callback (payment) {
  console.log('A payment has occurred!', payment)
}

pipButton.render(div, {
  receiver: "receiver address",
  amount: "amount",
	chainNetwork: "chainNetwork",
  currency: "currency",
  onPayment: callback
})

When the payment is successful, values listed below are transferred.

Name
Type
Description

sender

string

Sender’s public key

amount

string

The amount of USD sent

chainNetwork

string

The type of blockchain network that the symbol of the token is included. (i.e. SOLANA, BSC…)

currency

string

The ticker of token that is sent.

txId

string

Transaction id

onError

Function(s) that will be executed when the payment is NOT successful. It will not be executed when there is a problem with the parameters of the button.

Parameters that the function receives is the explanation of the error.

<div id="pip-button"></div>

<script>
function callback (error) {
    console.log(`An error has occurred: ${error}`)
  }

  pipButton.render(document.getElementById('pip-button'), {
    receiver: "receiver address",
    amount: "amount",
		chainNetwork: "chainNetwork"
    currency: "currency",
    onError: callback
  })
</script>

onLoad

The function that is executed when the button is loaded.

<div id="pip-button"></div>

<script>
function callback () {
    console.log(`The button has loaded.`)
  }

  pipButton.render(document.getElementById('pip-button'), {
    receiver: "receiver address",
    amount: "amount",
		chainNetwork: "chainNetwork"
    currency: "currency",
    onLoad: callback
  })
</script>
PreviousReactNextInvoice

Last updated 2 years ago

🔷