Ledger Sdks | Fragment | API Reference

G SDKs#

FRAGMENT publishes SDKs in:

TypeScript
Go
Python
Ruby

The SDKs are open-source, implement authentication, and come with predefined GraphQL queries to help you get started.

Install the SDK for your language:

npm install --save @fragment-dev/node-client

Each SDK's README covers initialization, query generation, and usage:

To create an SDK in a language not listed above:

Use the FRAGMENT CLI to generate GraphQL queries from your Schema:
fragment get-schema \ --output=schema.jsonc &&\ fragment gen-graphql \ --path=schema.jsonc \ --output=queries.graphql
Learn about the different options you can provide to gen-graphql in its reference section.
Generate a type-safe SDK using a GraphQL codegen tool for your language. Provide the FRAGMENT API GraphQL schema as input.
Implement authentication and error handling.

FRAGMENT publishes Payment Elements, a React SDK that collects card details in your frontend. It needs React 17, 18 or 19.

Install the SDK:

npm install --save @fragment-dev/payment-elements

Read the Render the checkout form section to embed checkout in your product.
Read the Save a card section to save a customer's card.

Theming#

Pass a theme to PaymentElements to change how the card form looks. Every field is optional, and a field you leave out keeps FRAGMENT's default:

Checkout.tsx

<PaymentElements
  theme={{
    appearance: 'light',
    colors: { text: 'rgb(20 20 20)', error: 'rgb(200 30 30)' },
    fontFamily: 'Inter, sans-serif',
    fontSize: '16px',
    borderRadius: '8px',
  }}
>
  {/* PaymentSession or PaymentMethodSetupSession */}
</PaymentElements>

Field	Effect
`appearance`	`light` or `dark`. Defaults to `dark` when `<html>` has the `dark` class.
`colors`	`text`, `mutedText`, `inputBackground`, `inputFocusBackground`, `surface`, `border`, `error`.
`fontFamily`	A font family the payment frame already has. The frame loads no web font from your page.
`fontSize`	A size in `px`, such as `16px`. The line height follows it.
`borderRadius`	The corner radius of the fields, the rows and the address suggestions.

The fields render in a frame that cannot read your page's CSS custom properties, so pass literal colors.

Backend

Frontend