PNPL Button Quickstart

Suggest Edits

Option 1: React SDK

Step 1. Reach out to a Halliday representative to get:

  • A Halliday ID for your game
  • A Halliday ID for your marketplace

Step 2. Install halliday-sdk with either npm or yarn:

npm install halliday-sdk

yarn add halliday-sdk

Step 3. Initialize the SDK with your MARKETPLACE_ID

import { initHalliday, HallidayButton } from 'halliday-sdk';
initHalliday(MARKETPLACE_ID);

Step 4. Render the Halliday button div with the appropriate checkout_object

const checkoutObject = {
    game_id: GAME_ID,
    collection_id: COLLECTION_ID,
    token_id: TOKEN_ID,
    asset_image: ASSET_IMAGE,
    asset_url: ASSET_URL,
    asset_name: ASSET_NAME,
    asset_description: ASSET_DESCRIPTION
}

<HallidayButton 
    checkoutObject={checkoutObject} 
    style={{
        width: '137px', 
        height: '50px', 
        borderRadius: '8px', 
        marginTop: '10px'
    }}
/>

Items in all caps (e.g. GAME_ID) should be replaced with actual values. All of these values should be provided in the form of strings.

  • GAME_ID: the ID of the game that this NFT belongs to (Halliday provides this to you)
  • COLLECTION_ID: the blockchain address of the NFT collection (e.g. 0xAB226C1D6a4362423405816851748f1F866F5583)
  • TOKEN_ID: NFT token ID in a collection (e.g. 12004)
  • ASSET_IMAGE: a URL link to an image of the NFT
  • ASSET_URL: a URL link to the marketplace listing of the NFT
  • ASSET_NAME: the name/title of the NFT (e.g. Drago #12004)
  • ASSET_DESCRIPTION: a description of the NFT (e.g. A legendary Drago with 10 attack, 7 defense, and 6 recovery)
  • DIV_ID: the ID parameter of the Halliday Button Container div

After this, you will have successfully added a Halliday button to PNPL an NFT! In order to read a user's access to an asset, check out API Quickstart!

Option 2: Javascript SDK

Step 1. Reach out to a Halliday representative to get:

  • A Halliday ID for your game
  • A Halliday ID for your marketplace

Step 2. Set up the Halliday button div in your html file

<script src="https://sdk.halliday.xyz/halliday-sdk.js"></script>

<div 
    id="halliday-button-container-1"
    style="width: 440px; height: 50px; border-radius: 8px; margin-top: 16px;"
>
</div>

Step 3. Render the Halliday button div with the appropriate checkout_object

// initialize Halliday SDK with your marketplace ID
halliday.init(MARKETPLACE_ID);

var checkout_object = {
    game_id: GAME_ID,
    collection_id: COLLECTION_ID,
    token_id: TOKEN_ID,
    asset_image: ASSET_IMAGE,
    asset_url: ASSET_URL,
    asset_name: ASSET_NAME,
    asset_description: ASSET_DESCRIPTION
}

halliday.button.render(DIV_ID, checkout_object);

Items in all caps (e.g. GAME_ID) should be replaced with actual values. All of these values should be provided in the form of strings.

  • GAME_ID: the ID of the game that this NFT belongs to (Halliday provides this to you)
  • COLLECTION_ID: the blockchain address of the NFT collection (e.g. 0xAB226C1D6a4362423405816851748f1F866F5583)
  • TOKEN_ID: NFT token ID in a collection (e.g. 12004)
  • ASSET_IMAGE: a URL link to an image of the NFT
  • ASSET_URL: a URL link to the marketplace listing of the NFT
  • ASSET_NAME: the name/title of the NFT (e.g. Drago #12004)
  • ASSET_DESCRIPTION: a description of the NFT (e.g. A legendary Drago with 10 attack, 7 defense, and 6 recovery)
  • DIV_ID: the ID parameter of the Halliday Button Container div

After this, you will have successfully added a Halliday button within the Halliday Button Container div to purchase an NFT!

Updated 5 days ago