Trade Widget SDK
Guides

Enable Apple Pay

This page explains how to enable Apple Pay as a payment option for your end-users when paying for Buy trades for the Trade Widget integration, full API integration, and for the integration using our Trade Widget SDK.

Suggest Edits

📘

Important:

Once you are done with the below described setup, please reach out to Coinify and confirm. We can then enable Apple Pay for all your users or only specific email/s if you want to test the flow first, which is highly recommended.

👍

Apple Pay is only available for Credit Card Buy trades.

Apple Pay on Trade Widget

In order to enable Apple Pay payment option for your end-users on the Trade Widget, you must do the following:

1. Add certificate file to ./well-known path

🚧

When can you skip this step?

  • If your app loads the Trade Widget directly in a webview
  • If the Trade Widget is loaded as a main page (i.e. not in an iframe) we default topLevelDomain to self i.e. trade-ui.coinify.com and we already have a well known file there.
    In this case you must request us to set you up with a Customised Landing Page for the optimal trade widget experience. Otherwise, the Trade Widget will not behave as expected end will provide a sub-optimal user-experience

In these cases you most probably do not have to separately specify the the topLevelDomain and add the .txt file to the below described path.

As a Coinify Partner, you need to provide us with your website's domain (e.g. https://www.cryptoexchange.com) where the Trade Widget will be hosted.

Coinify will then generate a .txt file in Apple dashboard for your specific domain and share it with you.
The file name will be apple-developer-merchantid-domain-association.txt.

Finnaly, you have to make this file available at /.well-known/apple-developer-merchantid-domain-association.txt on your domain.
So, using the example where the domain is https://www.cryptoexchange.com, the returned file would have to be available at https://www.cryptoexchange.com/.well-known/apple-developer-merchantid-domain-association.txt


2. Add payment as the value in the allow iframe element:

Here's an example on how to properly embed your Trade Widget link inside the iframe element and add the payment value:

<iframe src="https://trade-ui.sandbox.coinify.com?partnerId={replace-with-assigned-id}&primaryColor=blue&cryptoCurrencies=BTC,ETH,XLM" width="100%" height="576px" allow="camera;fullscreen;accelerometer;gyroscope;magnetometer;payment" allowfullscreen></iframe>

You can find this and other relevant documentation in the Trade Widget documentation section.


3. Append the query param topLevelDomain to the Trade Widget URL

📘

topLevelDomain

topLevelDomain is the base URL of your web-page that will be hosting the Coinify Trade Widget.

For example, if your website is https://www.cryptoexchange.com, you will pass topLevelDomain=www.cryptoexchange.com as the query parameter and value to the Trade Widget link.

Here's how to add the topLevelDomain query parameter to the Trade Widget, using the https://www.cryptoexchange.com as the hosting website URL example:

<iframe src="https://trade-ui.sandbox.coinify.com?partnerId={replace-with-assigned-id}&primaryColor=blue&cryptoCurrencies=BTC,ETH,XLM&topLevelDomain=www.cryptoexchange.com" width="100%" height="576px" allow="camera;fullscreen;accelerometer;gyroscope;magnetometer;payment" allowfullscreen></iframe>

This is how the Trade Widget URL should be set up, inside an iframe, in order to enable the Apple Pay payment option.

Apple Pay on Payment Window (Full API Integration)

To enable Apple Pay payment option for your end-users on the Payment Page, you must do the following:

1. Add certificate file to ./well-known path

As a Coinify Partner, you need to provide us with the with your website's domain (e.g. https://www.cryptoexchange.com) where the Trade Widget will be hosted.

Coinify will then generate a .txt file in Apple dashboard for your specific domain and share it with you.
The file name will be apple-developer-merchantid-domain-association.txt.

Finnaly, you have to make this file available at /.well-known/apple-developer-merchantid-domain-association.txt on your domain.
So, using the example where the domain is https://www.cryptoexchange.com, the returned file would have to be available at https://www.cryptoexchange.com/.well-known/apple-developer-merchantid-domain-association.txt


❗️

Next steps:

The next steps are necessary only if you are embedding the redirectUrl (Payment Page URL) inside an iframe element.

If you are not embedding the redirectUrlinside an iframe element, you do not need to do any further steps.

2. Fetch the Payment Page redirectURL link returned in the Create Trade API response and adjust according to instructions below

Here's an example of the trade object returned in the Create Trade API response:

