Client Integration

Add the Uprails payment form to your frontend.

Step 1: Load the SDK

Add the Uprails SDK script to your HTML:

<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.

Step 2: Initialize

const hyper = Hyper('pk_snd_YOUR_PUBLISHABLE_KEY');

Step 3: Create the Payment Element

// Fetch client secret from your server
const { clientSecret } = await fetch('/create-payment', {
  method: 'POST',
  headers: { 'Content-Type': 'application/json' },
  body: JSON.stringify({ amount: 5000, currency: 'USD' }),
}).then(r => r.json());

// Create the unified checkout
const unifiedCheckout = hyper.widgets({ clientSecret });
const paymentElement = unifiedCheckout.create('payment');
paymentElement.mount('#payment-element');

Step 4: Handle Submission

const form = document.getElementById('payment-form');

form.addEventListener('submit', async (event) => {
  event.preventDefault();

  const { error, status } = await hyper.confirmPayment({
    elements: unifiedCheckout,
    confirmParams: {
      return_url: 'https://yoursite.com/payment/complete',
    },
  });

  if (error) {
    // Show error to customer
    console.error(error.message);
  }
});

Step 5: HTML Template

<form id="payment-form">
  <div id="payment-element">
    <!-- Uprails payment form will be inserted here -->
  </div>
  <button type="submit" id="submit-button">Pay</button>
  <div id="error-message"></div>
</form>