带动态金额的条纹自定义结帐 [英] Stripe Custom Checkout with dynamically amount
本文介绍了带动态金额的条纹自定义结帐的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我需要为注册系统实现条带解决方案.在此注册中，用户支付一次性付款并可以选择进行捐赠.我的问题是如何使用 checkout.js 动态显示总金额(注册 + 捐赠)?
付款在 Stripe Dashboard 上完美运行.捐款+注册费加在一起.我的问题是动态地将金额放在结帐窗口上.在这个窗口上，只出现支付"，我想如果有可能有支付 $amount.
有关信息，我使用的是 Wordpress.
谢谢.
这是我的 page.php :
<!--提交--><脚本src="https://checkout.stripe.com/checkout.js" class="stripe-button"数据键=XXXXXXXXXxXXXXXXXX"data-amount="$registration_fee + $donation"数据名称=XXXX XXXX"数据描述=小部件"数据图像="https://stripe.com/img/documentation/checkout/marketplace.png"数据区域设置=自动"数据货币=欧元">
和charge.php:
$customer->id,'金额' =>$registration_fee + $donation ,'货币' =>欧元"，'来源' =>$代币，//来源" =>"tok_mastercard",//使用 Stripe.js 获取//元数据"=>数组(order_id"=>6735")));//print_r($response);/*==========================发送电子邮件==============================*/$strTo = 'XXXXXXX@XXXXXXX.com';$strName = $first_name .' ' .$last_name;$strEmail = $email;$strPhone = $phone;//统一会话//$strSid = md5(uniqid(time()));$strHeader = "";$strHeader .= "From: ".$strName."<".$strEmail.">\nReply-To: ".$strEmail."";$strSubject = '来自 ' 的表单提交.$strName;$strHeader .= "\nMIME 版本:1.0\n";$strHeader .= "内容类型:多部分/混合；边界=\"".$strSid."\"\n\n";$strHeader .= "这是一个 MIME 格式的多部分消息.\n";$strHeader .= "--".$strSid."\n";$strHeader .= "内容类型: text/html; charset=utf-8\n";$strHeader .= "内容传输编码:7 位\n\n";$strHeader .= "名称:\n";$strHeader .= $strName."\n\n";$strHeader .= "邮箱:\n";$strHeader .= $strEmail."\n\n";$strHeader .= "电话:\n";$strHeader .= $strPhone."\n\n";$flgSend = mail("$strTo", "$strSubject", $strHeader);//@ = 没有显示错误//如果($flgSend){$clientHeader = "";$clientHeader .= "来自:".NAME_HERE".<".REPLYTO@EXAMPLE.COM".">\n";$clientHeader .= "回复:" .XXXXX@XXXXX.com"."\n";$clientSubject = '谢谢，' .$strName .'为您购买XXXXXXXXXXXXXXX.';$clientHeader .= "\nMIME 版本:1.0\n";$clientHeader .= "内容类型:多部分/混合；边界=\"".$strSid."\"\n\n";$clientHeader .= "这是一个 MIME 格式的多部分消息.\n";$clientHeader .= "--".$strSid."\n";$clientHeader .= "内容类型: text/html; charset=utf-8\n";$clientHeader .= "内容传输编码:7 位\n\n";$clientHeader .= "恭喜，" .$strName .为 XXXXXXXXXXXXXXXXXXXX 向 XXXX 支付了 XX.00 美元！"."\n\n";$clientHeader .= "名称:\n";$clientHeader .= $strName."\n\n";$clientHeader .= "电子邮件:\n";$clientHeader .= $strEmail."\n\n";$clientHeader .= "电话:\n";$clientHeader .= $strPhone."\n\n";$emailtoClient = mail($strEmail, "$clientSubject", $clientHeader);header("位置:https://XXXXXXXX.com/thank-you");死();} 别的 {echo "无法发送邮件.";}} catch(\Stripe\Error\Card $e) {//既然是下降，\Stripe\Error\Card 就会被抓到$body = $e->getJsonBody();$err = $body['error'];print('状态为:' . $e->getHttpStatus() . "\n");print('Type is:' . $err['type'] . "\n");print('代码是:' . $err['code'] . "\n");//在这种情况下，参数是 ''print('Param is:' . $err['param'] . "\n");print('Message is:' . $err['message'] . "\n");} catch (\Stripe\Error\RateLimit $e) {//向 API 发出的请求太多太快echo "太多请求发送到 Stripe 的 API 太快了";} catch (\Stripe\Error\InvalidRequest $e) {//向 Stripe 的 API 提供了无效参数打印_r($响应)；//回声(测试")；echo "向 Stripe 的 API 提供了无效的参数";} catch (\Stripe\Error\Authentication $e) {//使用 Stripe 的 API 进行身份验证失败//(也许您最近更改了 API 密钥)echo "使用 Stripe 的 API 进行身份验证失败";} catch (\Stripe\Error\ApiConnection $e) {//与 Stripe 的网络通信失败echo "与 Stripe 的网络通信失败";} catch (\Stripe\Error\Base $e) {//向用户显示一个非常通用的错误，并可能发送//自己的电子邮件echo "你遇到了一个错误！";} 捕获(异常 $e){//发生了其他事情，与 Stripe 完全无关echo "错误:发生了其他事情，与 Stripe 完全无关";}?> 解决方案
这是我的解决方案.使用 jQuery/Javascript.我建议将 id="donation" 添加到捐赠输入字段，并添加一个 placeholder="10.00" 作为捐赠输入的示例.
jQuery(document).ready(function($) {var first_price = 0;var second_price = 0;var total_price = 0;$('#registration_fee').on( "change", function() {first_price = $('#registration_fee').val();first_price = parseInt( first_price );//console.log( first_price );});$('#donation').on( "change", function() {second_price = $('#donation').val();second_price = parseInt( second_price );//console.log( second_price );});$('#payment-form').on( "change", function() {total_price = first_price + second_price;//console.log( "total: " + total_price );$('.stripe-button-el span').html("用卡支付$" + total_price );});});I need to implement a stripe solution for a registration system. In this registration, users pay a single time payment and have the choice to make a donation. My problem is how to show dynamically the total amount (Registration + donation)with checkout.js ?
The payment works perfectly on Stripe Dashboard. Donation + Registration fee are added together. My problem is to dynamically put the amount on the checkout window. On this window, just appear "Pay", I want if it's possible to have Pay $amount.
For information, I'm using Wordpress.
Thank you.
Here is my page.php :
<form action="myURL/charge.php" method="POST" id="payment-form">
<!-- //Header -->
<!--<div class="form-header"><p>Powered by Stripe</p></div>-->
<span id="card-errors" class="payment-errors" style="color: red; font-size: 22px; "></span>
<!-- // First and Last Name -->
<div class="form-row left"><label for="firstname" class="next-line">First Name</label><input type="text" name="fname" value="<?php ( isset( $_POST['fname'] ) ? $first_name : null ) ?>"></div>
<div class="form-row right"><label for="lastname" class="next-line">Last Name</label><input type="text" name="lname" value="<?php ( isset( $_POST['lname'] ) ? $last_name : null ) ?>"></div>
<!-- //Email -->
<div><label for="email">Email <strong>*</strong></label><input type="text" name="email" value="<?php ( isset( $_POST['email'] ) ? $email : null ) ?>"></div>
<!-- //Phone-->
<div><label for="phone">Phone</label><input type="tel" name="phone" value="<?php ( isset( $_POST['phone'] ) ? $phone : null ) ?>"></div>
<select name="registration_fee" id="registration_fee" required>
<option selected="selected" disabled>Choose registration </option>
<option value="1200">18 - 29 year</option>
<option value="1600">30 - 39 year</option>
</select>
<div class="form-row left"><label for="donation" class="next-line">Donation</label><input type="text" name="donation" value="<?php ( isset( $_POST['donation'] ) ? $donation : null ) ?>"></div>
<div id="card-element">
<!-- a Stripe Element will be inserted here. -->
</div>
<!--Submit-->
<script
src="https://checkout.stripe.com/checkout.js" class="stripe-button"
data-key="XXXXXXXxXXXXXXXX"
data-amount="$registration_fee + $donation"
data-name="XXXX XXXXX"
data-description="Widget"
data-image="https://stripe.com/img/documentation/checkout/marketplace.png"
data-locale="auto"
data-currency="eur">
And charge.php :
<?php
$email = $_POST['email'];
$phone = $_POST['phone'];
$first_name = $_POST['fname'];
$last_name = $_POST['lname'];
try {
require_once('Stripe/init.php');
// Use Stripe's library to make requests...
\Stripe\Stripe::setApiKey("sk_test_XXXXXXXXXXXXXXX");
$token = $_POST['stripeToken'];
isset ($_POST['registration_fee']) ? $registration_fee = $_POST['registration_fee'] : '';
isset ($_POST['donation']) ? $donation = $_POST['donation'] : '';
$response = \Stripe\Charge::create(array(
//'customer' => $customer->id,
'amount' => $registration_fee + $donation ,
'currency' => "eur",
'source' => $token,
// "source" => "tok_mastercard", // obtained with Stripe.js
//"metadata" => array("order_id" => "6735")
));
//print_r($response);
/*===========================
send email
============================*/
$strTo = 'XXXXXXX@XXXXXXX.com';
$strName = $first_name . ' ' . $last_name;
$strEmail = $email;
$strPhone = $phone;
// Uniqid Session //
$strSid = md5(uniqid(time()));
$strHeader = "";
$strHeader .= "From: ".$strName."<".$strEmail.">\nReply-To: ".$strEmail."";
$strSubject = 'Form Submission from ' . $strName;
$strHeader .= "\nMIME-Version: 1.0\n";
$strHeader .= "Content-Type: multipart/mixed; boundary=\"".$strSid."\"\n\n";
$strHeader .= "This is a multi-part message in MIME format.\n";
$strHeader .= "--".$strSid."\n";
$strHeader .= "Content-type: text/html; charset=utf-8\n";
$strHeader .= "Content-Transfer-Encoding: 7bit\n\n";
$strHeader .= "Name: \n";
$strHeader .= $strName."\n\n";
$strHeader .= "Email: \n";
$strHeader .= $strEmail."\n\n";
$strHeader .= "Phone: \n";
$strHeader .= $strPhone."\n\n";
$flgSend = mail("$strTo", "$strSubject", $strHeader); // @ = No Show Error //
if($flgSend) {
$clientHeader = "";
$clientHeader .= "From: " . "NAME_HERE" . "<" . "REPLYTO@EXAMPLE.COM" . ">\n";
$clientHeader .= "Reply-To: " . "XXXXX@XXXXX.com" . "\n";
$clientSubject = 'Thank you, ' . $strName . ' for your purchase of XXXXXXXXXXXXXXX.';
$clientHeader .= "\nMIME-Version: 1.0\n";
$clientHeader .= "Content-Type: multipart/mixed; boundary=\"".$strSid."\"\n\n";
$clientHeader .= "This is a multi-part message in MIME format.\n";
$clientHeader .= "--".$strSid."\n";
$clientHeader .= "Content-type: text/html; charset=utf-8\n";
$clientHeader .= "Content-Transfer-Encoding: 7bit\n\n";
$clientHeader .= "Congrats, " . $strName . " paid $XX.00 to XXXX for XXXXXXXXXXXXXXXXXXXX!" . "\n\n";
$clientHeader .= "Name: \n";
$clientHeader .= $strName."\n\n";
$clientHeader .= "Email: \n";
$clientHeader .= $strEmail."\n\n";
$clientHeader .= "Phone: \n";
$clientHeader .= $strPhone."\n\n";
$emailtoClient = mail($strEmail, "$clientSubject", $clientHeader);
header("Location: https://XXXXXXXX.com/thank-you");
die();
} else {
echo "Cannot send mail.";
}
} catch(\Stripe\Error\Card $e) {
// Since it's a decline, \Stripe\Error\Card will be caught
$body = $e->getJsonBody();
$err = $body['error'];
print('Status is:' . $e->getHttpStatus() . "\n");
print('Type is:' . $err['type'] . "\n");
print('Code is:' . $err['code'] . "\n");
// param is '' in this case
print('Param is:' . $err['param'] . "\n");
print('Message is:' . $err['message'] . "\n");
} catch (\Stripe\Error\RateLimit $e) {
// Too many requests made to the API too quickly
echo "Too many requests sent to Stripe's API too quickly";
} catch (\Stripe\Error\InvalidRequest $e) {
// Invalid parameters were supplied to Stripe's API
print_r($response);
//echo ("test");
echo " Invalid parameters were supplied to Stripe's API";
} catch (\Stripe\Error\Authentication $e) {
// Authentication with Stripe's API failed
// (maybe you changed API keys recently)
echo " Authentication with Stripe's API failed";
} catch (\Stripe\Error\ApiConnection $e) {
// Network communication with Stripe failed
echo " Network communication with Stripe failed";
} catch (\Stripe\Error\Base $e) {
// Display a very generic error to the user, and maybe send
// yourself an email
echo "You have encountered an error!";
} catch (Exception $e) {
// Something else happened, completely unrelated to Stripe
echo "Error: Something else happened, completely unrelated to Stripe";
}
?>
解决方案
Here is my solution. Use jQuery/Javascript. I advise adding the id="donation" to the donation input field, and also a placeholder="10.00" as an example of donation input.
jQuery(document).ready(function($) {
var first_price = 0;
var second_price = 0;
var total_price = 0;
$('#registration_fee').on( "change", function() {
first_price = $('#registration_fee').val();
first_price = parseInt( first_price );
//console.log( first_price );
});
$('#donation').on( "change", function() {
second_price = $('#donation').val();
second_price = parseInt( second_price );
//console.log( second_price );
});
$('#payment-form').on( "change", function() {
total_price = first_price + second_price;
//console.log( "total: " + total_price );
$('.stripe-button-el span').html( "Pay with Card $" + total_price );
});
});
这篇关于带动态金额的条纹自定义结帐的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
