Google Pay button

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

{
  "order_id": "123456",
  "product_id": "47f95c95-3647-4c5b-ae6d-40fd8d3ac742",
  "customer_account_id": "4dad42f808",
  "currency": "USD",
  "order_description": "Premium package",
  "google_pay_merchant_id": "10911390523550288022",
  "google_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
17

{
  "order_id": "123456",
  "product_id": "faf3b86a-1fe6-4ae5-84d4-ab0651d75db2",
  "customer_account_id": "4dad42f808",
  "currency": "USD",
  "order_description": "Premium package",
  "google_pay_merchant_id": "10911390523550288022",
  "google_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
27

{
  "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
      }
    ]
  },
  "google_pay_merchant_id": "10911390523550288022",
  "google_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
28

{
  "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"
      }
    ]
  },
  "google_pay_merchant_id": "10911390523550288022",
  "google_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

import React, { FC } from 'react'
import ReactDOM from 'react-dom';
import Payment, { InitConfig } from "@solidgate/react-sdk"

export const MyPayment: FC<{
  merchantData: InitConfig['merchantData']
  google: Omit<InitConfig['googlePayButtonParams'], 'containerId'>
}> = (props) => {
  return (<Payment
    merchantData={props.merchantData}
    googlePayButtonParams={props.google}
  />)
}

1
2
3
4
5
6
7
8

PaymentFormSdk.init({
  ...restData,
  googlePayButtonParams: {
    color: 'white',
    type: 'plain',
    allowedAuthMethods: ['PAN_ONLY', 'CRYPTOGRAM_3DS']
  }
})

 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

<template>
  <Payment
      :merchant-data="merchantData"
      :google-pay-button-params="google"
      width="100%"
  />
</template>

<script lang="ts" setup>
import { defineAsyncComponent } from 'vue'
import { InitConfig } from '@solidgate/vue-sdk'
const Payment = defineAsyncComponent(() => import('@solidgate/vue-sdk'))

const merchantData: InitConfig['merchantData'] = {
  merchant: '<<--YOUR MERCHANT ID-->>',
  signature: '<<--YOUR SIGNATURE OF THE REQUEST-->>',
  paymentIntent: '<<--YOUR PAYMENT INTENT-->>'
}

const google: Omit<InitConfig['googlePayButtonParams'], 'containerId'> = {
  color: 'white',
  type: 'plain',
  allowedAuthMethods: ['PAN_ONLY', 'CRYPTOGRAM_3DS']
}
</script>

 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

import {Component} from '@angular/core';

import {FormType, InitConfig} from "@solidgate/angular-sdk";

@Component({
  selector: 'app-root',
  template: `
    <ngx-solid-payment
      [googlePayButtonParams]="google"
      [merchantData]="merchantData"
    ></ngx-solid-payment>
  `
})
export class AppComponent {
  merchantData: InitConfig['merchantData'] = {
    merchant: '<<--YOUR MERCHANT ID-->>',
    signature: '<<--YOUR SIGNATURE OF THE REQUEST-->>',
    paymentIntent: '<<--YOUR PAYMENT INTENT-->>'
  }

  google: Omit<InitConfig['googlePayButtonParams'], 'containerId'> = {
    color: 'white',
    type: 'plain',
    allowedAuthMethods: ['PAN_ONLY', 'CRYPTOGRAM_3DS']
  }
}

 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 googleContainerRef = useRef(null)

  return (
    <div>
      <div ref={googleContainerRef}></div>
      <Payment
        merchantData={props.merchantData}
        googlePayContainerRef={googleContainerRef}
      />
    </div>
  )
}

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11

<div id="yourCustomContainerId"></div>
<script>
PaymentFormSdk.init({
  ...restData,
  googlePayButtonParams: {
    buttonColor: 'default',
    buttonType: 'buy',
    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"
      :google-pay-container-ref="googleButton"
  />
  <div ref="googleButton" />
</template>

<script lang="ts" setup>
import { defineAsyncComponent, ref } from 'vue'
import { InitConfig } from '@solidgate/vue-sdk'
const Payment = defineAsyncComponent(() => import('@solidgate/vue-sdk'))

const googleButton = 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"
      [googlePayContainer]="googlePay"
    ></ngx-solid-payment>
    <div class="google-pay" #googlePay></div>
  `
})
export class AppComponent {
  merchantData: InitConfig['merchantData'] = {
    merchant: '<<--YOUR MERCHANT ID-->>',
    signature: '<<--YOUR SIGNATURE OF THE REQUEST-->>',
    paymentIntent: '<<--YOUR PAYMENT INTENT-->>'
  }
}