Foro

Como puedo hacer un botón para pagar, pero que se redirija a la app de clip para que realice el pago y despues que regrese a mi sitio web.

Servicio

import { Injectable } from '@angular/core';
import { HttpClient, HttpHeaders } from '@angular/common/http';
import { Observable } from 'rxjs';

@Injectable({
providedIn: 'root'
})
export class ClipService {

private apiUrl = 'https://api-gw.payclip.com/checkout';
private authToken = 'MjhiYWY5YzMtYmExZC00OTBiLTkzZDctYTEwMWE1ZTJjMWE2OmFjNWFkOTNhLWE4MzAtNDIyYi05ZTQwLTViYzVlY2NiNzNkMw==';

constructor(private http: HttpClient) { }

createPaymentLink(data: any): Observable {
const httpOptions = {
headers: new HttpHeaders({
'Content-Type': 'application/json',
'Authorization': Basic ${this.authToken}
})
};
return this.http.post(this.apiUrl, data, httpOptions);
}
}

formulario

<!--Formulario-->
<div
  class="w-full md:w-1/4 h-full md:fixed md:right-0 md:top-16 md:overflow-y-auto"
>
  <form [formGroup]="formReserva" (ngSubmit)="saveReserva()" class="bg-white p-6 rounded-lg shadow-md border mt-6 mr-10">
    <h3 class="text-xl font-semibold mb-4">Reserva</h3>
    <div class="mb-4">
      <label class="block text-red-700 text-sm font-bold mb-2"
        >{{ quinta.precioDiario | currency : "USD" : "symbol" }}/dia</label
      >
    </div>
    <div class="mb-4">
      <label
        class="block text-gray-700 text-sm font-bold mb-2"
        for="llegada"
        >Llegada</label
      >
      <input
        formControlName="llegada"
        id="llegada"
        type="date"
        placeholder="Llegada"
        class="w-full px-3 py-2 border rounded-lg shadow-md focus:outline-none focus:border-blue-500"
      />
    </div>
    <div class="mb-4">
      <label class="block text-gray-700 text-sm font-bold mb-2" for="salida"
        >Salida</label
      >
      <input
        formControlName="salida"
        id="salida"
        type="date"
        placeholder="Salida"
        class="w-full px-3 py-2 border rounded-lg shadow-md focus:outline-none focus:border-blue-500"
      />
    </div>
    <div class="mb-4">
      <label class="block text-gray-700 text-sm font-bold mb-2"
        >Huéspedes</label
      >
      <div class="flex flex-col justify-center items-center">
        <div class="mb-2">
          <span class="block text-sm font-semibold mb-1"
            >Introduce cantidad</span
          >
          <div class="flex items-center">
            <button
              type="button"
              class="px-2 py-1 border border-gray-300 rounded-full focus:outline-none focus:border-blue-500"
              (click)="decrement('adultos')"
              id="decrement_adultos"
            >
              -
            </button>
            <input
              formControlName="adultos"
              id="adultos"
              type="number"
              class="w-12 text-center border border-gray-300 rounded-md ml-2 mr-2 focus:outline-none focus:border-blue-500"
              value="0" 
              readonly                                  
            />
            <button
              type="button"
              class="px-2 py-1 border border-gray-300 rounded-full focus:outline-none focus:border-blue-500"
              (click)="increment('adultos')"
              id="increment_adultos"
            >
              +
            </button>
          </div>
        </div>
      </div>
    </div>
    
    <button
      class="bg-red-500 hover:bg-red-700 text-white font-bold py-2 px-4 rounded focus:outline-none focus:shadow-outline"
      type="submit"
    >
      Reservar
    </button>
  </form>
</div>

<div id="btnPayContent" class="mt-6 mr-10"></div>