SDK
API ReferenceSdkReact
React Integration
Use Uprails payment components in your React application.
Installation
Include the Uprails SDK script in your HTML or install via npm:
<script src="https://sdk.uprails.com/HyperLoader.js"></script>Sandbox Environment: For testing in sandbox, use https://sdk.sandbox.uprails.com/web/0.127.0/v1/HyperLoader.js instead.
Setup
Wrap your app with the HyperProvider:
import { HyperProvider } from '@uprails/react-sdk';
function App() {
return (
<HyperProvider publishableKey="pk_snd_YOUR_PUBLISHABLE_KEY">
<CheckoutPage />
</HyperProvider>
);
}Payment Form Component
import { useState, useEffect } from 'react';
function CheckoutForm() {
const [clientSecret, setClientSecret] = useState('');
useEffect(() => {
// Create payment intent on your server
fetch('/create-payment', {
method: 'POST',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify({ amount: 5000, currency: 'USD' }),
})
.then(res => res.json())
.then(data => setClientSecret(data.clientSecret));
}, []);
if (!clientSecret) return <div>Loading...</div>;
return (
<form onSubmit={handleSubmit}>
{/* Payment element will be mounted here */}
<div id="payment-element" />
<button type="submit">Pay Now</button>
</form>
);
}Customization
You can customize the appearance of the payment form:
const appearance = {
theme: 'midnight',
variables: {
colorPrimary: '#41175e',
colorBackground: '#ffffff',
colorText: '#1a1a2e',
borderRadius: '8px',
},
};
const unifiedCheckout = hyper.widgets({
clientSecret,
appearance,
});Refer to the SDK documentation for the full list of customization options and themes.