Apple Pay button

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15

{
  "order_id": "123456",
  "product_id": "47f95c95-3647-4c5b-ae6d-40fd8d3ac742",
  "customer_account_id": "4dad42f808",
  "currency": "USD",
  "order_description": "Premium package",
  "apple_pay_merchant_name": "Solidgate",
  "customer_email": "test@solidgate.com",
  "ip_address": "8.8.8.8",
  "geo_country": "USA",
  "platform": "WEB",
  "language": "en",
  "success_url": "https://merchant.example/success",
  "fail_url": "https://merchant.example/fail"
}

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16

{
  "order_id": "123456",
  "product_id": "faf3b86a-1fe6-4ae5-84d4-ab0651d75db2",
  "customer_account_id": "4dad42f808",
  "currency": "USD",
  "order_description": "Premium package",
  "apple_pay_merchant_name": "Solidgate",
  "customer_email": "test@solidgate.com",
  "ip_address": "8.8.8.8",
  "geo_country": "USA",
  "platform": "WEB",
  "language": "en",
  "retry_attempt": 1,
  "success_url": "https://merchant.example/success",
  "fail_url": "https://merchant.example/fail"
}

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26

{
  "order_id": "123456",
  "order_description": "Premium package",
  "checkout": {
    "mode": "subscription",
    "customer_id": "cust_01KMG2ABYPF6XS5DMJQ817C429",
    "merchant_reference": "order_ABC-123",
    "line_items": [
      {
        "product_price_id": "fa43b415-5522-4373-b026-a365562f9649",
        "quantity": 1
      }
    ]
  },
  "apple_pay_merchant_name": "Solidgate",
  "customer_email": "test@solidgate.com",
  "ip_address": "8.8.8.8",
  "geo_country": "USA",
  "platform": "WEB",
  "language": "en",
  "order_metadata": {
    "partner_id": "123989"
  },
  "success_url": "https://merchant.example/success",
  "fail_url": "https://merchant.example/fail"
}

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27

{
  "order_id": "123456",
  "order_description": "Premium package",
  "checkout": {
    "mode": "invoice",
    "customer_id": "cust_01KMG2ABYPF6XS5DMJQ817C429",
    "merchant_reference": "order_ABC-123",
    "line_items": [
      {
        "product_price_id": "fa43b415-5522-4373-b026-a365562f9649",
        "quantity": 2,
        "description": "Premium plan"
      }
    ]
  },
  "apple_pay_merchant_name": "Solidgate",
  "customer_email": "test@solidgate.com",
  "ip_address": "8.8.8.8",
  "geo_country": "USA",
  "platform": "WEB",
  "language": "en",
  "order_metadata": {
    "partner_id": "123989"
  },
  "success_url": "https://merchant.example/success",
  "fail_url": "https://merchant.example/fail"
}

1
2
3
4
5
6

form.init({
  applePayButtonParams: {
    integrationType: 'js'
  },
  // ...other configurations
});

 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={appleContainerRef}></div>
      <Payment
        merchantData={props.merchantData}
        applePayContainerRef={appleContainerRef}
      />
    </div>
  )
}

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

 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
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38

<!-- MyPayment.svelte -->
<script lang="ts">
  import type { Action } from 'svelte/action'
  import { SdkLoader, type ClientSdk, type InitConfig } from '@solidgate/client-sdk-loader'

  let { merchantData }: { merchantData: InitConfig['merchantData'] } = $props()

  const containerId = $props.id()
  const applePayContainerId = `${containerId}-apple-pay`

  const payment: Action = (node) => {
    node.id = containerId

    let sdk: ClientSdk | null = null
    let cancelled = false

    void (async () => {
      sdk = await SdkLoader.load()
      if (!sdk || cancelled) return

      sdk.init({
        merchantData,
        iframeParams: { containerId, width: '100%' },
        applePayButtonParams: { containerId: applePayContainerId }
      })
    })()

    return {
      destroy () {
        cancelled = true
        sdk?.destroy()
      }
    }
  }
</script>

<div id={applePayContainerId}></div>
<div use:payment></div>

1
2
3
4
5
6
7
8
9

PaymentFormSdk.init({
  ...restData,
  applePayButtonParams: {
    enabled: false,
    containerId: 'yourCustomContainerId',
    color: 'white-outline',
    type: 'check-out'
  }
})