How it Works
String Checkout Overview
What is String Checkout?
String Checkout enables seamless in-game NFT transactions with a quick and easy card payment integration, enhancing your player's experience.
![](https://files.readme.io/4a2adac-ezgif.com-gif-maker_1.gif)
When Players choose to pay with their cards, String Checkout loads an easy to use payment modal within an iframe that directs the Player through the entire experience from end-to-end. String Checkout provides a secure, PCI compliant payment experience so you don't have to worry about handling sensitive payment details.
The Checkout Experience
Easy Developer Integration
String Checkout is a "turnkey" payment solution designed to get payments up and running within a day. The open-source Web SDK is compatible with most popular JS/TS frontend frameworks such as Svelte and React.
Developers simply need to display a "Buy" button to the Game UI and send transaction parameters once the Player clicks that button. String Checkout handles the rest!
![](https://files.readme.io/18030b4-small-Screen_Shot_2023-05-12_at_4.32.27_PM.png)
Frictionless Player Experience
The String Checkout UI features a streamlined payment and purchase flow to complete transactions with String. First-time users will need to verify their wallets and emails in just a few clicks, and add a payment method. Otherwise, Players simply need to connect their wallet and confirm their purchase.
Below is the standard onboarding and payment UI flow for a first-time user.
- Signature Request
![A Signature Payload sent to directly to a Player using Metamask.
Signing this message creates a Player Identity with String, or logs-in a returning user.](https://files.readme.io/622ff69-String_Signature_Payload.png)
- Sign Up and Verify Your Email
![](https://files.readme.io/8b7b1f4-Screen_Shot_2023-07-13_at_12.20.57_PM.png)
- Add Card Details
![](https://files.readme.io/3aea5db-small-Screen_Shot_2023-05-12_at_1.13.33_PM.png)
- Add Address Details
![](https://files.readme.io/a607733-Screen_Shot_2023-07-13_at_12.22.50_PM.png)
- Complete Your Purchase
![](https://files.readme.io/303bc24-small-Screen_Shot_2023-05-12_at_1.13.54_PM.png)
- Purchase Confirmation Screen
![](https://files.readme.io/6ae58cd-small-Screen_Shot_2023-05-12_at_1.14.03_PM.png)
Implementation Checklist
- Create an account in the Developer Dashboard
- Create a Sandbox API key
- Follow the Implementation Guide to create your "Buy With Card" button
- Test. Test. Test.
- Register your smart contract in the Developer Dashboard
- Create a Production API key
- Deploy your code to Production using your prod API key
- Start raking in that dough babaaayyyyyyy
![Alt Text](https://media.giphy.com/media/w1z2ilkWZagRG/giphy.gif)
Updated about 1 year ago