I'm trying to integrate Google Pay at my page, as expected doing that first at Sandbox environment but I face a problem that when I click the Google Pay button it opens the live domain and asks me to enter a real card, although I setup up all related to Sandbox environment.
Here is the code following BT documentation.
var createGooglePaymentComponent = function(clientInstance){
var button = document.querySelector('#google-pay-button');
var paymentsClient = new google.payments.api.PaymentsClient({
environment: 'TEST' // Or 'PRODUCTION'
});
braintree.googlePayment.create({
client: clientInstance,
googlePayVersion: 2,
}, function (googlePaymentErr, googlePaymentInstance) {
paymentsClient.isReadyToPay({
apiVersion: 2,
apiVersionMinor: 0,
allowedPaymentMethods: googlePaymentInstance.createPaymentDataRequest().allowedPaymentMethods,
}).then(function(response) {
if (response.result) {
button.addEventListener('click', function (event) {
event.preventDefault();
var paymentDataRequest = googlePaymentInstance.createPaymentDataRequest({
transactionInfo: {
currencyCode: 'USD',
totalPriceStatus: 'FINAL',
totalPrice: '100.00',
}
});
var cardPaymentMethod = paymentDataRequest.allowedPaymentMethods[0];
cardPaymentMethod.parameters.billingAddressRequired = true;
paymentsClient.loadPaymentData(paymentDataRequest).then(function(paymentData) {
googlePaymentInstance.parseResponse(paymentData, function (err, result) {
if (err) {
// Handle parsing error
}
// Send result.nonce to your server
});
}).catch(function (err) {
});
});
}
}).catch(function (err) {
});
});
};
Here is a screenshot of what I get:
Any idea why does that happen?
Using Google Pay in the TEST environment will return a TEST payment credential which won't actually charge the payment method that you provide. It's understandable that you don't want to be using real payment details.
If you want to be able to choose from a list of predefined test cards, follow the instructions here: https://developers.google.com/pay/api/web/guides/resources/test-card-suite
In short, you will need to join the googlepay-test-mode-stub-data Google Group which will then display a list of test accounts when accessing the Google Pay payment sheet with that user.
Related
We are using the PayPal JS SDK ^5.1.0 and I'm using it to generate a pay button like described in the docs:
const paypal = await loadScript({
"client-id": conf.client_id,
"currency": conf.currency_code
});
await paypal.Buttons({
// Sets up the transaction when a payment button is clicked
createOrder: (coData, actions) => {
if (price.getTotal()) {
data.data.amount = price.getTotal();
return actions.order.create({
purchase_units: [{
description: config.registrationCenterDisplayName,
amount: {
value: price.getTotal().toFixed(2) // Can also reference a variable or function
},
}],
application_context: {
shipping_preference: 'NO_SHIPPING'
}
});
} else {
throw new Error('Amount can not be 0');
}
},
// Finalize the transaction after payer approval
onApprove: (oaData, actions) => {
return actions.order.capture().then(function(orderData) {
// Successful capture! For dev/demo purposes:
console.log('Capture result', orderData, JSON.stringify(orderData, null, 2));
const transaction = orderData.purchase_units[0].payments.captures[0];
data.data.id = transaction.id;
data.data.status = transaction.status;
dataValid = true;
submit();
});
}
}).render(buttonWrapper[0]);
It seems not to work well with error case i live. How can I provoke failed transactions or capture erros in sandbox mode?
I found the negative testing mode of a sandbox, but it does not change the behaviour for the button. I still get only positive responses.
I opened also an issue in the github repo: https://github.com/paypal/paypal-js/issues/273
Thx a lot for any help! I might overlook something very obvious...
For client-side captures, actions.order.capture().then( is only triggered when a capture is successful.
Failure cases are handled by the JS SDK itself, there is no need to test anything as it is not your code.
For server-side capturing (not your question) and using the JS SDK for approval, see the demo code here. Negative testing can be used from server API calls for failures if desired.
I am creating an application in Flutter Web that needs to collect payment information to create subscription charges. My plan was to use Stripe to do this, however, after making all the necessary methods for Stripe, I found that Stripe only accepts card data through Stripe Elements. Upon further research, I saw that essentially all payment platforms do this to maintain PCI compliance.
Is there any method of embedding Stripe elements(or any equivalent) into my application or is there an easier method of accepting payments with Flutter Web?
There's an unofficial Flutter Stripe package that might be what you're after: https://pub.dev/packages/stripe_payment
There's a new package called stripe_sdk, that appears to have Web support. I haven't tried it yet, but it says Web support in the description and has a web demo aswell :)
Also the old packages for mobile won't work for web, because they rely on WebView, which is not supported (and wouldn't make much sense) on web.
In case you're using Firebase as a backend, there's a stripe payments extension you can install in Firebase which makes it easy. How it works is you add a checkout_session in to a user collection and keep listening on the document. Stripe extension will update the document with a unique payments url and we just open that URL in a new tab to make the payment in the tab. We're using it in our web app, and it's working.
Something like :
buyProduct(Product pd) async {
setState(() {
loadingPayment = true;
});
String userUid = FirebaseAuth.instance.currentUser!.uid;
var docRef = await FirebaseFirestore.instance
.collection('users')
.doc(userUid)
.collection('checkout_sessions')
.add({
'price': pd.priceId,
'quantity': pd.quantity,
'mode': 'payment',
'success_url': 'https://yourwebsite/purchase-complete',
'cancel_url': 'https://yourwebsite/payment-cancelled',
});
docRef.snapshots().listen(
(ds) async {
if (ds.exists) {
//check any error
var error;
try {
error = ds.get('error');
} catch (e) {
error = null;
}
if (error != null) {
print(error);
} else {
String url = ds.data()!.containsKey('url') ? ds.get('url') : '';
if (url != '') {
//open the url in a new tab
if (!isStripeUrlOpen) {
isStripeUrlOpen = true;
setState(
() {
loadingPayment = false;
},
);
launchUrl(Uri.parse(url));
}
}
}
}
}
},
);
}
I cannot seem to make a test dialog appear. When I call payments.purchaseAync, I am always presented with a real Checkout dialog as opposed to a test dialog.
I've already added the test user to the Testers. Am I missing anything? Or is this feature not supported yet at this time?
Temporary code I'm using:
let supportedAPIs:any = FBInstant.getSupportedAPIs();
if(supportedAPIs.includes('payments.purchaseAsync'))
{
console.log('payments supported...');
FBInstant.payments.onReady(() => {
console.log('payments ready...');
FBInstant.payments.purchaseAsync({
productID: 'test_product',
developerPayload: 'foobar',
}).then(function (purchase) {
console.log(purchase);
});
});
}
else
{
console.log('payments not supported...');
}
I'm setting up in app purchases in my Ionic app and I've been having some trouble getting the test purchases working correctly. It would seem that as soon as I execute this particular function, it automatically runs the code as if it was approved, even though the confirmation to get the subscription hasn't occurred yet:
this.platform.ready().then(() => {
// Register the products for consumption
this.products.forEach(product => {
this.store.register({
id: product.id,
alias: product.alias,
type: product.type
});
// When a purchase is approved, see what we get here
this.store.when(product.id).approved((order) => {
// Purchase was successful, setup the appropriate subscription
this._subscriptions.updateSubscription(this.user.id, this.selectedPlan.amount, 'activate').then(() => {
if(this.selectedPlan.amount === 1) {
this.subscriptionGrammar = 'month';
} else if(this.selectedPlan.amount > 1) {
this.subscriptionGrammar = 'months';
}
order.finish();
});
});
});
});
I was under the impression that utilizing the .when().approved() would only fire once the payment "goes through". Since I'm using test transactions, I'm not sure how that would affect it, but I would suspect it should only do that once I hit "Confirm" on the Google dialog that pops up in my app?
Is there something I'm missing here?
I am using adaptive payments on my site, I can click buy on the item and complete the transaction which works fine. But after buying the item or clicking on cancel it doesnt redirect back to My site.
I tried to follow this example:
Adaptive Payments without modal box or popups?
But still cant get it working
Here is my current Javascript that im using:
$( document ).ready(function() {
$("form").submit(function (e) {
var className = $('form').attr('class');
var formname = this.name;
//alert(formname);
if(formname=="paypalform"){
//alert("testing");
var login = 'elgg-search elgg-search-header';
if(login) {
e.preventDefault();
//var agree = confirm('You are just about to ask the Post Pay Counter to prepare a PayPal payment on your behalf. Note that this will really take money from your account and into the selected writers ones\’. Please double check what you are doing, it is only your fault if something goes wrong.\n\nIf what you have done is fine, then you can go on with the payment. Just be patient during loading, please. In a couple of seconds the execute payment button will be clickable and you will be able to confirm this action. From this moment on you can not modify the payment selection, but if you reload the page before clicking the execute payment button, nothing will be done.');
//if (!agree)
// return false;
var className = $('form').attr('class');
//alert(className);
var data = {
action: 'the_php_page_that_will_handle_the_request.php',
payment_data: $(this).serialize()
};
$('#prepare_payment').attr("disabled", "true");
$("#prepare_payment_form :text").each(function() {
$(this).attr("disabled", "true");
});
var url_to_submit = $('#url_submit').text();
$.post(url_to_submit, data, function(response) {
if(response.indexOf("Error: ") != -1) {
$("#paypal_error").css("display", "block");
$("#paypal_error").html(response);
$('#prepare_payment').removeAttr("disabled");
jQuery("#prepare_payment_form :text").each(function() {
jQuery(this).removeAttr("disabled");
});
return false;
}
// enable for testing mode, to display pay key on ad view
//$('#txtHint').html( response );
//$('#txtHint').html( 'Redirecting to PayPal' );
//Store PayKey in the form action and enable execute payment button
$("#execute_payment_form").attr("action", "https://www.sandbox.paypal.com/webapps/adaptivepayment/flow/pay?paykey=" + response+"&expType=mini");
//document.getElementById('iframeid').src = url;
$('#execute_payment').removeAttr("disabled");
var url = "https://www.sandbox.paypal.com/webapps/adaptivepayment/flow/pay?paykey=" + response+"&expType=mini";
$(location).attr('href',url);
//document.getElementById('iframeid').src = url;
});
}
}
});
});