Return to Orbital Homepage
API Documentation
Login to the Client Portal

Embedded Payment Page

The Orbital Embedded Payment Page is a seamless integration of crypto payment processing directly within your own website or application. Unlike the hosted payment page, which redirects customers to a separate website to complete their deposit, the embedded payment page allows your customers to complete their payment without leaving the your site. It functions as either an overlay or an inline element on your page.

Orbital widget simplifies the process of embedding our payment page within an iframe, providing a seamless integration solution for all our merchants. This approach eliminates the need for redirects and enhances the overall user experience.

Key Features

  • Easy embedding of Orbital's payment pages in an iframe
  • Minimal setup required
  • Direct content embedding on your site, eliminating redirects

Quick Links


Installation

NPM

npm install @payperform/widget


YARN

yarn add @payperform/widget

CDN
For faster integration, include Orbital Widget using our CDN:

Latest version:
<script src="https://widgets.getorbital.io/index-latest.js"></script>

Specific version:

<script src="https://widgets.getorbital.io/index-{version}.js"></script>

Implementation

React Example

import React, { useEffect, useState, useRef } from 'react';
import { init } from '@payperform/widget';
import styles from './OrbitalWidget.module.scss';
const OrbitalWidget: React.FC = () => {
const [signature, setSignature] = useState\<string | null>(null);
const orbitalRef = useRef\<HTMLDivElement | null>(null);
useEffect(() => {
// Fetch signature from your backend server
// Replace with your actual API call
setSignature('your-signature-from-backend');
}, \[]);
useEffect(() => {
if (signature && orbitalRef.current) {
orbitalRef.current.setAttribute('signature', signature);
init({
container: 'orbital',
});
}
}, [signature]);
return \<div className={styles['iframe-container']} id="orbital" ref={orbitalRef}></div>;
};
export default OrbitalWidget;

Vanilla JavaScript Example

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Orbital Widget Example</title>
  </head>
  <body>
    <div id="orbital"></div>
    <script src="https://widgets.getorbital.io/index-latest.js"></script>
    <script>
      window.addEventListener('load', async () => {
        // Replace with your actual signature fetching logic
        const signature = 'your-signature-from-backend';   
 const orbitalElement = document.getElementById('orbital');
    if (orbitalElement && signature) {
      orbitalElement.setAttribute('signature', signature);
    }

    if (typeof OrbitalWidget !== 'undefined' && typeof OrbitalWidget.init === 'function') {
      OrbitalWidget.init({
        container: 'orbital',
      });
     } else {
          console.error('OrbitalWidget was not loaded properly.');
        }
      });
    </script>
  </body>
</html>

Backend Implementation

To securely fetch the required signature for the Orbital Widget, implement a server-side solution. Here's an example using Node.js with Express:


require('dotenv').config();
const express = require('express');
const axios = require('axios');
const cors = require('cors');

const app = express();
app.use(cors());
app.use(express.json());

app.post('/generate-signature', async (req, res) => {
  try {
    const response = await axios.post(
      process.env.API_URL || 'https://hpp.getorbital.io/invoice/widgets',
      req.body,
      {
        headers: {
          'Content-Type': 'application/json',
          'x-api-key': process.env.API_KEY,
        },
      }
    );

    res.status(200).json(response.data);
  } catch (error) {
    res.status(500).json({
      message: 'Error sending request',
      error: error.response ? error.response.data : error.message,
    });
  }
});

const PORT = process.env.PORT || 3000;
app.listen(PORT, () => {
  console.log(`Server is running on port ${PORT}`);
});

Ensure you set up the necessary environment variables in a .env file:

API_URL=https://hpp.getorbital.io/invoice/widgets API_KEY=your_api_key_here

Security Considerations
When implementing an embedded payment page:

  • Always use HTTPS to encrypt data in transit.
  • Implement proper Content Security Policy (CSP) headers.
  • Regularly update the Orbital Widget to the latest version.
  • Never store sensitive payment information on your servers.
  • Implement proper error handling to avoid exposing sensitive information.