Ionic SDK Full

card: "skyflow_id" // for a selected saved card.

  <div class="container-tonder">
    <div class="cards-list-container"></div>
    <div class="pay-new-card">
      <input checked id="new" name="card_selected" type="radio"/>
      <label for="new">
        <img class="card-image"/>
        <div class="card-number"></div>
      </label>
    </div>
    <div class="container-form">
      <div class="empty-div"></div>
      <div class="empty-div"></div>
      <div class="collect-row">
        <div class="empty-div"></div>
        <div class="expiration-year"></div>
        <div class="empty-div"></div>
      </div>
      <div class="checkbox">
        <input id="save-checkout-card" type="checkbox">
        <label for="save-checkout-card"></label>
      </div>
      <div></div>
      <div></div>
    </div>
    <button class="pay-button"></button>
  </div>

  <div class="card-item">
    <input name="card_selected" type="radio"/>
    <label class="card-item-label">
      <img class="card-image"/>
      <div class="card-number"></div>
      <div class="card-expiration"></div>
    </label>
  </div>

// tonder.service.ts
import { Injectable } from "@angular/core";
import { InlineCheckout } from "@tonder.io/ionic-full-sdk";
import {IInlineCheckout} from "@tonder.io/ionic-full-sdk/dist/types/inlineCheckout";

@Injectable({
  providedIn: "root",
})
export class TonderService {
  private inlineCheckout: IInlineCheckout;

  constructor(@Inject(Object) private sdkParameters: IInlineCheckoutOptions) {
    this.initializeInlineCheckout();
  }

  private initializeInlineCheckout(): void {
    this.inlineCheckout = new InlineCheckout({ ...this.sdkParameters });
  }

  configureCheckout(customerData: IConfigureCheckout): void {
    return this.inlineCheckout.configureCheckout({ ...customerData });
  }

  async injectCheckout(): Promise<void> {
    return await this.inlineCheckout.injectCheckout();
  }

  verify3dsTransaction(): Promise<ITransaction | IStartCheckoutResponse | void> {
    return this.inlineCheckout.verify3dsTransaction();
  }

  payment(
      checkoutData: IProcessPaymentRequest
  ): Promise<IStartCheckoutResponse> {
      return this.inlineCheckout.payment(checkoutData);
  }
  
  removeCheckout(): void {
      return this.inlineCheckout.removeCheckout();
  }
}

// checkout.component.ts
import { Component, OnInit, OnDestroy } from "@angular/core";
import { TonderService } from "./tonder.service";

@Component({
  selector: "app-tonder-checkout",
  template: `
    <div id="tonder-checkout"></div>
    <button (click)="pay()" [disabled]="loading">
      {{ loading ? "Processing..." : "Pay" }}
    </button>
  `,
  providers: [
    {
      provide: TonderInlineService,
        // Initialization of the Tonder Inline SDK.
        // Note: Replace these credentials with your own in development/production.
      useFactory: () =>
        new TonderInlineService({
          apiKey: "11e3d3c3e95e0eaabbcae61ebad34ee5f93c3d27",
          returnUrl: "http://localhost:8100/tabs/tab1",
          mode: "stage",
        }),
    },
  ],
})

export class TonderCheckoutComponent implements OnInit, OnDestroy {
  loading = false;
  checkoutData: IProcessPaymentRequest;

  constructor(private tonderService: TonderService) {
      this.checkoutData = {
          customer: {
              firstName: "Jhon",
              lastName: "Doe",
              email: "john.c.calhoun@examplepetstore.com",
              phone: "+58452258525"
          },
          cart: {
              total: 25,
              items: [
                  {
                      description: "Test product description",
                      quantity: 1,
                      price_unit: 25,
                      discount: 1,
                      taxes: 12,
                      product_reference: 89456123,
                      name: "Test product",
                      amount_total: 25
                  }
              ]
          },
          metadata: {},
          currency: "MXN"
      }
  }

  ngOnInit() {
    this.initCheckout();
  }

  ngOnDestroy() {
    // Clear the checkout upon destroying the component.
    this.tonderService.removeCheckout();
  }

  async initCheckout() {
    this.tonderService.configureCheckout({
      customer: { email: "example@email.com" },
    });
    await this.tonderService.injectCheckout();
    this.tonderService.verify3dsTransaction().then((response) => {
      console.log("Verify 3ds response", response);
    });
  }

  async pay() {
    this.loading = true;
    try {
      const response = await this.tonderService.payment(this.checkoutData);
      console.log("Payment successful:", response);
      alert("Payment successful");
    } catch (error) {
      console.error("Payment failed:", error);
      alert("Payment failed");
    } finally {
      this.loading = false;
    }
  }
}

// tonder.service.ts
import { Injectable } from "@angular/core";
import { InlineCheckout } from "@tonder.io/ionic-full-sdk";
import {IInlineCheckout} from "@tonder.io/ionic-full-sdk/dist/types/inlineCheckout";

@Injectable({
  providedIn: "root",
})
export class TonderService {
  private inlineCheckout: IInlineCheckout;

  constructor(@Inject(Object) private sdkParameters: IInlineCheckoutOptions) {
    this.initializeInlineCheckout();
  }

  private initializeInlineCheckout(): void {
    this.inlineCheckout = new InlineCheckout({ ...this.sdkParameters });
  }

  configureCheckout(customerData: IConfigureCheckout): void {
    return this.inlineCheckout.configureCheckout({ ...customerData });
  }

  async injectCheckout(): Promise<void> {
    return await this.inlineCheckout.injectCheckout();
  }

  async saveCard(): Promise<string> {
    return await this.inlineCheckout.saveCard();
  }
  
  removeCheckout(): void {
      return this.inlineCheckout.removeCheckout();
  }
}

// enrollment.component.ts
import { Component, OnInit, OnDestroy } from "@angular/core";
import { TonderService } from "./tonder.service";

@Component({
  selector: "app-tonder-enrollment",
  template: `
    <div id="container">
      <form id="payment-form">
        <div id="tonder-checkout-enrollment"></div>
      </form>
      <button class="external-payment-button" (click)="onSave($event)">Guardar</button>
    </div>
  `,
  providers: [
    {
      provide: TonderInlineService,
        // Initialization of the Tonder Inline SDK.
        // Note: Replace these credentials with your own in development/production.
      useFactory: () =>
        new TonderInlineService({
          apiKey: "11e3d3c3e95e0eaabbcae61ebad34ee5f93c3d27",
          returnUrl: "http://localhost:8100/tabs/tab1",
          mode: "stage",
        }),
    },
  ],
})

export class TonderCheckoutComponent implements OnInit, OnDestroy {
  loading = false;
  customerData: IProcessPaymentRequest;

  constructor(private tonderService: TonderService) {
      this.customerData = {
          customer: {
              firstName: "Pedro",
              lastName: "Perez",
              country: "Finlandia",
              street: "The street",
              city: "The city",
              state: "The state",
              postCode: "98746",
              email: "jhon.doe@example.com",
              phone: "+58 4169855522"
          }
      }
  }

  ngOnInit() {
    this.initCheckout();
  }

  ngOnDestroy() {
    // Clear the checkout upon destroying the component.
    this.tonderService.removeCheckout();
  }

  async initCheckout() {
    this.tonderService.configureCheckout({
      customer: { email: "example@email.com" },
    });
    await this.tonderService.injectCheckout();
  }

  async onSave(event: any) {
      await this.tonderService.saveCard()
  }
}