Configuration Parameters

Gateway Provider

The configuration parameters of the Gateway Provider vary slightly depending on the blockchain. For a full integration guide on integrating the Gateway Provider, please see UI Modal.

Solana

<GatewayProvider
  wallet={wallet}
  connection={new Connection(clusterApiUrl("mainnet-beta"), "confirmed")}
  cluster="mainnet-beta"
  gatekeeperNetwork={gatekeeperNetwork}>
</GatewayProvider>

Property	Description	Type
wallet	An object representing the user's wallet. This may be undefined if a wallet hasn't been connected to the dApp yet.	{ publicKey, signTransaction } (see definitions below)
wallet.publicKey	The user wallet's public key.	PublicKey from @solana/web3.js
wallet.signTransaction	A function that asks the user's wallet to sign a transaction.	(transaction: Transaction) => Promise<Transaction> where Transaction is from @solana/web3.js
gatekeeperNetwork	The address of the Gatekeeper Network for which your Civic Passes are issued. To get started you can use the address of the CAPTCHA Verification: ignREusXmGrscGNUesoU9mxfds9AiYTezUKex2PsZV6 . In the Available Networks page you can request access to the more advanced networks.	PublicKey from @solana/web3.js
connection	A Solana connection to any Solana network. The recommended commitment level is confirmed.	Connection from @solana/web3.js
cluster	The Solana network to use (i.e. devnet, mainnet-beta, testnet). This defaults to mainnet-beta, so should be set if a different connection endpoint.	string

Ethereum + EVMs

The React component uses ethers.js v6

<GatewayProvider
  wallet={wallet}
  gatekeeperNetwork={gatekeeperNetwork}>
  {children}
</GatewayProvider>

Property	Description	Type
wallet	A object containing a wallet address & an instance of an ethers v6 signer	type EthereumGatewayWallet = { address: string | undefined; signer: Signer | undefined; };
gatekeeperNetwork	The address of the Gatekeeper Network are issued for.	string

Converting a viem/wagmi walletClient to an ethers v6 signer

You can convert a viem/wagmi walletClient to an ethers v6 interface by following the example of this pattern in action is available in the example repository.

Advanced Configuration

Paying for your customers' transactions

If your users do not have crypto wallets, you can subsidize the cost of their passes, including the transaction cost, by signing and sending the transactions yourself.

To do this:

• Set the payer field on the front-end

• Create a back-end service to sign and send the transaction (warning: ensure you verify the source of the transaction before signing! Signing arbitrary transactions from an unsecured front-end can lead to loss of funds)

• Call that back-end service from the front-end via the handleTransaction callback.

For more details, see here:

Solana

Docs & Sample Code

Sample Project (Next.js)

Ethereum + EVMs

Docs & Sample Code

Sample Project (Next.js) Coming soon...

Broadcasting transactions via Civic

In the default mode of operation, the transaction required to issue or refresh the Civic Pass will be signed, but not broadcasted, by Civic. The user is responsible for broadcasting the transaction, including any fees. This flow is handled transparently by the Gateway Provider, which also communicates any fees to the user via the Civic Pass modal.

Some Gatekeeper Networks support an alternative mode such as having the Civic backend broadcast the transaction. If the Gatekeeper Network you are using supports this, you can set the gatekeeperSendsTransaction property to true to turn it on.

Property	Description	Type
gatekeeperSendsTransaction	Civic will send the transaction to the blockchain on behalf of the user. Defaults to false.	true | false
forceRequireRefresh	Setting this flag forces the user to refresh their active pass when set, even if the pass is not expired. Defaults to false.	true | false