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