--- title: "Steps" description: "A step-by-step guide component with numbered steps, vertical connecting lines, and copy-to-clipboard functionality for step links." author: "ReadMe" version: "1.0.0" license: "MIT" --- import React, { useState, Children, isValidElement, cloneElement } from "react"; export const Steps = ({ name = "steps", children }) => { const childArray = Children.toArray(children); const count = childArray.length; return (

{childArray.map((child, index) => { if (isValidElement(child)) { return cloneElement(child, { key: index, stepIndex: index, stepsName: name, isFirst: index === 0, isLast: index === count - 1, }); } return child; })}

); }; export const Step = ({ number, stepIndex = 0, title = "", stepsName = "steps", isFirst = false, isLast = false, children, }) => { const [isHovered, setIsHovered] = useState(false); const [copied, setCopied] = useState(false); const displayNumber = number !== undefined ? number : stepIndex + 1; const stepId = `${stepsName}-${displayNumber}`; const copyLink = () => { if (typeof window === 'undefined') return; try { const url = `${window.location.origin}${window.location.pathname}#${stepId}`; navigator.clipboard.writeText(url); setCopied(true); setTimeout(() => setCopied(false), 1500); } catch (error) { console.error('Failed to copy link:', error); } }; return (

{/* Vertical line - positioned behind the number, extends into padding */}

{/* Number button - positioned on top of line */} {/* Right column: title + content */}

{title}

{children}

); }; SportsPay provides a sandbox environment for validating your integration before going live. Test transactions do not reach the card networks. To request test credentials, email [partnersupport@sportspay.com](mailto:partnersupport@sportspay.com) SportsPay supports three ways to accept payments. Choose the one that fits your platform: | | Customized Checkout | Embedded Components | Direct with Embedded Tokenization | | ----------------------------- | ------------------------------------------------------------------------------------------------------------------ | --------------------------------------------------------------------------------------- | ----------------------------------------------------------------------------------------------------------- | | **How it works** | The customer is redirected to a SportsPay-hosted payment page themed to your brand, then returned to your platform | SportsPay's branded payment page is rendered inside your checkout as an iframe fragment | Your platform submits transactions directly to the InterPay™ gateway using a secure browser-generated token | | **Card data handled by you?** | No — entered directly on SportsPay's hosted page | No — entered on SportsPay's hosted page inside an iframe | No — tokenized in the browser via InterPay JavaScript | | **Branding** | Themed to match your brand — colors, gradients, and logo | Themed to match your brand, plus control over which visual components appear | You build the UI entirely | | **PCI scope** | Minimal | Minimal | Reduced | | **Best for** | Fastest integration with lowest compliance burden | In-page checkout experience without handling card data | Full control over the checkout UI | → [Read the Customized Checkout overview](doc:customized-checkout) → [Read the Embedded Components overview](doc:embedded-components) → [Read the Direct with Embedded Tokenization overview](doc:direct-payments) If you're using Customized Checkout or Embedded Components, SportsPay themes the hosted payment page to match your brand — colors, gradients, button styles, border radii, and your logo. Theming applies automatically to both hosted methods. See [Theming](doc:theming) for how to submit your brand theme. > **Note:** If you're using Direct with Embedded Tokenization, you are responsible for building and styling the checkout UI yourself. The theming system does not apply. Use your test credentials with one of the following gateway URLs: **Recommended (matches live behaviour):** * [https://svra.interpaypos.com:1443/](https://svra.interpaypos.com:1443/) * [https://svrb.interpaypos.com:1443/](https://svrb.interpaypos.com:1443/) **Pre-production (early feature testing only — may change without notice):** * [https://testgate.interpaypos.com/api/](https://testgate.interpaypos.com/api/) Use the following test card numbers to simulate payments. Any future expiry date and any CVV value will work. | Card Type | Card Number | | ---------------- | ---------------- | | Visa | 4000000000000002 | | Mastercard | 5454545454545454 | | American Express | 378282246310005 | | Discover | 6011000000000004 | **To simulate a decline**, use an amount ending in `1` (e.g. `20.01`) or set the card expiry month to `04`. Once you've run a test transaction, log in to PaymentsHQ to confirm the result: * **Partner login** — view the gateway log and all transactions across merchants * **Test merchant login** — validate the merchant experience and check fields like `INV` for transaction grouping When you're ready to move to production, see the [Production](doc:production) guide for steps to switch over your credentials and gateway URLs.

What's Next?