đŗBuy with credit card
A credit card payment option facilitates easy onboarding for users who are new to Tezos.
Several crypto "on-ramping" solutions exist. These services allow users to "top-up" their wallet with fungible crypto-currencies on various networks, with a simple credit card payment and little-to-no KYC requirements. Some of the best known providers include:
Moonpay
Ramp.network
Wert
Transak
Some of these allow a "Direct-to-NFT" shortcut where the user can purchase an NFT directly with their credit card, allowing for a 'Web2-like' experience.
Wert supports smart contract interactions on Tezos. This means that a developer can provide smart contract input to a payable entrypoint that will be executed by Wert upon user payment. Let's see how that can fit into our dApp.
We'll implement Wert for the Tzombie token (id 1). Clicking on this token on the drops page will popup a Wert payment form, and the token will be delivered when a fiat payment equivelant to 2ęŠ succeeds.
Requirements
Before setting up an integration, developers must agree on a partnership with Wert. A development environment can be set up by submitting a ticket on their Discord server. See their docs for more information.
Note that the Wert integration only works on live networks (ghostnet
and mainnet
) and cannot be tested on the sandbox. You may wish to move your project to the ghostnet for the remainder of the tutorial. To do this:
Swap to your preferred ghostnet using
ccli switch endpoint
Run
ccli set account alice
Redeploy your contracts and register your NFTs on the new contracts by following the instructions from the repo README.
Update your .env.local file in line with the instructions in the Environment Variables section
Implementation
Provider
We'll create another provider for this use-case. Create a provider in ./components/providers/WertProvider.tsx
and add the following imports:
It exposes a simple checkout
method:
The checkout
method is where the initialization and mounting of the Wert widget will happen. We will prepare and sign data to send to the Wert SDK, according to the token information we want to purchase.
Note here how we're using taquito
directly, instead of using Completium bindings. This allows us to get the special JSON as hex-string parameters that is required for signature by the Wert SDK.
We've hard-coded all values here for simplicity (commodity_value
, public key
, partner id
...) Typically, these would instead be dynamically fetched or set by configuration
Don't forget exports:
We can now implement the purchase button on our drops
page:
Don't forget to include <WertProvider>
in the app hierarchy!
Test
In order to test the Wert widget, you can use the following information:
Last updated