Modul Enterprizepayment

Situs ini akan sangat baik dilihat ketika Anda menggunakan browser modern dengan JavaScript yang telah diaktifkan.

Modul Enterprizepayment

CSSCoder

Modul ini sudah tidak dikembangkan lagi atau diperbarui dan mungkin akan dihapus di update core Justapp mendatang. Jika ingin tetap digunakan, silakan ikuti panduan di bawah ini.

Tambahkan modul Enterprizepayment ke aplikasi yang Anda buat.
Aktifkan metode pembayaran dengan menekan tombol yang ada pada kolom Status tab Manage - Payment Method. Merah : off, hijau: on.
Jika mengalami kendala ketika mengaktifkan metode Bank Transfer, silakan klik ikon pensil, lakukan perubahan pada tulisan Field xxx dengan menekan ikon pensil. Buat isiannya kurang lebih seperti gambar di bawah ini.
Klik Additional Field jika ingin menambahkan bidang isian baru dan klik Save jika sudah selesai.
Paypal dan Stripe tidak perlu diaktifkan karena keduanya merupakan metode pembayaran asing. Jikapun ingin tetap digunakan, silakan klik ikon pensil untuk melakukan konfigurasi.
Riwayat transaksi dapat Anda lihat pada tab Transactions - Transaction Details.
Pada tab Setting, Anda dapat mengatur ke modul mana akan diarahkan jika transaksi di modul Enterprizepayment telah dilakukan. Fungsi ini tidak lagi bekerja.

Anda dapat menggunakan CSS di bawah ini jika ingin mengubah tampilan modul. Kopi dan tepatkan ke menu/tab Colors - Advanced Customization CSS/SCSS pada editor builder Anda.

/* Payment */
ion-view[state="enterprisepayment"] ion-content:before {
    content: "Donasi";
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 26px;
    font-weight: bold;
}

ion-view[state="enterprisepayment"] ion-content {
    top: 70px;
}

ion-view[state="enterprisepayment"] ion-content .card.balanced {
    box-shadow: none;
}

ion-view[state="enterprisepayment"] ion-content .card.balanced:before {
    content: " ";
    display: block;
    height: 150px;
    background-image: url(https://cdni.iconscout.com/illustration/free/thumb/online-money-donation-5029325-4186546.png);
    background-position: center;
    background-size: contain;
    background-repeat: no-repeat;
}

ion-view[state="enterprisepayment"] ion-content .card.balanced span.input-label.ng-binding:after {
    content: "Berapapun jumlah bantuan Anda, nilainya sangat berharga bagi mereka yang membutuhkan. Masukkan nominal yang akan didonasikan pada kolom berikut ini!";
    font-size: 14px;
    white-space: normal;
    line-height: 1.8;
}

ion-view[state="enterprisepayment"] ion-content .card.balanced span.input-label.ng-binding {
    width: 100%;
    min-width: 100%;
    font-size: 0;
    margin-bottom: 25px;
}

ion-view[state="enterprisepayment"] ion-content .card.balanced input {
    min-width: 100%;
    background-color: #ecf0f6;
    padding: 10px;
    height: 50px;
    border-radius: 10px;
}

ion-view[state="enterprisepayment"] .button.button-custom:after {
    content: "Berikutnya";
    font-size: 16px;
    display: flex;
    justify-content: center;
    align-items: center;
}

ion-view[state="enterprisepayment"] .button.button-custom {
    border: 0;
    background-color: #253682;
    color: #fff;
    font-size: 0;
    text-transform: uppercase;
}

ion-view[state="enterprisepayment_process"] .scroll>div {
    margin: 15px;
}

ion-view[state="enterprisepayment_process"] .item.item-custom.amountdiv h2.ng-binding {
    animation: blinkingText 1.2s infinite;
}

@keyframes blinkingText {
    0% {
        color: #f9bf00;
    }
    49% {
        color: #f9bf00;
    }
    60% {
        color: transparent;
    }
    99% {
        color: transparent;
    }
    100% {
        color: #f9bf00;
    }
}


/* Chrome, Safari, Edge, Opera */

ion-view[state="enterprisepayment"] ion-content .card.balanced input::-webkit-outer-spin-button,
ion-view[state="enterprisepayment"] ion-content .card.balanced input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}


/* Firefox */

ion-view[state="enterprisepayment"] ion-content .card.balanced input[type=number] {
    -moz-appearance: textfield;
}

ion-view[state="enterprisepayment_process"] .item.item-custom.amountdiv {
    padding: 20px 0 !important;
}

ion-view[state="enterprisepayment_process"] .item.item-custom.amountdiv .ng-binding,
ion-view[state="enterprisepayment_process"] .optionsdiv h4.ng-binding,
ion-modal-view.modal ion-content .scroll>form>.list label.item.item-input.item-stacked-label span {
    color: #7f7f7f;
    font-size: 16px;
    text-transform: capitalize;
    min-width: 100%;
    margin-bottom: 5px;
    text-align: left;
}

ion-view[state="enterprisepayment_process"] .optionsdiv {
    padding: 0;
}

ion-view[state="enterprisepayment_process"] .butt_img {
    border: 1px solid #253682 !important;
}

ion-view[state="enterprisepayment_process"] .scroll>div>div:last-child {
    display: inline-block;
    margin: 0 !important;
    width: 100%;
}

ion-view[state="enterprisepayment_process"] .scroll>div>div:last-child div {
    display: inline-flex;
    width: 46%;
    margin: 2%;
}

ion-modal-view.modal.slide-in-up.ng-enter.active.ng-enter-active ion-content.backgruound-gradiant .scroll>.list:before {
    content: "Detail Donatur";
    display: flex;
    justify-content: flex-start;
    align-items: center;
    font-size: 18px;
    margin: 20px 0;
    font-weight: bold;
}

