566E
首页 包列表 提交包 常见问题 关于

定制 remp/crm-wallet-pay-module 二次开发

按需修改功能、优化性能、对接业务系统，提供一站式技术支持

邮箱：yvsm@zunyunkeji.com | QQ：316430983 | 微信：yvsm316

remp/crm-wallet-pay-module

Composer 安装命令：

composer require remp/crm-wallet-pay-module

包简介

CRM Wallet Pay Module (Apple Pay and Google Pay support)

README 文档

README

This module provides integration of the Apple Pay and Google Pay payment gateways into the sales funnels.

Currently the module supports gateway implementation using Tatrabanka provider. This provider currently does not support recurrent payments.

Installation

To install the module, run:

composer require remp/crm-wallet-pay-module

Enable installed extension in your app/config/config.neon file:

extensions:
	# ...
	- Crm\WalletPayModule\DI\WalletPayModuleExtension

To have the module functionality available in sales funnels, copy assets by running this command in the application root folder (or run composer install, which install assets as well):

# run in CRM root folder
php bin/command.php application:install_assets

Integration

Apple Pay button

Configuration

In CRM settings (crm.press/admin/config-admin/) Payments section, configure Apple Pay options. These include paths to Apple Pay merchant ID certificate and key (including password, if encrypted). For more information, consult the official documentation on how to Set Up Apple Pay.

Requirements

Apple Pay requires HTTPS webpage with valid TLS certificate.

Usage in sales funnel

First, add "ApplePay Wallet" payment gateway to the list of allowed gateways in the sales funnel settings in CRM admin.

Next, include the WalletPay JS library in the sales funnel <head> tag (if not already included):

<script src="/layouts/wallet-pay-module/js/wallet-pay.js"></script>

To display the button itself, insert the following code snippet somewhere in your HTML document. Note the hidden class - button should be hidden at first, before we check Apple Pay availability.

<apple-pay-button  buttonstyle="black" type="buy" locale="sk_SK"
  class="hidden" 
  style="--apple-pay-button-width: 100%;
    --apple-pay-button-height: 40px;
    --apple-pay-button-border-radius: 5px;
    --apple-pay-button-padding: 5px 0px;">
</apple-pay-button>

Properties of the button are described in the official documentation, including the CSS styling.

Next, make sure to check Apple Pay is available in the current browser context:

// MERCHANT_ID is ID assigned in the Apple Pay settings
RempWalletPay.checkApplePayAvailability(MERCHANT_ID, function () {
    // called only if button should be displayed
    // remove 'hidden' class to display the button
    document.getElementsByTagName('apple-pay-button')[0].classList.remove('hidden');
});

To initialize the button, run the initApplePayButton. The most basic configuration:

const config = {
  totalPrice: '0.10',
  merchantName: 'Example Merchant s.r.o',
  productName: 'Example Product Name',

  // Function to retrieve sales funnel payment form data (will be sent together with Apple Pay token to backend).
  // Library takes care of response processing and redirect.
  salesFunnelFormData: () => {
    return new FormData(document.getElementById('form'));
  },

  // Optional, function returning true/false depending on whether Apple Pay execution should continue after clicking on the button.
  isValid: () => true, 
};
RempWalletPay.initApplePayButton(config);

Alternatively, you can provide onSuccess callback, which gives you control of processing of the Apple Pay token issued during the payment:

const config = {
    totalPrice: '0.10',
    merchantName: 'Example Merchant s.r.o',
    productName: 'Example Product Name',

    // Callback, called after user confirms the payment in the Apple modal (e.g. by fingerprint).
    // It receives two arguments:
    // - token - Apple Pay token
    // - completePaymentCallback - callback, should be called after backend (un/successfully) ackowledges the payment 
    onSuccess: (token, completePaymentCallback) =>  {
        var fd = new FormData(document.getElementById('form'));
        fd.append('apple_pay_token', token);
          
        fetch('/sales-funnel/sales-funnel-frontend/submit', {
            method: 'POST',
            body: fd,
        })
            .then(response => response.json())
            .then(data => {
                completePaymentCallback(true);
                window.top.location.href = data.apple_pay.redirect_url; // redirect to success page
            })
            .catch(e => completePaymentCallback(false));
    },
    
    // optional, function returning true/false depending on whether Apple Pay execution should continue after clicking on the Pay button.
    isValid: () => some_check_to_see_if_payment_form_is_valid(),
};
RempWalletPay.initApplePayButton(config);

