Render a native Apple Pay button that handles the complete Apple Pay session, including the payment sheet, Touch ID/Face ID, and confirmation.
How it works
1 Create session (server)
2 Initialise SDK (client)
3 Mount Apple Pay button
4 Customer authenticates
Native Apple Pay UI and sheet
Biometric authentication (Touch ID / Face ID)
One-tap checkout experience
Safari + compatible browsers
Payment details sourced from session token
Works with HTML/JS and React
Before getting started
1. Get merchant credentials
As a partner you take payments on behalf of the merchants you serve. Each merchant's Client ID and Client Secret are delivered to your registrationWebhook when the merchant connects Teya to your platform, along with the store_id and payment_webhook_public_key.
Use client_credentials grant to obtain access tokens
Each merchant store has its own set of credentials
Store credentials securely and never expose them in client-side code
```admonition
icon: fas fa-key
title: A separate Client ID and Client Secret per merchant
content: Unlike POSLink credentials, these aren't shared across your merchant base. Each merchant you serve gets its own Client ID and Client Secret, delivered to your registrationWebhook when they connect - keep each merchant's credentials separate and don't reuse one set across multiple merchants.
```
```admonition
icon: fas fa-user-plus
title: Not registered yet?
content: Set up your partner account and implement the merchant registration flow first. Teya sends each merchant's credentials to your registration webhook.
link: /partners/online-payments/register-merchants
```
2. API URLs
| Service | Staging | Production |
|---|
| Online Payments API | https://api.teya.xyz | https://api.teya.com |
| OAuth | https://id.teya.xyz/oauth/v2/oauth-token | https://id.teya.com/oauth/v2/oauth-token |
| Business Portal | https://business.teya.xyz | https://business.teya.com |
3. Required scopes
Request these scopes when obtaining your access token:
| Scope | Description |
|---|
transactions/online/create | Process an online transaction |
transactions/online/id/get | Get online transaction details |
checkout/sessions/create | Create a session for the SDK |
Domain Verification
Apple Pay requires that your domain is verified before payments can be processed. Follow these steps:
1 Download the domain verification file from the
Business Portal under
Integrations > Apple Pay
2 Host the file at https://yourdomain.com/.well-known/apple-developer-merchantid-domain-association
3 Click Verify in the Business Portal to complete domain verification
```admonition
icon: fas fa-info-circle
title: Domain Verification Required
content: The Apple Pay button will not appear until your domain is verified. Verification must be completed for each domain (including staging and production).
```
```admonition
icon: fas fa-exclamation-triangle
title: Without domain verification
content: If your domain has not been verified, the Apple Pay button will simply not appear in the checkout. There is no error message - the SDK silently hides Apple Pay when verification is incomplete. This applies to both the standalone Apple Pay element and Apple Pay within the Checkout element.
```
Install the SDK
```bash
npm install @teyaproduct/teya-blocks-js
```
For React applications:
```bash
npm install @teyaproduct/teya-blocks-js @teyaproduct/teya-blocks-react
```
See SDK Initialization for initTeyaBlocks() options, including developmentMode for staging.