ion-modal-view.modal.slide-in-up.ng-enter.active.ng-enter-active ion-content.backgruound-gradiant .scroll>.list label.item.item-input {
    border: 0;
    padding: 5px 15px;
}

ion-modal-view.modal.slide-in-up.ng-enter.active.ng-enter-active ion-content.backgruound-gradiant .scroll>.list label.item.item-input span.input-label.ng-binding {
    font-size: 14px !important;
    color: #a6a6a6;
}

ion-modal-view.modal.slide-in-up.ng-enter.active.ng-enter-active ion-content.backgruound-gradiant .scroll>.list label.item.item-input input[type="text"],
ion-modal-view.modal ion-content .scroll>form>.list label.item.item-input.item-stacked-label input {
    background-color: #ecf0f6;
    padding: 10px;
    border-radius: 10px;
    height: 50px;
}

ion-modal-view.modal.slide-in-up.ng-enter.active.ng-enter-active ion-content.backgruound-gradiant.scroll-content.ionic-scroll.has-header .scroll>form>.list label.item.item-input.item-stacked-label {
    padding: 0;
    border: 0;
    margin-bottom: 15px;
}

ion-modal-view.modal.slide-in-up.ng-enter.active.ng-enter-active ion-content.backgruound-gradiant.scroll-content.ionic-scroll.has-header .scroll>form>.list label.item.item-input.item-select {
    border: 0;
    background-color: transparent;
    border-radius: 10px;
    margin: 10px 0 !important;
    display: flex;
    flex-direction: column;
    position: relative;
    padding: 0;
}

ion-modal-view.modal.slide-in-up.ng-enter.active.ng-enter-active ion-content.backgruound-gradiant.scroll-content.ionic-scroll.has-header .scroll>form>.list label.item.item-input.item-select select {
    background-color: #ecf0f6;
    padding: 10px;
    text-align: left;
    width: 100%;
    min-width: 100%;
    display: block;
    position: relative;
    height: 50px;
    border-radius: 10px;
    background-image: url(https://unpkg.com/ionicons@5.5.2/dist/svg/caret-down-outline.svg);
    background-position: center right 15px;
    background-repeat: no-repeat;
    background-size: 15px;
}

ion-modal-view.modal.slide-in-up.ng-enter.active.ng-enter-active ion-content.backgruound-gradiant.scroll-content.ionic-scroll.has-header .scroll>form>.list label.item.item-input.item-select:after {
    display: none;
}

ion-modal-view.modal.slide-in-up.ng-enter.active.ng-enter-active ion-content.backgruound-gradiant.scroll-content.ionic-scroll.has-header .scroll>form>.list label.item.item-input.item-select .input-label {
    padding: 0;
    width: 100%;
    min-width: 100%;
    display: block !important;
    position: relative;
    font-size: 16px;
    color: #7f7f7f;
}

ion-modal-view.modal.slide-in-up.ng-enter.active.ng-enter-active ion-content.backgruound-gradiant.scroll-content.ionic-scroll.has-header .scroll>form>.list label .item-select select {
    padding: 0 36px 0 0;
    max-width: 100%;
}

ion-modal-view.modal.slide-in-up.ng-enter.active.ng-enter-active ion-content.backgruound-gradiant.scroll-content.ionic-scroll.has-header .scroll>form>.list {
    padding: 20px;
    border: 0 !important;
    box-shadow: none !important;
}

ion-modal-view.modal.slide-in-up.ng-enter.active.ng-enter-active ion-content .scroll>.list {
    padding: 20px;
}

ion-modal-view.modal.slide-in-up.ng-enter.active.ng-enter-active ion-content .scroll>.list label.item.item-input {
    border: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    margin-bottom: 10px;
}

ion-modal-view.modal.slide-in-up.ng-enter.active.ng-enter-active ion-content .scroll>.list label.item.item-input:last-child span.input-label.ng-binding:before {
    content: "Komentar";
}

ion-modal-view.modal.slide-in-up.ng-enter.active.ng-enter-active ion-content .scroll>.list label.item.item-input:last-child input[type="text"] {
    background-color: #ecf0f6;
    padding: 10px;
    border-radius: 10px;
    max-height: 70px;
}

ion-modal-view.modal.slide-in-up.ng-enter.active.ng-enter-active ion-content .scroll>.list label.item.item-input:first-child:before {
    content: "Silakan lengkapi data-data dibawah ini agar donasi Anda terdata dengan baik.";
    display: block;
    margin: 0 0 20px 0;
    white-space: normal;
    line-height: 1.8;
}

ion-modal-view.modal.slide-in-up.ng-enter.active.ng-enter-active ion-content .scroll>.row .col.col-25,
ion-modal-view.modal ion-content .scroll>form>.row .col.col-25 {
    display: none;
}

ion-modal-view.modal.slide-in-up.ng-enter.active.ng-enter-active ion-content .scroll>.row .col.col-50 {
    min-width: 100%;
}

ion-modal-view.modal.slide-in-up.ng-enter.active.ng-enter-active ion-content .scroll>.row .col.col-50 .button.button-positive {
    border: 0;
    background-color: #253682;
    color: #fff;
    text-transform: uppercase;
    width: 90%;
    margin: 0 5% 100px 5%;
}

ion-modal-view.modal.slide-in-up.ng-enter.active.ng-enter-active ion-content.backgruound-gradiant.scroll-content.ionic-scroll.has-header .scroll>form>.row .col.col-50 {
    width: 100%;
    max-width: 100%;
    flex: 0 0 94%;
    margin: 0 3%;
}