Setup Process
1. Setup the Gasless in the Dashboard
First, create your organization in our dashboard.
Next, head to Gasless Settings
You’ll need to add a JWKS Endpoint from your Auth Provider to authenticate the sponsoring of transactions.
Which will give you access to your Public Key (pk_prod_xxxx). Keep this handy as you’ll need it to initialize the SDK.
You won’t need the Secret Key (sk_prod_xxxx) for the SDK.
As all requests are validated by the JWKS Endpoint using your auth provider.
You can also refer to one of our sample apps if you want to
clone a full application rather than embed into an existing one!
2. Setup the Chipi SDK in your project to use the Gasless
Select your Framework
Install the SDK
npm install @chipi/chipi-sdk
# or
yarn add @chipi/chipi-sdk
# or
pnpm add @chipi/chipi-sdk
Initialize the SDK
// app/providers.tsx
'use client'
import { ChipiProvider } from '@chipi-pay/chipi-sdk'
export function Providers({ children }: { children: React.ReactNode }) {
return (
<ChipiProvider
apiKey={process.env.NEXT_PUBLIC_CHIPI_API_KEY}
>
{children}
</ChipiProvider>
)
}
// app/layout.tsx
import { Providers } from './providers'
export default function RootLayout({
children,
}: {
children: React.ReactNode
}) {
return (
<html lang="en">
<body>
<Providers>{children}</Providers>
</body>
</html>
)
}
Install the SDK
npm install @chipi/chipi-sdk
# or
yarn add @chipi/chipi-sdk
# or
pnpm add @chipi/chipi-sdk
Initialize the SDK
// app/providers.tsx
'use client'
import { ChipiProvider } from '@chipi-pay/chipi-sdk'
export function Providers({ children }: { children: React.ReactNode }) {
return (
<ChipiProvider
apiKey={process.env.NEXT_PUBLIC_CHIPI_API_KEY}
>
{children}
</ChipiProvider>
)
}
// app/layout.tsx
import { Providers } from './providers'
export default function RootLayout({
children,
}: {
children: React.ReactNode
}) {
return (
<html lang="en">
<body>
<Providers>{children}</Providers>
</body>
</html>
)
}
Install the SDK
npm install @chipi/chipi-sdk
# or
yarn add @chipi/chipi-sdk
# or
pnpm add @chipi/chipi-sdk
Initialize the SDK
// src/App.tsx
import { ChipiProvider } from '@chipi-pay/chipi-sdk'
function App() {
return (
<ChipiProvider
apiKey={process.env.REACT_APP_CHIPI_API_KEY}
>
<YourApp />
</ChipiProvider>
)
}
Install the SDK
npx expo install @chipi-pay/chipi-expo
Initialize the SDK
// App.tsx
import { ChipiProvider } from '@chipi/chipi-expo'
export default function App() {
return (
<ChipiProvider
apiKey={process.env.EXPO_PUBLIC_CHIPI_API_KEY}
>
<YourApp />
</ChipiProvider>
)
}
Celebrate & Learn More!
That’s it! You should now have an initial working version of Chipi Pay integrated into your application. You can now start implementing various features like:
To quickly test the integration, you can use our Test Mode in development.
Need help? Join our Telegram Community to ask us anything on your mind.
API Reference
If you need to do something more customized, we are developing a more comprehensive API.
Stay tuned for updates!