{
    "id": 209839,
    "trackingId": "43c68eaf-1698-4e99-9beb-b1f4ed9c0f6e",
    "state": "awaiting_transfer_in",
    "traderId": 13450,
    "traderEmail": "[email protected]",
    "inAmount": 250,
    "inCurrency": "EUR",
    "outCurrency": "ETH",
    "outAmountExpected": 0.082632576366,
    "transferIn": {
        "id": 622822,
        "sendAmount": 280,
        "receiveAmount": 250,
        "currency": "EUR",
        "medium": "card",
        "details": {
            "preferredIntegrationMethod": "payment-page",
            "redirectUrl": "https://payment-page-ui.sandbox.coinify.com/?paymentId=1000049280&traderId=13450&country=HR&email=sni%2Balltest%40coinify.com&transferInAmount=280&transferInFeeAmount=30&transferInHandlingFee=5&transferInCurrency=EUR&transferOutAmount=0.081621576366&transferOutFeeAmount=0.001011&transferOutHandlingFee=0.001011&transferOutCurrency=ETH&returnUrl=&tradeId=209839&partnerId=255&provider=safecharge&isApplePayAvailable=false",
            "provider": "safecharge",
            "isApplePayAvailable": false,
            "cardPaymentId": "1000049280"
        }
    },
    "transferOut": {
        "id": 622823,
        "sendAmount": 0.082632576366,
        "receiveAmount": 0.081621576366,
        "currency": "ETH",
        "medium": "blockchain",
        "details": {
            "account": "0x8c58D12ce7219B6F53B1803d00b7021CB8e9A4c6"
        }
    },
    "createTime": "2024-11-19T17:11:12.828Z",
    "updateTime": "2024-11-19T17:11:12.828Z",
    "isPriceQuoteApproximate": false,
    "quoteExpireTime": "2024-11-19T17:26:01.531Z"
}

Fetch the redirectUrl from the response. Here's the redirectURL from the above response example:


<https://payment-page-ui.sandbox.coinify.com/?paymentId=1000049280&traderId=13450&country=HR&email=sni%2Balltest%40coinify.com&transferInAmount=280&transferInFeeAmount=30&transferInHandlingFee=5&transferInCurrency=EUR&transferOutAmount=0.081621576366&transferOutFeeAmount=0.001011&transferOutHandlingFee=0.001011&transferOutCurrency=ETH&returnUrl=&tradeId=209839&partnerId=255&provider=safecharge&isApplePayAvailable=false>

2.1 Embed the the redirectURL in an iframe and set the allow values

Here's the above redirectUrl example embedded in an iframe with the allow element and its necessary values specified: 

<iframe src="https://payment-page-ui.sandbox.coinify.com/?paymentId=1000049280&traderId=13450&country=HR&email=sni%2Balltest%40coinify.com&transferInAmount=280&transferInFeeAmount=30&transferInHandlingFee=5&transferInCurrency=EUR&transferOutAmount=0.081621576366&transferOutFeeAmount=0.001011&transferOutHandlingFee=0.001011&transferOutCurrency=ETH&returnUrl=&tradeId=209839&partnerId=255&provider=safecharge&isApplePayAvailable=false" width="100%" height="576px" allow="camera;fullscreen;accelerometer;gyroscope;magnetometer;payment" allowfullscreen></iframe>

2.2 Append the query param topLevelDomain to the redirectURL

📘

topLevelDomain

topLevelDomain is the base URL of your web-page that will be hosting the Coinify's credit card/Apple Pay Payment Page.

For example, if your website is https://www.cryptoexchange.com, you will pass topLevelDomain=www.cryptoexchange.com as the query parameter and value to the redirectURL link.

Let's take the redirectUrl link from the example above and append the necessary topLevelDomain parameter. In this example, we're going to imagine that your website's base URL is www.yourwebsite.com:

redirectUrl with the topLevelDomain parameter appended and necessary allow element values:


<iframe src="https://payment-page-ui.sandbox.coinify.com/?paymentId=1000049280&traderId=13450&country=HR&email=sni%2Balltest%40coinify.com&transferInAmount=280&transferInFeeAmount=30&transferInHandlingFee=5&transferInCurrency=EUR&transferOutAmount=0.081621576366&transferOutFeeAmount=0.001011&transferOutHandlingFee=0.001011&transferOutCurrency=ETH&returnUrl=&tradeId=209839&partnerId=255&provider=safecharge&isApplePayAvailable=false&topLevelDomain=www.yourwebsite.com" width="100%" height="576px" allow="camera;fullscreen;accelerometer;gyroscope;magnetometer;payment" allowfullscreen></iframe>

Once you have the redirectURL adjusted as instructed, you can redirect the end-user to it to open the Payment Page.

Updated 25 days ago