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

This guide provides step-by-step instructions for enabling Apple Pay on the web with the Solidgate payment form. After completing the following steps, your Guide
Create a seamless experience for customers by styling your payment form.
payment form
will include an Apple Pay button.

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.

You must perform a few steps to start processing Apple Pay payments via the payment form.

Firstly, you need to host the domain-verification file at the following path for each domain you need to process Apple Pay payments:

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

After placing the domain-verification file on your site, you must verify the domain in HUB. Apple Pay Domain verification is available in the Developers section. Domain verification is available only for websites that Solidgate Team approved for processing payments.

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.

When the domain is verified, you are ready to display the Apple Pay button on the Solidgate payment form. You must add the following parameter to the paymentIntent object to display the Apple Pay button.

Parameter Type Mandatory Description
apple_pay_merchant_domain string Yes, for displaying the Apple Pay button The domain where you placed the domain-verification file.
Example:
http://solidgate.com

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’s 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 choose the position to place the Apple Pay button on your own, you need to create and specify a div. Then, pass the value of the id attribute of the created element to the containerId parameter in the applePayButtonParams object.

1
2
3
4
5
6
7
8
PaymentFormSdk.init({
  ...restData,
  applePayButtonParams: {
    buttonType: 'buy',
    buttonColor: 'black',
    containerId: 'yourCustomContainerId'
  }
})

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.

If you haven’t specified containerId, we display it by default - above all fields of the Solidgate payment form.

Please note that if you specify a non-existing container id, we will not display the Apple Pay button. In this case, we will show the following error to 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.

Button hiding

You can always 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.

Description

The parameter is responsible for displaying the Apple Pay button on the Solidgate payment form.

Description

The id of the container to place the Apple Pay button.

Description

The color of the Apple Pay button on the Solidgate payment form.

Description

The type of the Apple Pay button 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

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
ApplePay - Set up
Incorrect ApplePay card number?