press red button
check out
allow open alipay
alipay bank card is not linked
browser version, scan qr code for transaction
//components/OttPay.js
import React from "react";
class PayButton extends React.Component {
constructor(props) {
super(props);
this.pbRef = React.createRef();
}
componentDidMount() {
this.pbRef.current.componentOnReady().then(pb => {
pb.config = {
client: "0728974bc0a30cd0df1e7f08a5229ce9",
locale: "en_CA",
style: {
shape: 'pill', // ['pill','rect']
color: 'red', // ['red','blue','silver','white','black']
size: 'responsive', // ['small','medium','large','responsive']
label: 'paywith', // ['paywith','checkout', 'buy now']，
fundingicons: true
},
payment: () => {
return {
amount: 0.01,
currency: "CAD"
};
},
onAuthorize: (data) => {
alert(data.amount + ' ' + data.orderId + ' ' +
data.currency + ' ' + data.paymentType + ' ' + data.payNo);
}
};
});
}
render() {
return <ottpay-checkout-button ref={this.pbRef} />;
}
}
export default PayButton;
---------------------------------
//public/index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Ionic App</title>
<base href="/" />
<meta name="color-scheme" content="light dark" />
<meta name="viewport"
content="viewport-fit=cover, width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no" />
<meta name="format-detection" content="telephone=no" />
<meta name="msapplication-tap-highlight" content="no" />
<link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
<link rel="shortcut icon" type="image/png" href="%PUBLIC_URL%/assets/icon/favicon.png" />
<!-- add to homescreen for ios -->
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="apple-mobile-web-app-title" content="Ionic App" />
<meta name="apple-mobile-web-app-status-bar-style" content="black" />
<script src="https://jsapi.ottpay.com/paybutton/1.0/paybutton.js"></script>
</head>
<body>
<div id="root"></div>
</body>
</html>
--------------------------------
//tab1.tsx
import React, { useState } from 'react';
import {
IonContent, IonHeader, IonPage, IonTitle, IonToolbar,
IonAlert, IonButton, IonCard, IonCardHeader,
IonCardSubtitle, IonCardTitle, IonCardContent,
IonItem, IonIcon, IonLabel, IonBadge, IonList,
IonItemDivider, IonCheckbox, IonChip, IonAvatar,
IonGrid, IonRow, IonCol, IonInput, IonToggle,
IonModal, IonRefresher, IonRefresherContent,
IonTextarea, IonSelect, IonListHeader,
IonSelectOption, IonButtons, IonBackButton,
IonMenuButton, IonSegment, IonSearchbar,
IonSegmentButton, IonFooter, IonText, IonToast,
useIonViewDidEnter, useIonViewDidLeave,
useIonViewWillEnter, useIonViewWillLeave
} from '@ionic/react';
import ExploreContainer from '../components/ExploreContainer';
import './Tab1.css';
import {
person
} from 'ionicons/icons';
import { Plugins } from '@capacitor/core';
import PayButton from '../components/OttPay';
const Tab1: React.FC = () => {
return (
<IonPage>
<IonHeader>
<IonToolbar>
<IonTitle>OttPay Examples</IonTitle>
</IonToolbar>
</IonHeader>
<IonContent>
<PayButton />
</IonContent>
</IonPage>
);
};
export default Tab1;
reference:
No comments:
Post a Comment