@mint-app/mint-webpay
Advanced tools
## Overview The `mint-webpay` widget is a versatile web component for handling payment integrations. This guide provides detailed steps and examples for consuming the widget in different environments: Vanilla JS, React, Vue, and Angular.
The mint-webpay widget is a versatile web component for handling payment integrations. This guide provides detailed steps and examples for consuming the widget in different environments: Vanilla JS, React, Vue, and Angular.
To use mint-webpay, install it via npm:
npm install @mint-app/mint-webpay
Alternatively, you can use the CDN link for quick integration:
<script src="https://cdn.jsdelivr.net/npm/@mint-app/mint-webpay/index.esm.js" type="module" defer></script>
Include the following HTML and JavaScript in your web page:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>mintPay</title>
</head>
<body>
<script src="https://cdn.jsdelivr.net/npm/@mint-app/mint-webpay/index.esm.js" type="module" defer></script>
<div id="mintPay"></div>
<script defer>
document.addEventListener('DOMContentLoaded', () => {
mintWebpay.init({
theme: {
primaryColor: 'red',
secondaryColor: 'black',
},
container: mintPay
});
});
</script>
</body>
</html>
Integrate mint-webpay in a React component as follows:
import React, { useEffect, useRef } from 'react';
import { mintWebpay, PaymentMethods } from '@mint-app/mint-webpay';
const HostPaymentPage = () => {
const mintRef = useRef(null);
useEffect(() => {
if (mintRef.current) {
mintWebpay.init({
theme: {
primaryColor: 'red',
secondaryColor: 'black',
},
container: mintRef.current,
payments: [PaymentMethods.ZIP],
});
}
}, [mintRef.current]);
return <div ref={mintRef} />;
};
export default HostPaymentPage;
Integrate mint-webpay in a Vue component:
<template>
<div ref="mintPay"></div>
</template>
<script>
import { mintWebpay, PaymentMethods } from '@mint-app/mint-webpay';
export default {
name: 'HostPaymentPage',
mounted() {
mintWebpay.init({
theme: {
primaryColor: 'red',
secondaryColor: 'black',
},
container: this.$refs.mintPay,
payments: [PaymentMethods.ZIP],
});
},
};
</script>
Integrate mint-webpay in an Angular component:
Install the necessary packages:
npm install @mint-app/mint-webpay
Use the component in your Angular project:
// host-payment-page.component.ts
import { Component, ElementRef, OnInit, ViewChild } from '@angular/core';
import { mintWebpay, PaymentMethods } from '@mint-app/mint-webpay';
@Component({
selector: 'app-host-payment-page',
template: `<div #mintPay></div>`,
})
export class HostPaymentPageComponent implements OnInit {
@ViewChild('mintPay', { static: true }) mintPay!: ElementRef;
ngOnInit() {
mintWebpay.init({
theme: {
primaryColor: 'red',
secondaryColor: 'black',
},
container: this.mintPay.nativeElement,
payments: [PaymentMethods.ZIP],
});
}
}
Add the component to your Angular module:
// app.module.ts
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import { HostPaymentPageComponent } from './host-payment-page/host-payment-page.component';
@NgModule({
declarations: [
AppComponent,
HostPaymentPageComponent
],
imports: [
BrowserModule
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }
FAQs
Unknown package
We found that @mint-app/mint-webpay demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 0 open source maintainers collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Research
/Security News
175 malicious npm packages (26k+ downloads) used unpkg CDN to host redirect scripts for a credential-phishing campaign targeting 135+ organizations worldwide.
Security News
Python 3.14 adds template strings, deferred annotations, and subinterpreters, plus free-threaded mode, an experimental JIT, and Sigstore verification.
Security News
Former RubyGems maintainers have launched The Gem Cooperative, a new community-run project aimed at rebuilding open governance in the Ruby ecosystem.