const elements = haiPay.create({ mode: 'payment', sandbox: true, clientToken: 'your-client-token', themeMode: 'light', paymentMethodConfig: ['GOOGLE_PAY', 'APPLE_PAY', 'CREDIT_CARD'] }); elements.mount('#paymentId'); elements.on('ready', (event) => { console.log('rendered successfully:', event); }); elements.on('error', (event) => { console.error('Payment error:', event); }); elements.on('paymentMethodType', (event) => { console.log('payment method type', event); }); elements.submitCardPayment(); elements.on('confirm', (event) => { console.log('confirm:', event); }); elements.on('paymentStatus', (event, message) => { console.log('payment status:', event, message); }); ``` This component will be deprecated soon. Please use "Custom Combined Mode" instead. Best for teams that already support wallet-based checkout and want a fast subscription authorization experience. **Recommended script** `https://cashier.haipay.top/js/applePayGooglePaySubscribe_1.0.0.min.js` **Key parameters** | Parameter | Required | Description | | :------------- | :------- | :--------------------------------------- | | `sandbox` | Yes | `true` for test, `false` for production | | `clientToken` | Yes | Client token | | `buttonType` | No | Button text such as `buy` or `subscribe` | | `buttonTheme` | No | Button theme such as `black` or `white` | | `buttonHeight` | No | Button height, default `50` | **Typical events** * `ready`: button rendered * `error`: initialization or payment error * `paymentStatus`: payment result callback (If you do not listen to this event, the component will process the payment result by default) * `paymentMethodType` — Currently selected payment method ```javascript theme={null}

const elements = applePayGooglePaySubscribe.create('applePayGooglePaySubscribe', { sandbox: true, clientToken: 'your-client-token', buttonType: 'subscribe', buttonTheme: 'black', buttonHeight: 50 }); elements.mount('#applePayGooglePayId'); elements.on('ready', (data) => { console.log('Button rendered successfully:', data); }); elements.on('error', (data) => { console.error('Payment error:', data); }); elements.on('paymentMethodType', (event) => { console.log('payment method type', event); }); elements.on('paymentStatus', (data) => { console.log('payment status:', data); }); ``` This component will be deprecated soon. Please use "Custom Combined Mode" instead. Best when you want to render the subscription card form directly and control the submit action yourself. **Recommended script** `https://cashier.haipay.top/js/creditCardSubscription_1.0.0.min.js` **Key parameters** | Parameter | Required | Description | | :------------ | :------- | :-------------------------------------- | | `sandbox` | Yes | `true` for test, `false` for production | | `clientToken` | Yes | Client token | | `cardTheme` | No | Form theme, default `white` | **Typical events** * `ready`: card component rendered * `confirm`: form submission result * `paymentStatus`: payment result callback (If you do not listen to this event, the component will process the payment result by default) ```javascript theme={null}