SimpleTech Labs
WebsiteConsoleAPITwitterTelegram ChannelTelagram Chat
SimplePay
SimplePay
  • Introduction
    • Overview
    • Core concepts
      • Transparency
      • Non-Custodial
      • Direct payments
      • Lowest Fees
    • Protocol
    • Security
      • Collected data
  • GETTING STARTED
    • Create an App
    • Setup Client
      • Widget
    • Setup Server
      • Webhooks
    • No-Code
      • Web and Telegram Store
  • Javascript SDK
    • Introduction
    • Services
      • Cryptocurrency
      • Currency
      • Invoice
  • Components
    • Payment Widget
  • Simple ID
    • Auth.js integration Guide
  • API Documentation
    • Overview
    • Apps
      • Get App Info
      • Dev Mode
    • Wallets
    • Assets
      • Fiat Currency
      • Cryptocurrency
    • Products
    • Invoices
      • Methods
    • Transactions
      • Page 1
    • Billing
  • Referral Program
    • 💰Referral Program Basics
  • Legal
    • 📄Terms of Use
    • 🔏Privacy Policy
    • 🍪Cookies
Powered by GitBook
On this page
  • Installation
  • Configuration

Was this helpful?

  1. Components

Payment Widget

PreviousInvoiceNextAuth.js integration Guide

Last updated 7 months ago

Was this helpful?

We provide ready to use widget that can be integrated into your app in less than 30 minutes

Installation

To install Widget use package manager or load script from CDN

npm install --save-dev @simplepay-ai/widget
import '@simplepay-ai/widget';
<script src="https://cdn.jsdelivr.net/npm/@simplepay-ai/widget@0/dist/widget.min.js" type="module"></script>
<script src="https://cdn.skypack.dev/-/@simplepay-ai/widget@v0.0.4-J8bM7EPrp28FSp8FCgOy/dist=es2019,mode=raw/dist/widget.js" type="module"></script>
<script src="https://unpkg.com/@simplepay-ai/widget@0.0.4/dist/widget.js" type="module"></script>

Then add component to desired place on page

<payment-app
    price="0.8"
    appId="09476f0c-ed36-4dfe-84f4-ef2df1644830"
    clientId="bf298925-2f45-492c-891d-f997aa7ac864" # UUID or Int
    backToStoreUrl="https://example.com"
/>

Configuration

Component configuration may be done via html attributes

Available attributes:

Attribute
Required
Description

appId

✅

clientId

✅

ID of end customer who making payment. Should be linked to customer entry in merchant database

backToStoreUrl

URL where to redirect customer after payment

price

Price for invoice in fiat currency

dark

Dark theme on/off

invoiceId

Returns to the current step of the payment process or the receipt

ID of application, may be obtained in

Console
Go to SimplePay Demo Widget ↗️