Setup

There are two different methods to choose from when setting up your String Checkout integration.

Option 1: Using the NPM package

Install the package using npm or yarn:

npm i @stringpay/sdk

Or

yarn add @stringpay/sdk

In your app's root HTML, load the following script:

<script src="../node_modules/@stringpay/sdk/dist/stringpay-v0.2.2.min.js"></script>

Option 2: Using the CDN

In your app's root HTML, load the following script:

<script src="https://cdn.string-api.xyz/stringpay-v0.2.2.min.js"></script>

Somewhere in your scripts, initialize the SDK. If your application is server side rendered, you must execute the 'init' function in the client side in order to access the window object (ex. in onMount in Svelte or in a useEffect hook in React).

The 'env' field determines the environment in which the payment will process. Utilize the "SANDBOX" environment when experimenting with testnet transactions. Once you are ready to execute real money transactions, use the "PROD" environment.

The publicKey field is where you put your String Checkout API Key. You can get one from your developer dashboard. (see how to set one up here: Developer Dashboard)

window.StringPay.init({  
    env: STRING_SDK_ENV, // use "PROD" or "SANDBOX"  
    publicKey: STRING_API_KEY  
});

If you are using TypeScript, add the StringPay object to your app.d.ts file or whichever global type declaration file you are using.

import type { StringPay } from "@stringpay/sdk";

declare global {
    interface Window {
        StringPay: StringPay;
    }
}

What’s Next

Finished setting up? Now start integrating!