React¶

@oura/react · source

Hosted-checkout components for React. No secret key ever reaches the browser. Create the payment on your server with a server SDK, pass the resulting checkout_url to the component, and it redirects the customer to Oura.

npm install @oura/react

Checkout button¶

import { OuraCheckoutButton } from '@oura/react';

// checkoutUrl comes from your server: payment.checkout_url
export function Pay({ checkoutUrl }: { checkoutUrl: string }) {
  return (
    <OuraCheckoutButton checkoutUrl={checkoutUrl} className="btn">
      Pay NPR 2,450
    </OuraCheckoutButton>
  );
}

Or build the URL from a payment ID and its client secret:

<OuraCheckoutButton
  baseUrl="https://checkout.ourapayment.com"
  paymentId={paymentId}
  clientSecret={clientSecret}
/>

Custom UI¶

import { useOuraCheckout } from '@oura/react';

const goToCheckout = useOuraCheckout({ checkoutUrl });
return <button onClick={goToCheckout}>Continue to payment</button>;

Safety checks¶

The helpers refuse any URL that isn't https (except localhost) and throw if you pass an sk_ secret key where the client secret belongs.