# 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:

![MoonPay checkout widget](https://docs.x.immutable.com/assets/images/moonpay-widget-for-checkout-75512051900caaf6e22cd54b3137f32d.png)

#### 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>).

![Mint by fiat](https://docs.x.immutable.com/assets/images/processing-stage-b1c795a8387cd3114fa373c08e66aba3.png)

#### 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.

![Mint complete](https://docs.x.immutable.com/assets/images/transaction-complete-cfa9e53a9279dc5e0a08ce42327bb739.png)

### 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> |


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://xpansionchain-1.gitbook.io/xpansionchain/advanced-guides/nft-primary-sale-card-checkout/implement-primary-sale-card-checkout-feature.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.