The Nifty guide to implementing our buy button

Lets get Nifty!

Adding the Nifty buy button to your website will allow your users to easily purchase your NFTs or packs of NFTs using a credit card.

We’ve prepared this guide to show you have easy it is to add fiat purchasing to your NFT project!

Please reach out to duncan@niftygateway.com or griffin@niftygateway.com if you encounter problems. We are here to help you integrate! We’re also down to just talk about nifties/crypto in general.

Ok, lets get started!

Step 1: Add a purchaseFor() function

The first step to adding our buy button is to make sure your smart contract has a purchaseFor() function.

A purchaseFor() function is simply a function that allows Nifty Gateway to purchase NFTs from you and then send them directly to the user who purchased them from us.

To add a purchaseFor() function, you just have to replicate the logic of purchase() function, but instead of automatically sending NFTs to the msg.sender, allow the destination of the NFTs to be included as an argument in the function call.

For example, if your purchase function looks like this:

function purchase(uint16 packCount) public payable {
 _purchase(msg.sender, packCount);
 }

Then your purchaseFor() function would simply look like this:

function purchaseFor(address user,uint16 packCount) public payable {
  _purchase(user, packCount);
 }

You’ll also have to figure out how to pay the Nifty fee (the fee we charge to use our service). You can bake it into your purchaseFor() function, or you can pass it on to end users. Both implementations work just fine, its your decision.

Check out our list of some standard purchaseFor() functions, or read more in our docs.

Step 2: Create a developers account and get your dev key

To make requests to Nifty Gateway, you’ll need a developer key. We use the developer key to figure out which NFT project is sending a message to Nifty Gateway.

Sign up for a developer key on this page. Keep in mind that your business name is what will show up when the purchase window opens.

While you’re on our developers page, check out our Media Kit. It has our logo and standard ‘Buy with Nifty Gateway’ buttons that you can use as the button image when adding our buy button to your website.

Using a standard button from our Media Kit will signal to your users that you have integrated Nifty Gateway, which is a trusted name in NFT purchasing, and that they can easily purchase your NFTs.

Step 3: Create your NiftyGatewayJS function call

After you’ve structured your smart contract directly, you just need to add a button to your website that calls our purchasing javascript function.

Make sure you have installed the NiftyGatewayJS package:

npm install niftygateway

Import NiftyGatewayJS:

import NiftyGatewayJS from 'niftygateway';

Then, initialize a new NiftyGatewayJS object.

To initialize the object, you need two parameters:

• Network: Can be ‘rinkeby’ or ‘main’.
• Dev key: This is your developer key that you got from our developer portal. We use it to detect which project is making specific requests. Can be blank, in which case the default dev key will be used. For live purchasing, you will need a dev key.

Here is an example of initializing a new NiftyGatewayJS object:

var nftg = new NiftyGatewayJS('main',[my_dev_key])

Great! You have a NiftyGatewayJS object. The next step is to build a purchaseFor object, which is what you use to pass us information about the purchase being made. This page on initializing your NiftyGatewayJS object has more details.

You then submit this object as an argument to our sendPurcahseForTransaction() function, which opens the popup window.

The purchaseFor object requires the following fields:

• contractAddress: Your contract address. Destination of the function call.
• value: The amount of eth to include in the transaction, as a string.
• purchaseForFunction: The signature of your purchaseFor() function as string with just types, no argument names. An example would be ‘purchaseFor(address,uint16)’.
• argsList: Arguments for your function call as a list. Example would be [‘userAddress’,1].
• displayTitle: The title of the purchase that your user will see.
• displayImageURL: The URL of the item that your user will see.

Note: You can also include raw transaction data in the purchaseFor object instead of a purchaseForFunction and an argsList. Click here to see an example of that.

Step 3.5: Adjusting your object for buy button functionality

By default, calling sendPurcahseForTransaction will open a window that prompts to user to make a Nifty Wallet.

If your target user already has a wallet, this is probably not the behavior you want. You can disable this by adding a ‘createNiftyWallet’ field to your purchaseFor object and setting the value to false. By doing this, new users who open a window will not be prompted to create a Nifty Wallet, and will be able to purchase and send to any address.

Nifty Gateway will automatically replace the string ‘userAddress’ with an address that the user chooses.

So to give your users the option to send their purchase to any wallet address, insert the string ‘userAddress’ in your argsList where the destination address should go.

