# StreamPayments components

## Quick start guide

* Create your payment and copy the code snippet/PaymentID

{% hint style="info" %}
You have two options to embed StreamPayments into your website/app:

1. **Embed a&#x20;**<mark style="color:blue;">**Pay Link**</mark>**&#x20;or&#x20;**<mark style="color:blue;">**Pay Stream**</mark>**:** this allows developers to embed a 1-time or recurring payment for a single product item with a *fixed price*
2. **Embed a Dynamic payment:** this allows developers to embed Helio into a website or shopping basket to process *"dynamic" amounts in any currency*
   {% endhint %}

* Embed the StreamPayments Components as required per your use case (see resources below)
* Generate your API key in the Helio dashboard&#x20;

## Resources

{% hint style="info" %}
Find our sample project using StreamPayments Components on Github and the sample App on Vercel to help you get started.
{% endhint %}

**Installation:**

```
yarn add @stream-pay/react
```

### 1.  Embed a Pay Link or Pay Stream with the StreamPay button

```jsx
import { StreamPay } from "@stream-pay/react";

const App = () => {
  return (
    <div>
      <StreamPay
        cluster="devnet"typ
        paymentRequestId={"your_paylink_id"}
        onSuccess={function (event: SuccessPaymentEvent): void {
          console.log("onSuccess", event);
        }}
        onError={function (event: ErrorPaymentEvent): void {
          console.log("onError", event);
        }}
        onPending={function (event: PendingPaymentEvent): void {
          console.log("onPending", event);
        }}
        onStartPayment={function (): void {
          console.log("onStartPayment");
        }}
      />
    </div>
  );
};
```

**Properties table for the StreamPay components**

<table data-header-hidden><thead><tr><th></th><th width="202"></th><th></th><th></th><th></th></tr></thead><tbody><tr><td>Property</td><td>Type</td><td>Required</td><td>Default value</td><td>Description</td></tr><tr><td>cluster</td><td>string</td><td>yes</td><td>​</td><td><strong>available values;</strong> devnet, mainnet-beta, testnet</td></tr><tr><td>paymentRequestId</td><td>string</td><td>yes</td><td>​</td><td>Your paylink ID</td></tr><tr><td>onSuccess</td><td>function</td><td>no</td><td>​</td><td>triggered event when success</td></tr><tr><td>onError</td><td>function</td><td>no</td><td>​</td><td>triggered event when error</td></tr><tr><td>onPending</td><td>function</td><td>no</td><td>​</td><td>triggered event when pending</td></tr><tr><td>onStartPayment</td><td>function</td><td>no</td><td>​</td><td>triggered event on start payment</td></tr><tr><td>theme</td><td>object</td><td>no</td><td>​</td><td>customize the primary color(more will come soon) <code>theme={{ colors: { primary: #f76c1b }}}</code></td></tr><tr><td>totalAmount</td><td>number</td><td>no</td><td>​</td><td>you can pass dynamic amount. dynamic pricing should be checked for this.</td></tr><tr><td>supportedCurrencies</td><td>string array</td><td>no</td><td>​</td><td>currencies you want to support.</td></tr></tbody></table>

### **2. Embed a Dynamic payment with the StreamPay button**

```jsx
import { StreamPay } from "@stream-pay/react";

const App = () => {
  return (
    <div>
      <StreamPay
        cluster="devnet"
        paymentRequestId={"your_paylink_id"}
        supportedCurrencies={["SOL"]}
        totalAmount={0.01}
        onSuccess={(event: SuccessPaymentEvent): void => {
          console.log("onSuccess", event);
          /**
           * The success event signature looks as follows:
           * {
           *    content: string;
           *    transaction: string;
           * }
           * The transaction can be used to verify the payment with StreamPay API
           * */
        }}
      />
    </div>
  );
};
```

Verify the payment using the StreamPayments API - generate [here](broken://pages/1Ah19IrCj24nOzJza1S9). You can call the endpoint per the following example:

```reason
try {
  const transactionSignature = "solana blockchain transaction signature";
  const token = "token from StreamPayments team";
  const publicKey =
    "you public key registered with the stream pay team that receives transactions";
t
  const baseUrl = "https://dev.api.streampayments.app";
  const endpoint = `/v1/transactions/signature/${transactionSignature}?publicKey=${publickey}`;

  const response = await fetch(`${baseUrl}${endpoint}`, {
    method: "GET",
    headers: {
      "Content-Type": "application/json",
      Authorization: "Bearer " + token,
    },
  });
  return response.json();
} catch (e) {
  throw new Error("Unable to get transactions data from backend!");
}
```

### **3. Process Dynamic payments WITHOUT the StreamPay button**&#x20;

Please refer to the full repository for this option as well as various other developer options on our GitHub:

{% embed url="<https://github.com/stream-protocol/>" %}
source code
{% endembed %}


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://streampay.gitbook.io/streampay-web3-payments-api-dashboard/developers/streampayments-components.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.