Pay button update

To update price or product name of the button, call:

RempWalletPay.updateApplePayButton({
    totalPrice: '0.20', // new price
    // productName: 'new product name',
});

Google Pay

Configuration

To set up Google Pay and obtain required credentials, please follow the official documentation on Google Pay for web.

Requirements

Google Pay requires HTTPS webpage with valid TLS certificate.

Usage in sales funnel

First, add "GooglePay Wallet" payment gateway to the list of allowed gateways in the sales funnel settings in CRM admin.

Next, include the WalletPay JS library in the sales funnel <head> tag (if not already included):

<script src="/layouts/wallet-pay-module/js/wallet-pay.js"></script>

To display the button itself, insert the following code snippet somewhere in your HTML document.

<google-pay-button environment="PRODUCTION" 
                   button-locale="sk"
                   button-color="white" 
                   button-size-mode="fill" 
                   style="width:100%">
</google-pay-button>

All properties of the button are described in the GitHub documentation.

To initialize the button, run the initGooglePayButton. The most basic configuration:

const config = {
    // price shown to user
    totalPrice: '0.10',
    // merchantId is one of the credentials obtain during configuration
    merchantId: '1234567890',
    // some merchant name to show to user
    merchantName: 'Example merchant',

    // Function to retrieve sales funnel payment form data (will be sent together with Google Pay token to backend).
    // Library takes care of response processing and redirect.
    salesFunnelFormData: () => {
        return new FormData(document.getElementById('form'));
    },

    // Optional, function returning true/false depending on whether Google Pay execution should continue after clicking on the button.
    isValid: () => true, 
    
    // Optional, callback function to show progress during the payment   
    inProgress: (promise) => {
        console.log("Google payment starts"); // here, display some animation 
        promise.then(() => {
            console.log("Google payment starts"); // here, stop the animation
        });
    }
};
RempWalletPay.initGooglePayButton(config);

Alternatively, provide onSuccess callback, which gives control of processing of the Google Pay token issued during the payment and location to put 3DS dialog HTML code:

const config = {
    // price shown to user
    totalPrice: '0.10',
    // merchantId is one of the credentials obtain during configuration
    merchantId: '1234567890',
    // some merchant name to show to user
    merchantName: 'Example merchant',

    // Callback, called after user confirms the payment in the Google Pay dialog.
    // Argument:
    // - token - Google Pay token
    onSuccess: (token) =>  {
        var fd = new FormData(document.getElementById('form'));
        fd.append('google_pay_token', token);

        fetch('/sales-funnel/sales-funnel-frontend/submit', {
            method: 'POST',
            body: fd,
        })
            .then(response => response.json())
            .then(data => {
                // if 'tds_html' attribute is present, 3DS is required
                if (data.google_pay.tds_html) {
                    // helper function to display 3DS html in an iframe modal
                    RempWalletPay.show3ds(data.google_pay.tds_html);
                } else {
                    // redirect to success page (no 3DS requirement to finish the payment)
                    window.top.location.href = data.google_pay.redirect_url;
                }
            });
    },
    
    // Optional, function returning true/false depending on whether Google Pay execution should continue after clicking on the button.
    isValid: () => true,

    // Optional, callback function to show progress during the payment   
    inProgress: (promise) => {
        console.log("Google payment starts"); // here, display some animation 
        promise.then(() => {
            console.log("Google payment starts"); // here, stop the animation
        });
    }
};
RempWalletPay.initGooglePayButton(config);

Pay button update

