Redirect URLs

The <CrossmintPayButton> component offers two optional properties which can be used to redirect users to a website after a purchase:

• successCallbackURL redirects users to a given url after a successful transaction.
• failureCallbackURL redirects users to a given url after a failed transaction.

<CrossmintPayButton
    projectId="yourProjectId"
    collectionId="yourCollectionId"
    environment="development"
    mintConfig={{
        type: "erc-721",
        totalPrice: "0.001",
        _quantity: "1",
    }}
    successCallbackURL="https://example.com/success"
    failureCallbackURL="https://example.com/failure"
/>

​

Whitelisting Domains

For security reasons, you must whitelist the URLs from the Domains tab on the console (staging, production).

How to test if you don't have an https domain

A quick option is using ngrok to set one up. It’s free and takes five minutes. To get started:

1. Install the app

2. Open the terminal and enter ngrok http 3000. This assumes you’re using port 3000. Update the command accordingly if you’re using a different port.

3. Copy the URL in the Forwarding section: https://2fe4-98-145-150-44.ngrok-free.app in the screenshot below. This is the URL you will use to whitelist your domain.

4. Whitelist the ngrok domain on the the console.

To avoid having to whitelist a new domain every time you restart grok, you can get a static one using the following command: ngrok http --domain=YOUR_STATIC_SUBDOMAIN.ngrok-free.app 3000

​

Payloads

The redirect URL will contain a query parameter with format ?p=payload which contains an object with information about the outcome of the transaction.

The exact structure of the payload can vary depending on the specific implementation and the transaction details, but generally includes the following parameters:

• Success Payload
• Failure Payload