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

The Solidgate Payment Form adheres to Apple’s development requirements for Apple Pay on the Web. Apple Pay is available in supported regions and on the following platforms.

Display button

To start accepting Apple Pay payments through the Solidgate Payment Form, multiple steps are required:

• Domain verification
  Host a domain-verification file at a specified path for each domain where Apple Pay payments are to be processed.
  Domain-verification file location

  1	HTTPS://[DOMAIN_NAME]/.well-known/apple-developer-merchantid-domain-association

• Verify in HUB
  After hosting the file, verify the domain in the Developers section of the HUB. This step is necessary for domains approved by the Solidgate Team for payment processing.

If you request to create a payment form with Apple Pay, but the domain is not verified, 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

The 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 Solidgate Payment Form, with the additional option to hide the button if necessary.

Customization

In addition to displaying the button on the form, you can also control the button position, color, and type. Use the applePayButtonParams object for changes as you would for all other customizations in a Solidgate Guide
Create a seamless experience for customers by styling your payment form. 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

<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

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
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-->>'
  }
}

 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>

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 Solidgate 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

We allow changing two parameters of the button in the applePayButtonParams object:

Button hiding

To hide the button for the user by passing false to the enabled parameter. You do not need to specify true to display the button on the form; this 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 Solidgate Payment Form.

Button hiding properties

Expand all

enabled

boolean

Description

The parameter is responsible for displaying the Apple Pay button.

Example

false

Default

true

containerId

string

Description

The id 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

The color of the Apple Pay button on Solidgate Payment Form.

Supported colors:

• white-outline
• black
• white

Example

white-outline

Default

black

type

string

Description

The type of the Apple Pay button.

Supported types:

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

Not supported types:

• donate
• support
• rent
• contribute
• tip
• continue
• pay

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.

Related articles FAQ