Blog Speed

How to Enable Bitcoin Payments On Your Website through Speed.JS?

At Speed, we are constantly working to improve our product and its experience. From cutting-edge payment features to seamless integrations across multiple platforms, Speed is one of the most versatile Bitcoin payment processors on the market.

If you are seeking to integrate our solution into your existing technical infrastructure, you can do it with Speed JS — an ES module that will allow you to accept Bitcoins with just a few lines of code.

With Speed JS, you can create a checkout session for collecting payments. It is one of the easiest ways to accept payments right from your store without redirecting users to any external website. 

Why Speed JS?

Speed JS can simplify the integration process and enable seamless Bitcoin transactions on your store. Once integrated, you can collect Bitcoins from your store in real-time. Using Speed JS will:

  • Accelerate your development
  • Reduce load time on the server
  • Enable seamless Bitcoin checkout on your website
  • Improve your user experience

Let’s learn how to install Speed JS on your store and accept Bitcoins.

Installation method 1: Via Universal Module Definition (UMD)

To begin the integration, you have to include the Speed.js script on your website’s checkout page – it should always be loaded directly from https://js.tryspeed.com

Manually add the Speed.js script tag to the <head> on your site. When you call Speed with your publishable key, it will use the existing script tag.

<!-- Somewhere in your site's <head> -->
<script src="https://js.tryspeed.com"></script>

Once the script is loaded, you can create an object of speed.js by passing a publishable key.

// Speed.js is not initiated until this is called
const speed = new Speed("pk_test_fdrdetxilogwetazubs");

Installation method 2: Via NPM package installer

To install Speed.js using the npm package installer, use the following command:

npm install @speeddev/speed-js
or
yarn add @speeddev/speed-js

Import Speed.js

This function returns a newly created Speed object once speed.js is loaded. It takes the same parameters passed when directly initializing a Speed instance.

import { Speed } from "@speeddev/speed-js";
// Speed.js is not initiated until this is called
const speed = new Speed("pk_test_fdrdetxilogwetazubs");

We have placed a random API key in this example. Replace it with your publishable API keys to test this code through your Speed account. Click here to get your API keys.

For more information on how to use Speed.js, please refer to the Speed.js API reference.

Create checkout session

A checkout session represents your customer’s session to pay. A new session is created each time your customer attempts to pay via the Speed platform. 

To create a checkout session you can call the function of speed.js to create a checkout session by passing a required parameter to it.

speed.createCheckoutSession({
  currency: "INR",
  amount: 100,
  successUrl: "https://example.com",
  cancelUrl: "https://example.com",
  successMessage: "Payment Successful!",
  paymentMethods: ["onchain", "lightning"],
  metadata: {
    country: "India",
  },
});

Upon successful creation of the session, it will make an internal call to the payment API to generate information such as the payment QR code and branding details. Your customers can pay by scanning the QR code on a simple payment page that opens in a web browser. Customers do not need a Speed account to pay. Each checkout session will be marked as paid once its respective payment is received.

Method parameters

Below are the parameters you can use to create the checkout session.

Name Type Required Description
currency string true You must specify your preferred base currency (fiat or cryptocurrency) to create a checkout session. A three-lettered ISO-compliant currency name must be used.
amount number true Amount for which you want to create a checkout session
successUrl string false When the payment is successful, you can use this parameter to redirect the customer to your hosted page.
cancelUrl string false This parameter is used to redirect your user to any site you want when they do not proceed with the payment and click the return button.
successMessage string false This is the custom success message that will show after payment successful.
paymentMethods array false We offer both on-chain & lightning network payment options for customers to choose from.
metadata object false To help you gather additional data, this parameter has been added which you can easily add or remove while integrating.

 

Who can use Speed JS?

If you are a developer or a business owner seeking to integrate Speed’s features with your existing technical infrastructure — Speed JS is for you. With just a few lines of code, Speed JS can enable Bitcoin payments on your store. It is fast, secure, well-optimized, and easy to integrate. Once enabled, Speed JS will allow your customers to complete their payments right from your store. Our developers are constantly working on the platform and will release new versions of Speed JS periodically.

Additional Speed features

Signing up with Speed also grants you access to additional payment features. Let’s quickly review a few useful features Speed offers right out of the box.

  • Payment Links: You can create and share payment links to collect Bitcoin payments in real-time.
  • Payment QRs: Create a scannable QR code that will let your customers pay via their preferred Bitcoin wallet.
  • mPOS App: You can install our dedicated mobile Point-of-sale app on your smartphone or tablet and use it across your offline channels for collecting payments.

Apart from the abovementioned features, Speed offers several additional features like a checkout page, and dynamic QR for collecting payments on the go. You can access all its features from our dedicated web application.

Final words

We hope our quick guide will help you integrate Speed JS into your website. Upon successful integration, you can collect Bitcoins from your website. Speed JS is well-coded, highly optimized, and easy to add. If you face any challenges while adding Speed to your website, get in touch with us, and we will be happy to help.

Speed Team