Apple Pay button
Get started
Sign In
Apple Pay button
Optimize your payment form with Apple Pay integration, providing a secure and efficient checkout for Apple device users

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

chevron down chevron up
Apple Pay properties

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.

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.

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.

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

Button styling

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

  • black - use on white or light-color backgrounds that provide sufficient contrast. Do not use black or dark backgrounds.
  • white-outline - use on white or light-color backgrounds that do not provide sufficient contrast. Do not place on dark or saturated backgrounds.
  • white - use on dark-color backgrounds that provide sufficient contrast.

Apple provides several types of buttons so that you can choose the button type that fits best with the terminology and flow of your purchase or payment experience. You can find more information in the Apple Pay Guidelines.

The following button types are not supported by Solidgate:

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

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.

chevron down chevron up
Button hiding properties

Description

The parameter is responsible for displaying the Apple Pay button.

Example

false

Default

true

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

Description

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

Supported colors:

  • white-outline
  • black
  • white

Example

white-outline

Default

black

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

Apple Pay 3DS
Apple Pay - Set up
Incorrect Apple Pay card number?