BarcodeBC > Articles > How to Integrate Google Pay QR Code in Angular and PHP?
To integrate Google Pay QR Code in an Angular application and show both the QR Code and the pay button for payment with Google Pay, you can use the Google Pay API to generate and display a QR Code for a payment request, and also use the Google Pay Button API to display a button for the payment request. Here are the basic steps to follow.
1. Import the Google Pay API and the Google Pay Button API scripts in your index.html file.
<script src="https://pay.google.com/gp/p/js/pay.js"></script> <script src="https://buttons.google.com/js/api.js">
2. Create a payment request object with the desired payment details, such as the total price, currency, and description. This example creates a payment request that allows credit cards and specifies a total price of 1.00 USD.
const paymentDataRequest = {
apiVersion: 2,
apiVersionMinor: 0,
allowedPaymentMethods: [
{
type: 'CARD',
parameters: {
allowedAuthMethods: ['PAN_ONLY', 'CRYPTOGRAM_3DS'],
allowedCardNetworks: ['AMEX', 'DISCOVER', 'MASTERCARD', 'VISA']
},
tokenizationSpecification: {
type: 'PAYMENT_GATEWAY',
parameters: {
gateway: 'example',
gatewayMerchantId: 'exampleGatewayMerchantId'
}
}
}
],
merchantInfo: {
merchantId: '12345678901234567890',
merchantName: 'Example Merchant'
},
transactionInfo: {
totalPriceStatus: 'FINAL',
totalPriceLabel: 'Total',
totalPrice: '1.00',
currencyCode: 'USD',
countryCode: 'US',
checkoutOption: 'COMPLETE_IMMEDIATE_PURCHASE',
description: 'Example Purchase'
},
callbackIntents: ['PAYMENT_AUTHORIZATION']
};
3. Use the Google Pay API to generate a payment token for the request. The following code uses the loadPaymentData method to generate a payment token for the payment request. The payment token is passed to a callback function as the paymentData parameter.
const paymentsClient = new google.payments.api.PaymentsClient({environment: 'TEST'});
paymentsClient.loadPaymentData(paymentDataRequest).then(paymentData => {
// The payment token is in paymentData.paymentMethodData.token.
}).catch(error => {
// Handle errors.
});
4. Use a QR Code generation library to generate a QR Code from the payment token.
const qrCode = new QRious({
value: paymentData.paymentMethodData.tokenizationData.token,
size: 200
});
const qrCodeUrl = qrCode.toDataURL();
This code uses the QRious library to generate a QR Code from the payment token. The value option specifies the token value, and the size option specifies the dimensions of the QR Code. The resulting QR Code is converted to a data URL using the toDataURL method.
5. Use the Google Pay Button API to display a pay button for the payment request. The following code creates a pay button using the PayButton constructor and specifies a callback.
const button = new google.payments.api.PayButton({
onClick: () => {
paymentsClient.loadPaymentData(paymentDataRequest).then(paymentData => {
// Process the payment.
}).catch(error => {
// Handle errors.
});
}
});
button.render('#pay-button-container');
To integrate Google Pay QR Code in a PHP application, you can use the Google Pay API to generate and display a QR Code for a payment request. Here are the basic steps to follow.
1. Import the Google Pay API script in your HTML file.
<script src="https://pay.google.com/gp/p/js/pay.js"></script>
2. Create a payment request object with the desired payment details, such as the total price, currency, and description. The following example creates a payment request that allows credit cards and specifies a total price of 1.00 USD.
$paymentDataRequest = array(
'apiVersion' => 2,
'apiVersionMinor' => 0,
'allowedPaymentMethods' => array(
array(
'type' => 'CARD',
'parameters' => array(
'allowedAuthMethods' => array('PAN_ONLY', 'CRYPTOGRAM_3DS'),
'allowedCardNetworks' => array('AMEX', 'DISCOVER', 'MASTERCARD', 'VISA')
),
'tokenizationSpecification' => array(
'type' => 'PAYMENT_GATEWAY',
'parameters' => array(
'gateway' => 'example',
'gatewayMerchantId' => 'exampleGatewayMerchantId'
)
)
)
),
'merchantInfo' => array(
'merchantId' => '12345678901234567890',
'merchantName' => 'Example Merchant'
),
'transactionInfo' => array(
'totalPriceStatus' => 'FINAL',
'totalPriceLabel' => 'Total',
'totalPrice' => '1.00',
'currencyCode' => 'USD',
'countryCode' => 'US',
'checkoutOption' => 'COMPLETE_IMMEDIATE_PURCHASE',
'description' => 'Example Purchase'
),
'callbackIntents' => array('PAYMENT_AUTHORIZATION')
);
3. Use the Google Pay API to generate a payment token for the request. This code uses the loadPaymentData method to generate a payment token for the payment request. The payment token is stored in the $paymentData variable.
$paymentsClient = new Google\Service\PaymentsApi\PaymentsClient(['environment' => 'TEST']); $paymentData = $paymentsClient->loadPaymentData($paymentDataRequest); // The payment token is in $paymentData->paymentMethodData->token.
4. Use a QR Code generation library to generate a QR Code from the payment token. The code below uses the BaconQrCode library to generate a QR Code from the payment token. The QrCode constructor takes the token value as its parameter. The resulting QR Code is outputted as an image.
use BaconQrCode\Encoder\QrCode;
$qrCode = new QrCode($paymentData->paymentMethodData->tokenizationData->token);
header('Content-Type: '.$qrCode->getContentType());
echo $qrCode->writeString();
5. Display the QR Code on your payment confirmation page using an HTML img tag. The example below displays the QR Code by referencing the PHP file that generates the QR Code.
<img src="/path/to/qr-code-generator.php" alt="Google Pay QR Code">
Note that this is a simplified example and you may need to modify it to fit your specific use case. Additionally, you will need to obtain the necessary Google Pay API credentials.