This guide outlines the steps to enable Apple Pay on your Payment Form, following Apple’s development requirements. Once set up, the payment form features the Apple Pay button, enhancing your payment options.

Payment Form complies with Apple’s development requirements for Apple Pay on the Web. Apple Pay is available in supported regions and on specific platforms in Safari, and in non-Safari browsers.

Display button

To integrate the button and start accepting Apple Pay payments through the Payment Form, complete the following steps:

If you request to create a payment form with Apple Pay without verifying the domain, the button will not be displayed, and the appropriate warning will be sent.

If the domain verification fails, a warning message is displayed in the console using console.warn('The domain is not verified for Apple Pay');. This serves as a notification that the domain is not verified, and the Apple Pay button will not be displayed.

Apple Pay properties

Expand all

apple_pay_merchant_domain

string

Description

Domain where you have uploaded the domain-verification file will be automatically configured from the internal database.

Example

solidgate.com

Once the domain is verified, you are ready to display the Apple Pay button on the Payment Form, with the additional option to hide the button if necessary.

Subscribe to the mounted event to check when the Apple Pay button is set up and displayed. When the event is emitted for the applebtn entity, this means the Apple Pay button is fully displayed.

Non-Safari browsers

Customers can complete purchases with Apple Pay on devices running macOS, Windows, and other operating systems using third-party browsers. During checkout, they will see the Apple Pay option and can finalize the transaction by scanning a QR code.

When Apple’s JavaScript object detects a non-Safari browser, it generates a QR code for transaction processing. Users can then scan the QR code with their iPhone, running iOS 18 or later, to complete the purchase through the familiar Apple Pay process. This approach is necessary, as many browsers do not natively support Apple Pay. Merchants must update their integration to enable Apple Pay in browsers other than Safari.

To enable Apple Pay in non-Safari browsers

1
2
3
4
5
6

form.init({ 
  applePayButtonParams: { 
    integrationType: 'js' 
  }, 
  // ...other configurations
});

Customization

In addition to displaying the button on the payment form, you can also control the button position, color, and type. Use the applePayButtonParams object for changes as you would for all other Guide
Create a seamless experience for customers by styling your payment form. customizations in the Payment Form.

Button position

To set the Apple Pay button position, create and specify a div, pass its id attribute value to the containerId parameter in the applePayButtonParams object.

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19

import React, { FC } from 'react'
import ReactDOM from 'react-dom';
import Payment, { InitConfig } from "@solidgate/react-sdk"

export const MyPayment: FC<{
  merchantData: InitConfig['merchantData']
}> = (props) => {
  const appleContainerRef = useRef(null)

  return (
    <div>
      <div ref={googleContainerRef}></div>
      <Payment
        merchantData={props.merchantData}
        applePayContainerRef={appleContainerRef}
      />
    </div>
  )
}

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11

<div id="yourCustomContainerId"></div>
<script>
PaymentFormSdk.init({
  ...restData, 
  applePayButtonParams: {
    buttonType: 'buy',
    buttonColor: 'black',
    containerId: 'yourCustomContainerId'
  }
});
</script>

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21

<template>
  <Payment
      :merchant-data="merchantData"
      :apple-pay-container-ref="appleButton"
  />
  <div ref="appleButton" />
</template>

<script lang="ts" setup>
import { defineAsyncComponent, ref } from 'vue'
import { InitConfig } from '@solidgate/vue-sdk'
const Payment = defineAsyncComponent(() => import('@solidgate/vue-sdk'))

const appleButton = ref<HTMLDivElement>()

const merchantData: InitConfig['merchantData'] = {
  merchant: '<<--YOUR MERCHANT ID-->>',
  signature: '<<--YOUR SIGNATURE OF THE REQUEST-->>',
  paymentIntent: '<<--YOUR PAYMENT INTENT-->>'
}
</script>

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21

import {Component} from '@angular/core';

import {FormType, InitConfig} from "@solidgate/angular-sdk";

@Component({
  selector: 'app-root',
  template: `
    <ngx-solid-payment
      [merchantData]="merchantData"
      [applePayContainer]="applePay"
    ></ngx-solid-payment>
    <div class="apple-pay" #applePay></div>
  `
})
export class AppComponent {
  merchantData: InitConfig['merchantData'] = {
    merchant: '<<--YOUR MERCHANT ID-->>',
    signature: '<<--YOUR SIGNATURE OF THE REQUEST-->>',
    paymentIntent: '<<--YOUR PAYMENT INTENT-->>'
  }
}

In this example, the div with the ID yourCustomContainerId is created and the containerId parameter in the applePayButtonParams object is set to the value yourCustomContainerId.

Without a specified containerId, the button appears by default above all fields of the Payment Form. If a non-existing container is specified, an error message appears in the console.

Container with id =‘specified-container’ does not exist.

Button styling

To change the button style, two parameters can be changed in the applePayButtonParams object:

Button hiding

To hide the button from the customer, pass false to the enabled parameter. You do not need to specify true to display the button on the form as it is the default value. When you pass the false value, it means that the form with the passed parameters of containerId, color, and type is collected but not displayed on the Payment Form.

Button hiding properties

Expand all

enabled

boolean

Description

Displays the Apple Pay button.

Example

false

Default

true

containerId

string

Description

Identifier of container to place the Apple Pay button.

By default, if not set, button will be displayed above the form.

Example

yourCustomContainerId

Default

not set

color

string

Description

Color of the Apple Pay button.

Supported colors:

• white-outline
• black
• white

Example

white-outline

Default

black

type

string

Description

Type of the Apple Pay button.

Supported types:

• check-out
• add-money
• buy
• order
• plain
• reload
• set-up
• subscribe
• top-up
• continue
• pay

Not supported types:

• donate
• support
• rent
• contribute
• tip

Example

check-out

Default

plain

1
2
3
4
5
6
7
8
9

PaymentFormSdk.init({
  ...restData,
  applePayButtonParams: {
    enabled: false,
    containerId: 'yourCustomContainerId',
    color: 'white-outline',
    type: 'check-out'
  }
})

Apple payment sheet

Solidgate Payment Form gives you access to customize merchant name label on the Apple Payment Sheet. To change the name, you need to pass the apple_pay_merchant_name parameter in the paymentIntent object.