Angular¶

@oura/angular · source

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

npm install @oura/angular

Standalone component¶

import { Component } from '@angular/core';
import { OuraCheckoutButtonComponent } from '@oura/angular';

@Component({
  standalone: true,
  imports: [OuraCheckoutButtonComponent],
  template: `<oura-checkout-button [checkoutUrl]="checkoutUrl">Pay NPR 2,450</oura-checkout-button>`,
})
export class PayComponent {
  checkoutUrl = ''; // from your server: payment.checkout_url
}

NgModule¶

import { OuraCheckoutModule } from '@oura/angular';

@NgModule({ imports: [OuraCheckoutModule] })
export class AppModule {}

Service for custom UI¶

import { OuraCheckoutService } from '@oura/angular';

constructor(private oura: OuraCheckoutService) {}

pay() {
  this.oura.redirectToCheckout({ checkoutUrl: this.checkoutUrl });
}

URLs that aren't https (except localhost) are rejected, and passing an sk_ key where a client secret belongs throws immediately.