Skip to main content

Generating a URL with Pay SDK

Coinbase Pay SDK can generate a URL that is launched by a browser mechanism (for example, a link or button on web, or a webview, or linking on mobile) as an alternative to integrating Coinbase Pay through initOnRamp.

This approach is designed for those who want to use the Coinbase Pay functionality by embedding the SDK, but want additional control over how the experience is triggered.

generateOnRampURL Example​

import { generateOnRampURL } from "@coinbase/cbpay-js";

const onRampURL = generateOnRampURL({
  appId: "1dbd2a0b94",
  destinationWallets: [
    { address: "0xabcdef", blockchains: ["solana"] }
    { address: "0x123456", assets: ["ETH", "USDC"] }
  ]
});

You can use a generated URL to launch a new tab, webview, etc., with either the provided buttons or text.

<a href={onRampURL} target="_blank">Coinbase Pay</a>

generateOnRampURL Parameters​

The following table outlines the parameters supported in the generateOnRampURL function:

ParameterReq'dTypeDescription
destinationWalletsYesDestinationWallet[]Array of DestinationWallet objects which define blockchain types (blockchains) and destination addresses (address).

Format: {address: string; blockchains?: string[]; assets?: string[]; supportedNetworks?: string[]}[]
appIdYesStringUnique short-string ID provided to partners by the Coinbase Pay team
defaultNetworkNoStringDefault network that should be selected when multiple networks are present
presetCryptoAmountNoNumberPreset crypto amount value.
presetFiatAmountNoNumberPreset fiat amount value (for USD, CAD, GBP, EUR only). Ignored if presetCryptoAmount is also set.
defaultExperienceNo'send', 'buy'Default visual experience: either (1) Transfer funds from Coinbase ('send') or (2) Buy assets ('buy')
handlingRequestedUrlsNobooleanPrevents the widget from opening URLs directly & relies on onRequestedUrl entirely for opening links
partnerUserIdNoStringUnique ID representing the client app user. Must be less than 50 chars. Use with the Transaction Status API to retrieve transactions made during the session.
info

All transactions made during the session are linked to partnerUserId which can be used with the Transaction Status API to retrieve these transactions later.

DestinationWallet Parameters​

A DestinationWallet object accepts the following parameters:

ParameterReq'dTypeDescription
addressYesStringDestination address where the purchased tokens will be sent.
blockchainsNoString[]List of blockchains enabled for the associated address. All tokens available per blockchain are displayed to the user. Available blockchains are: ethereum, avalanche-c-chain, solana.
assetsNoString[]List of assets enabled for the associated address. They are appended to the available list of tokens for the user to buy or send.
supportedNetworksNoString[]Restrict the networks available for the associated assets.

Subscribing to Widget Events​

You can manually process widget events on web & React Native, as follows:

Prerequisites​
yarn add react-native-url-polyfill
React-Native Example​
import React, { useMemo } from 'react'
import { WebView } from 'react-native-webview'
import { generateOnRampURL } from '@coinbase/cbpay-js'
import 'react-native-url-polyfill/auto'

const CoinbaseWebView = ({ currentAmount }) => {
  const coinbaseURL = useMemo(() => {
    const options = {
      appId: 'your_app_id',
      destinationWallets: [
        {
          address: destinationAddress,
          blockchains: ['solana', 'ethereum'],
        },
      ],
      handlingRequestedUrls: true,
      presetCryptoAmount: currentAmount,
    }

    return generateOnRampURL(options)
  }, [currentAmount, destinationAddress])

  const onMessage = useCallback((event) => {
    // Check for Success and Error Messages here
    console.log('onMessage', event.nativeEvent.data)
    try {
      const { data } = JSON.parse(event.nativeEvent.data);
      if (data.eventName === 'request_open_url') {
        viewUrlInSecondWebview(data.url);
      }
    } catch (error) {
      console.error(error);
    }
  }, [])

  return (
    <WebView source={{ uri: coinbaseURL }} onMessage={onMessage} />
  )
}

export default CoinbaseWebView

See Also:

Was this helpful?