# SDKs

Source: https://fragment.dev/api-reference/ledger-sdks

[Documentation index](https://fragment.dev/llms.txt)

<a id="ledger-sdks"></a>

<a id="backend"></a>

## Backend

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:

```bash group="typescript"
npm install --save @fragment-dev/node-client
```
```bash group="python"
pip install fragment-python
```
```bash group="go"
go get 'github.com/fragment-dev/fragment-go/v3'
```
```bash group="ruby"
gem install fragment-dev
```

Each SDK's README covers initialization, query generation, and usage:
- [TypeScript](https://github.com/fragment-dev/node-client/blob/dev/README.md)
- [Python](https://github.com/fragment-dev/fragment-python/blob/dev/README.md)
- [Go](https://github.com/fragment-dev/fragment-go/blob/dev/README.md)
- [Ruby](https://github.com/fragment-dev/fragment-ruby/blob/dev/README.md).

To create an SDK in a language not listed above:

1. Use the Fragment CLI to generate GraphQL queries from your Schema:
   ```bash
   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](https://fragment.dev/markdown/api-reference/ledger-cli-commands.md#gen-graphql) section.
2. Generate a type-safe SDK using a GraphQL codegen tool for your language. Provide the Fragment API [GraphQL schema](https://fragment.dev/markdown/api-reference/ledger-overview.md#graphql-schema) as input.
3. Implement [authentication](https://fragment.dev/markdown/api-reference/ledger-overview.md#authentication) and [error handling](https://fragment.dev/markdown/api-reference/ledger-overview.md#errors).

<a id="frontend"></a>

## Frontend

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

Install the SDK:

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

- Read the [Render the checkout form](https://fragment.dev/markdown/guides/make-payments.md#embed-checkout-render-the-checkout-form) section to embed checkout in your product.
- Read the [Save a card](https://fragment.dev/markdown/guides/make-payments.md#manage-saved-cards-save-a-card) section to save a customer's card.

<a id="frontend-theming"></a>

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

```typescript title="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.