Add SDK to React App
If your site is built with React and you're trying to install the Tensile JS SDK, there are multiple ways to add the SDK to your application. To explore these methods, you can check out the links below.
Otherwise, we recommend the following method.
The CDN link for the Tensile SDK needs to be placed in the static index.html file of your React App. This can usually be found in the "public" folder. Paste the script inside the head tag. Here is a "Create React App" example where the CDN link is placed in the <script> tag at the bottom of the <head> tag.
Now that the SDK has been imported via the CDN link, you can access the Tensile library via the window object. Add a <div> container tag to your rendered html (e.g. see id="tensile-button-container"). This will be the root element that the button will append to.
Using either the componentDidMount or useEffect lifecycle methods, you can instantiate the Tensile Button and provide it with your own function for dynamically fetching your order information and submitting it to your backend to create a payment.
Once a response returns, the modal will open up in your application so checkout can be processed!
Note, if you're getting an error while trying to hit our POST /payments endpoint from your backend server, please double check your request details such as API credentials, request body details, etc. If you're getting an unauthorized or CORS error, we may need to whitelist your domain to allow you to call our gateway.
