Bolt JavaScript SDK

What is this?

Native JavaScript/TypeScript support support for Bolt Web Payments. A programmatic way to for out-of-app purchases and subscriptions.

We also support other platforms:

Chat with us on Discord for help and inquiries!

📚 Documentation

For documentation and API reference visit our quick start guide.

💰 Why Bolt

Only with Bolt you get 2.1% + $0.30 on all transactions. That's 10x better than traditional app stores which take 30% of your revenue! That's the fair and transparent pricing you get with using Bolt.

🛠️ Prerequisites

You need 3 things to get started:

1. Existing Web App: You will need a web application (React, Vue, Angular, or vanilla JavaScript)
2. Backend Server: You will need to bring your own backend server (any language)
3. Bolt Merchant Account: Dashboard access to manage your gaming store (signup or login)

📦 Installation

Step 1: Install the JavaScript SDK

The SDK can be installed with either npm, pnpm, bun or yarn package managers.

NPM

npm install @boltpay/bolt-js

PNPM

pnpm install @boltpay/bolt-js

Bun

bun install @boltpay/bolt-js

Yarn

yarn add @boltpay/bolt-js

Optional: Run the SDK locally

The SDK comes with an sample webpage with a basic form of all the different integrations. With your package manager of choice just install and run dev to see it in your browser.

npm install
npm run dev

Step 2: Add code to your game

There is a sample integration in the examples/ folder.

• main.ts: will showcase how to initialize the client and open links

Step 3: Continue with Backend Integration

You will need to bring your own backend server to complete integration.

• Quick Start: View our quickstart guide to get the API running
• Example Server: We also have a sample server in NodeJS for your reference during implementation

TypeScript Types

For TypeScript projects, the SDK provides full type definitions:

import { Charge, BoltTransactionSuccess } from '@boltpay/bolt-js'

// Transaction result type
interface BoltTransactionSuccess {
  reference: string // Unique transaction reference
}

Framework Integration Examples

React

import { Charge } from '@boltpay/bolt-js'
import { useState } from 'react'

function CheckoutButton({ checkoutUrl }: { checkoutUrl: string }) {
  const [loading, setLoading] = useState(false)

  const handlePayment = async () => {
    setLoading(true)
    const transaction = await Charge.checkout(checkoutUrl)
    console.log('Payment completed:', transaction.reference)
    // Redirect to success page or update UI
    setLoading(false)
  }

  return (
    <button onClick={handlePayment} disabled={loading}>
      {loading ? 'Processing...' : 'Pay with Bolt'}
    </button>
  )
}

Vue.js

<template>
  <button @click="handlePayment" :disabled="loading">
    {{ loading ? 'Processing...' : 'Pay with Bolt' }}
  </button>
</template>

<script setup>
import { ref } from 'vue'
import { Charge } from '@boltpay/bolt-js'

const props = defineProps(['checkoutUrl'])
const loading = ref(false)

const handlePayment = async () => {
  loading.value = true
  const transaction = await Charge.checkout(props.checkoutUrl)
  console.log('Payment completed:', transaction.reference)
  loading.value = false
}
</script>

Advertisement Integration

The SDK also provides support for displaying advertisements to users:

import { BoltSDK } from '@boltpay/bolt-js'

// Open an advertisement with an optional callback when claimed
BoltSDK.gaming.openAd('https://your-ad-link.com', {
  onClaim: () => {
    console.log('Ad reward claimed!')
    // Update game state or provide rewards
  },
})

React Example with Advertisements

import { BoltSDK } from '@boltpay/bolt-js'

function AdButton({ adLink }: { adLink: string }) {
  const handleAdDisplay = async () => {
    await BoltSDK.gaming.openAd(adLink, {
      onClaim: () => {
        // Handle reward claim
        console.log('Reward claimed!')
      },
    })
  }

  return <button onClick={handleAdDisplay}>Watch Ad</button>
}

Vue Example with Advertisements

<template>
  <button @click="handleAdDisplay" :disabled="loading">
    {{ loading ? 'Loading...' : 'Watch Ad' }}
  </button>
</template>

<script setup>
import { ref } from 'vue'
import { BoltSDK } from '@boltpay/bolt-js'

const props = defineProps(['adLink'])
const loading = ref(false)

const handleAdDisplay = async () => {
  loading.value = true
  try {
    await BoltSDK.gaming.openAd(props.adLink, {
      onClaim: () => {
        // Handle reward claim
        console.log('Reward claimed!')
      },
    })
  } finally {
    loading.value = false
  }
}
</script>

Need help?

📄 License

This project is licensed under the MIT License - see the LICENSE file for details.