PayVault Documentation

website·Indexed 29 days ago

https://payvault-docs.vercel.app/

Documentation for the PayVault SDK, featuring a quickstart guide for integrating PayVault Checkout to accept crypto payments. Includes technical references for core type definitions, such as the PayVault class, and interfaces like CartItem, PayVaultProviderProps, and OneClickCheckoutProps.

Tokens
13.5K
Snippets
113
Records
153
Agent score
74%

What's inside PayVault

  1. Overview of payvault task runner and monorepo tool

    payvault is a task runner and monorepo management tool written in Rust, designed for the web ecosystem to optimize codebase management and developer productivity. It provides cross-language support for JavaScript, TypeScript, Rust, Go, and Ruby.
  2. Manage payments using PayVault Checkout Sessions

    A Checkout Session is created from a cart containing one or more items. Upon creation, a unique Session Id is generated. This ID allows users to complete payments in USDC on supported chains via two methods: by navigating to a hosted checkout URL (https://payvault.com/checkout/<Session Id>) or by using a Modal/React component embedded on a site. The total cost is determined at the time of session creation and is denominated in USDC.
  3. Create interactive blog posts using MDX in Docusaurus

    Blog posts in this documentation system support MDX, allowing the use of React components directly within Markdown files to create interactive content.
    <button onClick={() => alert('button clicked!')}>Click me!</button>
  4. Translate documentation files for a specific locale

    To translate a document, copy the original file from the docs folder into the corresponding locale directory within the i18n folder. The directory structure follows the pattern: i18n/{locale}/docusaurus-plugin-content-docs/current/.
    # Create the directory for French translations
    mkdir -p i18n/fr/docusaurus-plugin-content-docs/current/
    
    # Copy the intro page to the translation folder
    cp docs/intro.md i18n/fr/docusaurus-plugin-content-docs/current/intro.md
  5. Create a blog post in Docusaurus

    Docusaurus automatically generates a dedicated page for every blog post file created, along with a blog index page, a tag system, and an RSS feed. To create a post, create a markdown file in the blog/ directory. The filename should follow the date-slug format (e.g., YYYY-MM-DD-slug.md).
    ---
    slug: greetings
    title: Greetings!
    authors:
      - name: Joel Marcey
        title: Co-creator of Docusaurus 1
        url: https://github.com/JoelMarcey
        image_url: https://github.com/JoelMarcey.png
      - name: Sébastien Lorber
        title: Docusaurus maintainer
        url: https://sebastienlorber.com
        image_url: https://github.com/slorber.png
    tags: [greetings]
    ---
    
    Congratulations, you have made your first post!
    
    Feel free to play around and edit this post as much you like.
  6. Create standalone pages using Markdown

    Standalone pages in PayVault can be written using simple Markdown without the need for React components, making it easier to create basic content pages.
  7. Manage blog posts in Docusaurus

    Docusaurus blogging features are powered by the @docusaurus/plugin-content-blog plugin. To create blog posts, add Markdown files or folders to the blog directory. Post dates are automatically extracted from filenames using the format YYYY-MM-DD-title.md (e.g., 2019-05-30-welcome.md) or from an index.md file within a dated folder (e.g., 2019-05-30-welcome/index.md). Using folders for posts allows for easier co-location of images.
  8. Create and manage blog posts in Docusaurus

    Docusaurus blogging features are powered by the @docusaurus/plugin-content-blog plugin. To create blog posts, add Markdown files or folders to the blog directory. Post dates are automatically extracted from filenames using the format YYYY-MM-DD-title.md (e.g., 2019-05-30-welcome.md) or from an index.md file within a dated folder (e.g., 2019-05-30-welcome/index.md). Using a folder for a post allows for easier co-location of images. Blog authors can be managed in authors.yml, and posts support tags.
  9. Embed interactive React components using MDX

    Docusaurus supports MDX, allowing you to export and use React components directly within your Markdown files to create interactive documentation.
    export const Highlight = ({children, color}) => (
      <span
        style={{
          backgroundColor: color,
          borderRadius: '20px',
          color: '#fff',
          padding: '10px',
          cursor: 'pointer',
        }}
        onClick={() => {
          alert(`You clicked the color ${color} with label ${children}`)
        }}>
        {children}
      </span>
    );
    
    This is <Highlight color="#25c2a0">Docusaurus green</Highlight> !
  10. Create links and reference images in Markdown

    Docusaurus supports standard Markdown links and images. Links can use absolute URL paths or relative file paths. Images can be referenced via absolute paths (relative to the static directory) or relative paths to colocate images with Markdown files.
    <!-- Links -->
    [Create a page](/create-a-page)
    [Create a page](./create-a-page.md)
    
    <!-- Images -->
    ![Docusaurus logo](/img/docusaurus.png)
    ![Docusaurus logo](./img/docusaurus.png)
  11. Install PayVault Checkout SDK in a Next.js project

    To integrate PayVault Checkout, create a Next.js application and install the @payvault/checkout-sdk package, which provides the Node.js SDK for interacting with the PayVault Checkout API.
    npx create-next-app checkout --ts
    npm install @payvault/checkout-sdk