To update price of the button, call:

RempWalletPay.updateGooglePayButton({
    totalPrice: '0.20', // new price
});

Extension

If you want to use your own gateway provider (instead of Tatrabanka), you can extend this module with your own implementation. Please note that this module does not provide support for direct wallet pay payments.

First, you need to implement the integration by providing the implementation of the Google/Apple pay interfaces:

  • Crm\WalletPayModule\Model\GooglePayWalletInterface
  • Crm\WalletPayModule\Model\ApplePayWalletInterface

When they're ready, register them in your config.neon file and override the default implementation provided by this module:

services:
	applePayWallet: Crm\FooModule\Model\YourProviderApplePayWallet
	googlePayWallet: Crm\FooModule\Model\YourProviderGooglePayWallet

API documentation

All examples use http://crm.press as a base domain. Please change the host to the one you use before executing the examples.

API responses can contain following HTTP codes:

Value Description
200 OK Successful response, default value
400 Bad Request Invalid request (missing required parameters)
403 Forbidden The authorization failed (provided token was not valid)
404 Not found Referenced resource wasn't found

If possible, the response includes application/json encoded payload with message explaining the error further.

GET /api/v1/apple-pay/merchant-validation

API call that validates Apple Pay merchant identity.

Params:
Name Value Required Description
url String yes Validation URL, as described in the Apple Pay Merchant Validation docs. It should be retrieved from ApplePaySession's onvalidatemerchant event handler.
Example:
curl -v –X GET http://crm.press/api/v1/apple-pay/merchant-identity?url=VALIDATION_URL

Response:

{
  "epochTimestamp": 1655206603128,
  "expiresAt": 1655210203128,
  "merchantSessionIdentifier": "...",
  "nonce": "SOME_NONCE",
  "merchantIdentifier": "...",
  "domainName": "crm.press",
  "displayName": "CRM",
  "signature": "SIGNATURE_DATA_BASE64",
  "operationalAnalyticsIdentifier": "DEVEL CRM:SOME_ID",
  "retries": 0,
  "pspId": "..."
}

Response may vary, since it contains data returned by Merchant Validation service provided by Apple.

remp/crm-wallet-pay-module 适用场景与选型建议

remp/crm-wallet-pay-module 是一款 基于 PHP 开发的 Composer 扩展包，目前已累计 3.39k 次下载、GitHub Stars 达 0， 最近一次更新时间为 2022 年 06 月 24 日， 在 PHP 生态内属于活跃度较高的组件。

我们在过去多个企业项目中使用过 remp/crm-wallet-pay-module 或与其功能相近的方案，如果你在选型或落地过程中遇到问题，例如 版本兼容、二次改造、私有化封装、与内部系统对接、生产 BUG 排查，欢迎联系我们协助评估。

围绕 remp/crm-wallet-pay-module 我们能提供哪些服务？
定制开发 / 二次开发

基于 remp/crm-wallet-pay-module 在你已有业务上做功能扩展、字段裁剪、UI 适配、与内部账号 / 权限 / 日志系统的深度对接。

BUG 修复 & 性能优化

线上偶发问题、内存泄漏、慢查询、并发异常等排查修复；针对高流量场景做缓存、队列、索引层面的调优。

项目外包 & 长期维护

承接完整的项目从需求 → 设计 → 开发 → 上线 → 长期运维；也可按月提供技术保姆服务。

yvsm@zunyunkeji.com QQ：316430983 微信：yvsm316 西安尊云信息科技 · 专注 PHP / Go / 分布式系统研发

统计信息

  • 总下载量： 3.39k
  • 月度下载量： 0
  • 日度下载量： 0
  • 收藏数： 0
  • 点击次数： 10
  • 依赖项目数： 0
  • 推荐数： 0

GitHub 信息

  • Stars： 0
  • Watchers： 6
  • Forks： 0
  • 开发语言： PHP
访问仓库

其他信息

  • 授权协议： MIT
  • 更新时间： 2022-06-24