> For the complete documentation index, see [llms.txt](https://streampay.gitbook.io/streampay-web3-payments-api-dashboard/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://streampay.gitbook.io/streampay-web3-payments-api-dashboard/developers/streampayments-components.md).

# 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 %}