For example, if your purchaseFor() function has the signature:

purchaseFor(address)

and the address argument is the destination where the NFTs will be sent, then your args list would look like this:

[‘userAddress’]

This will allow the user to select any destination wallet address that they want!

In full, this is what your Javascript object would look like this:

var myContractAddress = ‘0xdeadbe…’
var purchaseForObject = {
 contractAddress: myContractAddress,
 value: ‘0.05’,//pass the price of the purchase as an eth value
 purchaseForFunction: ‘purchaseFor(address)’,
 argsList: [‘userAddress’], //’userAddress’ becomes the users chosen address
 //now cosmetic info
 displayTitle: ‘Rinkeby Legends Packs’,
 displayImageURL: ‘https://s3-us-west-1.amazonaws.com/nftgimagebucket/rinkeby_nifty_0.jpg',
 //if you don't want your users to get a Nifty Wallet - 
 createNiftyWallet: false
}

Once you have your object built, you’re ready to call our javascript function!

Check out our purchasing transaction guide here, and go here for a full reference on the purchaseFor object.

Step 4: Call the our javascript function with your purchase object

Great! You have created an object with the information we need to tell the user what is going on and to purchase a NFT or pack of NFTs from you.

Now you just have to use the Nifty Gateway object that you’ve initialized (called nftg in our previous example) to call the sendPurchaseForTransaction() function.

The sendPurchaseForTransaction() function takes only one argument, which is the object that you constructed earlier.

It returns a Promise, which will resolve with information about the status of the purchase once a user has either completed the purchase or not.

Calling the function looks like this:

nftg.sendPurchaseForTransaction(NiftyGatewayPurchaseObject).then(purchaseResult => {
      console.log(purchaseResult.didSucceed) //check if purchase went through
      console.log(purchaseResult.transactionURL) //url for you to track the transaction progress
    })

Once this function is called, one of two things will happen:

A screenshot of the Nifty Gateway popup window

Nothing: If your purchaseFor object is missing a required field, or we cannot interpret it for some reason, then nothing will happen. The promise will return an error describing what went wrong with your object.

A popup window will appear: If your purchaseFor object has all the required fields and is valid, then a popup window will open on niftygateway.com. The user will choose their payment method, and the purchase will be initiated!

Thats it! Thats all it takes for your users to be able to purchase your NFTs with a credit card. Pretty simple, right?

Bonus: Transaction tracking

For many, using dapps is confusing, because there is so little feedback about what is going on.

After a purchase has been initiated, the promise will resolve to a URL that you can poll to track how your users purchase is progressing.

The sendPurchaseForTransaction() returns an object that contains two fields:

• didSucceed: A boolean field telling you if the user paid successfully and the purchase has been initiated. If the user did not pay successfully, then didSucceed will be false.
• transactionURL: This is the URL that you can use to poll the progress of the transaction your user has made.

Sending a get request to the transaction URL that we return to you will return data about how a transaction is progressing. Here is an example response from querying a transaction URL:

{
 “id”: 608,
 “Timestamp”: “2019–03–22T02:31:31.189045Z”,
 “TotalEthSentInTransactionDollarCostInCents”: 0,
 “SenderHasBeenCharged”: false,
 “ChargeWasRejected”: false,
 “DisplayTitle”: “Rinkeby Legends Pack”,
 “DisplayImage”: “https://s3.amazonaws.com/matterhornphotostorage/superawesomenft.png",
 “DisplayBoughtFrom”: “Rinkeby Legends”,
 “DisplayDestinationName”: “Nifty Gateway Wallet”,
 “DisplayNumStages”: 3,
 “DisplayCurrentStage”: 3,
 “DisplayCurrentStageDescription”: “Purchase Complete!”,
 “IsRinkebyTx”: true,
 “PriceAsString”: “0.00”
}

Polling the transaction URL will give you useful information about what a user purchased.

As the transaction progresses, the ‘DisplayCurrentStage’ and ‘DisplayCurrentStageDescription’ fields will update, meaning your UI can inform your users about what happening.

You should be good to go! Thats how easy it is to add the Nifty Gateway buy button to your website.

Remember, just shoot an email to duncan@niftygateway.com or griffin@niftygateway.com if you have questions or encounter any issues.

We would love your feedback and are always down to just talk about nifties or crypto stuff in general!