SmartPay — Payment Button

SmartPay is ApoloPay's payment button that enables businesses to accept cryptocurrency payments on their websites and applications. Developers can integrate it with just a few lines of code using our SDK, available for multiple frontend frameworks.

How It Works

The payment flow involves three actors: your frontend, your backend, and the ApoloPay API.

┌─────────────┐     ┌──────────────┐     ┌─────────────────┐
│  Your Store  │     │  Your Store   │     │   ApoloPay API  │
│  (Frontend)  │     │  (Backend)    │     │   (Gateway)     │
└──────┬───────┘     └──────┬────────┘     └────────┬────────┘
       │                    │                       │
       │  1. User clicks   │                       │
       │     "Pay"         │                       │
       │ ──────────────►   │                       │
       │                   │  2. POST /preorder    │
       │                   │     (amount, secret)  │
       │                   │ ─────────────────────►│
       │                   │                       │
       │                   │  3. Returns processId │
       │                   │ ◄─────────────────────│
       │                   │                       │
       │  4. Render button │                       │
       │     with processId│                       │
       │ ◄─────────────────│                       │
       │                   │                       │
       │  5. Customer      │                       │
       │     completes     │                       │
       │     payment       │──────────────────────►│
       │                   │                       │
       │                   │  6. Webhook notifies  │
       │                   │     payment complete  │
       │                   │ ◄─────────────────────│
       └───────────────────┴───────────────────────┘

Step-by-Step

1. The customer initiates a purchase on your store
2. Your backend calls the ApoloPay API (POST https://pb-api.apolopay.app/payment-button/process/preorder) with the payment amount and your secret key — this returns a unique processId
3. Your frontend renders the SmartPay button component, passing the publicKey and the processId as props
4. The customer interacts with the button, selects their preferred cryptocurrency and network, and completes the payment
5. ApoloPay notifies your backend via a webhook when the payment is confirmed

Prerequisites

Before integrating SmartPay, you need:

1. ✅ An ApoloPay account with Level 2 verification — Create Account →
2. ✅ A payment button configured in the ApoloPay dashboard — Create Button →
3. ✅ The SmartPay SDK installed in your project — Choose your framework →

Available SDKs

Package	Framework	Install
@apolopay-sdk/ui	Vanilla JS / Any	npm i @apolopay-sdk/ui
@apolopay-sdk/react	React	npm i @apolopay-sdk/react
@apolopay-sdk/vue	Vue 3	npm i @apolopay-sdk/vue
@apolopay-sdk/svelte	Svelte	npm i @apolopay-sdk/svelte
@apolopay-sdk/angular	Angular	npm i @apolopay-sdk/angular
@apolopay-sdk/astro	Astro	npm i @apolopay-sdk/astro

All packages are available on npmjs.com.