96 lines
5.0 KiB
HTML
96 lines
5.0 KiB
HTML
<mat-card>
|
||
<mat-card-title><h5 class="mt-0">Review and Pay</h5></mat-card-title>
|
||
<hr><br/>
|
||
<mat-card-content>
|
||
<div fxLayout="row wrap">
|
||
<div fxLayoutAlign="end center" fxFlex.sm="33.33" fxFlex.xs="100" fxFlex.sm="50" fxFlex.md="33.33" fxFlex.lg="33.33" fxFlex.xl="33.33" class="m-gap p-gap">
|
||
<label class="post-profile-head">Contribution Amount</label>
|
||
</div>
|
||
<div fxFlex.sm="33.33" fxFlex.xs="100" fxFlex.sm="50" fxFlex.md="33.33" fxFlex.lg="33.33" fxFlex.xl="33.33" class="m-gap p-gap">
|
||
<mat-form-field appearance="outline" style="width: 50%;text-align: center;">
|
||
<input matInput type="number" placeholder="Amount">
|
||
</mat-form-field>
|
||
</div>
|
||
</div>
|
||
<div fxLayout="row wrap">
|
||
<div fxLayoutAlign="end center" fxFlex.sm="33.33" fxFlex.xs="100" fxFlex.sm="50" fxFlex.md="33.33" fxFlex.lg="33.33" fxFlex.xl="33.33">
|
||
<label class="post-profile-head">Contribution Towards :</label>
|
||
</div>
|
||
<div class="pl-2" fxFlex.sm="33.33" fxFlex.xs="100" fxFlex.sm="50" fxFlex.md="33.33" fxFlex.lg="33.33" fxFlex.xl="33.33">
|
||
<p>Building fund for Govt Girls Hr Sec School, Nellikuppam, Cuddalore</p>
|
||
</div>
|
||
</div>
|
||
|
||
</mat-card-content>
|
||
</mat-card>
|
||
<mat-card>
|
||
<mat-card-title><h5 class="mt-0">Choose a Payment Option</h5></mat-card-title>
|
||
<hr><br/>
|
||
<mat-tab-group class="mt-2 p-2">
|
||
<mat-tab>
|
||
<ng-template mat-tab-label>Cheque</ng-template>
|
||
<mat-card-content>
|
||
<form #form="ngForm">
|
||
|
||
</form>
|
||
</mat-card-content>
|
||
</mat-tab>
|
||
<mat-tab>
|
||
<ng-template mat-tab-label>Bank Transfer</ng-template>
|
||
<mat-card-content>
|
||
<form #form="ngForm">
|
||
|
||
</form>
|
||
</mat-card-content>
|
||
</mat-tab>
|
||
<mat-tab>
|
||
<ng-template mat-tab-label>Credit/Debit Cards</ng-template>
|
||
<mat-card-content>
|
||
<form #form="ngForm">
|
||
<div fxLayout="column" fxLayoutAlign="start stretch">
|
||
<mat-form-field style="width: 100%">
|
||
<input matInput placeholder="Card Holder Name" type="text" name="name" required>
|
||
</mat-form-field>
|
||
<mat-form-field style="width: 100%">
|
||
<input matInput placeholder="CVV" type="text" name="name" required>
|
||
</mat-form-field>
|
||
<mat-form-field style="width: 100%">
|
||
<input matInput placeholder="Card Number" type="text" name="cname" required>
|
||
</mat-form-field>
|
||
<mat-form-field style="width: 100%">
|
||
<input matInput placeholder="Expiration Date: 01/16" type="text" name="ctry" required>
|
||
</mat-form-field>
|
||
<button class="mat-green" mat-raised-button>Submit</button>
|
||
</div>
|
||
</form>
|
||
</mat-card-content>
|
||
</mat-tab>
|
||
<mat-tab>
|
||
<ng-template mat-tab-label>Wallets</ng-template>
|
||
<mat-card-content>
|
||
<form #form="ngForm">
|
||
|
||
</form>
|
||
</mat-card-content>
|
||
</mat-tab>
|
||
<mat-tab>
|
||
<ng-template mat-tab-label>UPI</ng-template>
|
||
<mat-card-content>
|
||
<form #form="ngForm">
|
||
|
||
</form>
|
||
</mat-card-content>
|
||
</mat-tab>
|
||
<!-- <mat-tab>
|
||
<ng-template mat-tab-label>Paypal</ng-template>
|
||
<h6><strong>Paypal</strong></h6>
|
||
<mat-card-content>
|
||
<p>Pay via PayPal; you can pay with your credit card if you don’t have a PayPal account.</p>
|
||
<button class="mat-green" mat-raised-button>Proceed To Paypal</button>
|
||
</mat-card-content>
|
||
</mat-tab> -->
|
||
</mat-tab-group>
|
||
<div class="pt-1" style="text-align: right;">
|
||
<button mat-raised-button color="primary" class="mr-1 mb-1">Complete Payment</button>
|
||
</div>
|
||
</mat-card> |