<div id="integration-guide">

<div class="ig-section">
<div class="ig-section-header">
<div class="ig-section-icon embedded-components"><i class="fas fa-paint-brush"></i></div>
<h2>Customize Apple Pay</h2>
</div>
<p class="ig-section-desc">Customise the Apple Pay button appearance including style, type, and locale.</p>

<div class="ig-subsection">
<h3>Button Options</h3>

<table class="ig-comparison">
<thead>
<tr>
<th>Option</th>
<th>Type</th>
<th>Description</th>
</tr>
</thead>
<tbody>
<tr><td><code>paymentRequest</code></td><td><code>object</code></td><td>Apple Pay payment request overrides. Pass <code>recurringPaymentRequest</code> here to save the card together with <code>save_payment_method: true</code>, see <a href="/partners/online-payments/embedded-components/checkout/customize">Saving an Apple Pay card</a></td></tr>
<tr><td><code>buttonType</code></td><td><code>ApplePayButtonType</code></td><td>Button label variant (see below)</td></tr>
<tr><td><code>buttonStyle</code></td><td><code>'black' | 'white' | 'white-outline'</code></td><td>Button colour</td></tr>
<tr><td><code>buttonLocale</code></td><td><code>string</code></td><td>Override the button locale (defaults to SDK locale)</td></tr>
<tr><td><code>disabled</code></td><td><code>boolean</code></td><td>Disable the button</td></tr>
</tbody>
</table>
</div>

<div class="ig-subsection">
<h3>Button Types</h3>
<p>Available <code>buttonType</code> values:</p>

<table class="ig-comparison">
<thead>
<tr>
<th>Value</th>
<th>Label</th>
</tr>
</thead>
<tbody>
<tr><td><code>plain</code></td><td>Apple Pay (no prefix)</td></tr>
<tr><td><code>buy</code></td><td>Buy with Apple Pay</td></tr>
<tr><td><code>donate</code></td><td>Donate with Apple Pay</td></tr>
<tr><td><code>checkout</code></td><td>Check out with Apple Pay</td></tr>
<tr><td><code>book</code></td><td>Book with Apple Pay</td></tr>
<tr><td><code>subscribe</code></td><td>Subscribe with Apple Pay</td></tr>
<tr><td><code>pay</code></td><td>Pay with Apple Pay</td></tr>
<tr><td><code>order</code></td><td>Order with Apple Pay</td></tr>
<tr><td><code>reload</code></td><td>Reload with Apple Pay</td></tr>
<tr><td><code>add-money</code></td><td>Add Money with Apple Pay</td></tr>
<tr><td><code>top-up</code></td><td>Top Up with Apple Pay</td></tr>
<tr><td><code>rent</code></td><td>Rent with Apple Pay</td></tr>
<tr><td><code>support</code></td><td>Support with Apple Pay</td></tr>
<tr><td><code>contribute</code></td><td>Contribute with Apple Pay</td></tr>
<tr><td><code>tip</code></td><td>Tip with Apple Pay</td></tr>
</tbody>
</table>
</div>

<div class="ig-subsection">
<h3>Callbacks</h3>

<table class="ig-comparison">
<thead>
<tr>
<th>Callback</th>
<th>Description</th>
</tr>
</thead>
<tbody>
<tr><td><code>onReady</code></td><td>Fired when the element is mounted and ready</td></tr>
<tr><td><code>onChange</code></td><td>Fired when availability changes (<code>{ available: boolean }</code>)</td></tr>
<tr><td><code>onClick</code></td><td>Fired when the button is clicked</td></tr>
<tr><td><code>onSuccess</code></td><td>Fired on successful payment - receives <code>PaymentSubmitResponse</code></td></tr>
<tr><td><code>onCancel</code></td><td>Fired when the user cancels the Apple Pay sheet</td></tr>
<tr><td><code>onError</code></td><td>Fired when an error occurs</td></tr>
<tr><td><code>onSessionStarted</code></td><td>Fired when the Apple Pay session starts</td></tr>
<tr><td><code>onSessionEnded</code></td><td>Fired when the Apple Pay session ends</td></tr>
</tbody>
</table>
</div>

<div class="ig-subsection">
<h3>PaymentSubmitResponse</h3>
<p>Passed to the <code>onSuccess</code> callback on successful payment:</p>

```typescript
interface PaymentSubmitResponse {
  paymentMethod: string;
  transactionId: string;
  status: 'SUCCESS';
}
```
</div>

<div class="ig-subsection">
<h3>PaymentSubmitError</h3>
<p>Passed to the <code>onError</code> callback when a payment fails:</p>

```typescript
interface PaymentSubmitError {
  code: string;
  message: string;
  transactionId?: string;
  redirectHtml?: string; // 3DS redirect HTML (if applicable)
}
```
</div>

<div class="ig-subsection">
<h3>Methods</h3>

```javascript
// Check if Apple Pay is available
const available = await applePay.canMakePayments();

// Initiate Apple Pay payment
const result = await applePay.createPaymentMethod();
```
</div>

</div>
</div>
