Apple Pay button

[ { "title":"Testing", "link":"https://docs.solidgate.com/payments/testing/", "text":"Simulate payments to test your integration before launching in production.", "imgSrc":"https://solidgate.com/wp-content/uploads/2022/06/icon-customizable.svg" } , { "title":"Create your payment form", "link":"https://docs.solidgate.com/payments/integrate/payment-form/create-your-payment-form/", "text":"Understand how to integrate the payment form into your product.", "imgSrc":"https://solidgate.com/wp-content/uploads/2022/06/icon-payments.svg" } , { "title":"Subscriptions", "link":"https://docs.solidgate.com/subscriptions/", "text":"Create and maintain a stable and healthy business subscription model.", "imgSrc":"https://solidgate.com/wp-content/uploads/2022/06/icon-global.svg" } ]

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
anchor

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.

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
anchor

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
anchor

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
anchor

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
anchor

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.

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
anchor

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.