Vue¶

@oura/vue · source

Hosted-checkout components for Vue 3. No secret key in the browser. Create the payment on your server and pass checkout_url to the component.

npm install @oura/vue

Checkout button¶

<script setup lang="ts">
import { OuraCheckoutButton } from '@oura/vue';
defineProps<{ checkoutUrl: string }>();
</script>

<template>
  <OuraCheckoutButton :checkout-url="checkoutUrl" @error="onError">
    Pay NPR 2,450
  </OuraCheckoutButton>
</template>

Or from a payment ID and client secret:

<OuraCheckoutButton
  base-url="https://checkout.ourapayment.com"
  :payment-id="paymentId"
  :client-secret="clientSecret"
/>

Custom UI¶

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

const goToCheckout = useOuraCheckout({ checkoutUrl });

The helpers reject non-https URLs (except localhost) and refuse an sk_ key.