> For the complete documentation index, see [llms.txt](https://xpansionchain-1.gitbook.io/xpansionchain/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://xpansionchain-1.gitbook.io/xpansionchain/advanced-guides/nft-primary-sale-card-checkout/implement-primary-sale-card-checkout-feature.md).

# Implement primary sale card checkout feature

## Implement primary sale card checkout feature

FEATURE FOR MANAGED PARTNERS ONLY

This is a feature intended for managed partners. If you are not a managed partner and would like to become one, please reach out to us on our <mark style="color:blue;">#dev-discussion channel</mark> on Discord.

If you are a managed partner, your partner success manager needs to set up a commercial partnership with MoonPay for you. Please reach out to them to facilitate this.

🤚PRE-REQUISITES

* Must be a managed partner and your partner success manager has set up a commercial partnership with MoonPay for you
* Have a deployed L1 smart contract from which tokens can be minted
* <mark style="color:blue;">Launched a collection on</mark> XpansionChain
* Set up the <mark style="color:blue;">required endpoints</mark>

### How to implement this feature[​](https://docs.x.immutable.com/docs/x/implement-primary-sale-card-checkout#how-to-implement-this-feature) <a href="#how-to-implement-this-feature" id="how-to-implement-this-feature"></a>

📝GUIDES

* <mark style="color:blue;">Core SDK</mark>
* <mark style="color:blue;">Link SDK</mark>
* <mark style="color:blue;">API</mark>

### Core SDK[​](https://docs.x.immutable.com/docs/x/implement-primary-sale-card-checkout#core-sdk) <a href="#core-sdk" id="core-sdk"></a>

Currently, this functionality is only available in the <mark style="color:blue;">Typescript Core SDK</mark> v1.0.0+. Please refer to the API endpoints referenced in each step for other implementations. The full list of endpoints required are also listed <mark style="color:blue;">here</mark>.

#### 1. Initialize the Core SDK[​](https://docs.x.immutable.com/docs/x/implement-primary-sale-card-checkout#1-initialize-the-core-sdk) <a href="#id-1-initialize-the-core-sdk" id="id-1-initialize-the-core-sdk"></a>

In order to use the Core SDK, you need to <mark style="color:blue;">initialize it</mark>.

#### 2. Create the NFT checkout transaction[​](https://docs.x.immutable.com/docs/x/implement-primary-sale-card-checkout#2-create-the-nft-checkout-transaction) <a href="#id-2-create-the-nft-checkout-transaction" id="id-2-create-the-nft-checkout-transaction"></a>

📚API REFERENCE

* <mark style="color:blue;">createNftPrimary</mark>

📚SDK REFERENCE

* <mark style="color:blue;">createNftPrimary</mark>

```
const nftPrimaryTxnParams: NftCheckoutPrimaryApiCreateNftPrimaryRequest = {
  createAPIRequest: {
    contract_address: '0x5d...',
    provider: 'moonpay',
    offer_id: '20111212',
    user_wallet_address: '0xqw2...',
    widget: { theme: 'dark' },
  },
};

const nftPrimaryTxnResponse = await imxClient.createNftPrimary(
  nftPrimaryTxnParams
);
```

Where:

* `user_wallet_address` - L2 wallet address of seller, funds will be sent to this address
* `contract_address` - smart contract address of the NFT
* `offer_id` - identifier that represents what will be minted
* `widget.theme` - MoonPay widget theme

In the cases where purchasers know what they're purchasing (such as a specific item in a PFP project) `offerId` could be the token ID (i.e. `20111212`) and in other cases where they don't know what they're purchasing (such as a loot box) it could be something like `silver-chest`. This is simply a way to render an item in the cart, and doesn't need to tie to the actual NFT asset directly.

HANDLING THE OFFERID

Note that primary sales involve taking a payment before the mint occurs. Because the asset does not exist yet, we've included an `offerId` instead of an asset ID. Therefore, in order to successfully render the checkout with the information seen below (offer, title and image), you will need to be a managed partner with XpansionChain (please reach out to us on our <mark style="color:blue;">#dev-discussion</mark> channel on Discord to request to become one).

After creating a transaction successfully, you will be provided with a MoonPay widget URL to be rendered for checkout where the user can proceed with payment.

This displays the UI with the loaded MoonPay widget:

<img src="https://docs.x.immutable.com/assets/images/moonpay-widget-for-checkout-75512051900caaf6e22cd54b3137f32d.png" alt="MoonPay checkout widget" height="909" width="978">

#### 3. Check the transaction status (optional)[​](https://docs.x.immutable.com/docs/x/implement-primary-sale-card-checkout#3-check-the-transaction-status-optional) <a href="#id-3-check-the-transaction-status-optional" id="id-3-check-the-transaction-status-optional"></a>

You can check the transaction status using the transaction ID from previous step. The status value should be `created` to confirm successful transaction creation.

📚API REFERENCE

* <mark style="color:blue;">getNftPrimaryTransaction</mark>

📚SDK REFERENCE

* <mark style="color:blue;">getNftPrimaryTransaction</mark>

```
const getNftPrimaryTransactionResponse =
  await imxClient.getNftPrimaryTransaction({
    transactionId: nftPrimaryTxnResponse.data.transaction_id,
  });
```

#### 4. Minting is triggered once a successful payment has been received[​](https://docs.x.immutable.com/docs/x/implement-primary-sale-card-checkout#4-minting-is-triggered-once-a-successful-payment-has-been-received) <a href="#id-4-minting-is-triggered-once-a-successful-payment-has-been-received" id="id-4-minting-is-triggered-once-a-successful-payment-has-been-received"></a>

After the payment has been received by MoonPay, the mint process will be automatically triggered (via the endpoint that you created <mark style="color:blue;">here</mark>).

<img src="https://docs.x.immutable.com/assets/images/processing-stage-b1c795a8387cd3114fa373c08e66aba3.png" alt="Mint by fiat" height="895" width="513">

#### 5. Verify the transaction status[​](https://docs.x.immutable.com/docs/x/implement-primary-sale-card-checkout#5-verify-the-transaction-status) <a href="#id-5-verify-the-transaction-status" id="id-5-verify-the-transaction-status"></a>

Please consider checking the transaction status in a polling fashion in the background.

📚API REFERENCE

* <mark style="color:blue;">getNftPrimaryTransaction</mark>

📚SDK REFERENCE

* <mark style="color:blue;">getNftPrimaryTransaction</mark>

```
const getNftPrimaryTransactionResponse =
  await imxClient.getNftPrimaryTransaction({
    transactionId: nftPrimaryTxnResponse.data.transaction_id,
  });
```

The transfer process can take few minutes and during that time transaction can return a `pending` or `waitingPayment` status while it's still being processed.

The final stage of transaction status can be:

* `completed` - successful completion
* `failed` - failure encountered

Upon reaching final stage of the transaction status, you can show an appropriate message, send a notification or update any state with the successful/failed transaction.

<img src="https://docs.x.immutable.com/assets/images/transaction-complete-cfa9e53a9279dc5e0a08ce42327bb739.png" alt="Mint complete" height="894" width="513">

### API[​](https://docs.x.immutable.com/docs/x/implement-primary-sale-card-checkout#api) <a href="#api" id="api"></a>

| Step | Description                            | API endpoint                                              |
| ---- | -------------------------------------- | --------------------------------------------------------- |
| 1    | Create the checkout transaction        | <mark style="color:blue;">createNftPrimary</mark>         |
| 2    | Check or verify the transaction status | <mark style="color:blue;">getNftPrimaryTransaction</mark> |