StreamPayments components

Build your own checkout flow for your website or app, fully white labelled

Quick start guide

• Create your payment and copy the code snippet/PaymentID

You have two options to embed StreamPayments into your website/app:

1. Embed a Pay Link or Pay Stream: 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

• Embed the StreamPayments Components as required per your use case (see resources below)

• Generate your API key in the Helio dashboard

Resources

Find our sample project using StreamPayments Components on Github and the sample App on Vercel to help you get started.

Installation:

yarn add @stream-pay/react

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

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

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

2. Embed a Dynamic payment with the StreamPay button

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. You can call the endpoint per the following example:

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

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

stream-protocol - OverviewGitHub

source code