I'm trying to make online payment using paypal button. I make the button using some instruction from paypal for developers. The paypal payment button shows fine on the page, but when I want to pay (test) it open me a popup, where I need to login with paypal account. I tried to login with another paypal account, because the money should come to my paypal account, but every time it shows me a error message "Check your email address and password and try again", email address and password are correct because I can login to paypal on another tab.
Image for popup where I need to login to paypal account and the error message
Here is code I got from paypal developers:
<script src="https://www.paypalobjects.com/api/checkout.js"></script>
<script>
// Render the PayPal button
paypal.Button.render({
// Set your environment
env: 'sandbox', // sandbox | production
// Specify the style of the button
style: {
layout: 'vertical', // horizontal | vertical
size: 'medium', // medium | large | responsive
shape: 'rect', // pill | rect
color: 'gold' // gold | blue | silver | white | black
},
// Specify allowed and disallowed funding sources
//
// Options:
// - paypal.FUNDING.CARD
// - paypal.FUNDING.CREDIT
// - paypal.FUNDING.ELV
funding: {
allowed: [
paypal.FUNDING.CARD,
paypal.FUNDING.CREDIT
],
disallowed: []
},
// Enable Pay Now checkout flow (optional)
commit: true,
// PayPal Client IDs - replace with your own
// Create a PayPal app: https://developer.paypal.com/developer/applications/create
client: {
sandbox: 'AZDxjDScFpQtjWTOUtWKbyN_bDt4OgqaF4eYXlewfBP4-8aqX3PiV8e1GWU6liB2CUXlkA59kJXE7M6R',
production: '<insert production client id>'
},
payment: function (data, actions) {
totalPrice = $('.price').val()
totalPrice = parseFloat(totalPrice)
return actions.payment.create({
payment: {
transactions: [
{
amount: {
total: '1.0' ,
currency: 'USD'
}
}
]
}
});
},
onAuthorize: function (data, actions) {
return actions.payment.execute()
.then(function () {
window.alert('Payment Complete!');
});
}
}, '#paypal-button-container');
</script>
<div id="paypal-button-container"></div>
Are you logging in with a Sandbox account? Since you're working in the sandbox (according to your screenshot) you need to make sure you're logging in with a Sandbox buyer account for testing.
Related
Trying to use JavaScript Interop using Blazor client side.
The widget doesn't render.
I was hoping to setup an employee portal in Blazor, but wanted to use the Okta widget of course. Initially I just couldn't get the widget to render and now more problems. Will have to back track a little, but has anyone a clue how to render a javascript UI component within Blazor?
Also, I replaced the Okta config info with my own Okta developer instance info - not shown below...
#inject IJSRuntime JSRuntime
<h3>Employee Login</h3>
<div id="okta-signin-widget"></div>
#code {
protected override void OnAfterRender(bool firstRender)
{
if (firstRender)
{
JSRuntime.InvokeAsync<object>("RenderLogin", "OnAfterRender was Triggered");
}
}
}
RenderLogin is a tag in a JavaScript file OktaLogin.js
Inside an OktaLogin.js file (everything in the file is client side):
signInWidgetConfig = {
// Enable or disable widget functionality with the following options. Some of these features require additional configuration in your Okta admin settings. Detailed information can be found here: https://github.com/okta/okta-signin-widget#okta-sign-in-widget
// Look and feel changes:
logo: '//logo.clearbit.com/okta.com', // Try changing "okta.com" to other domains, like: "workday.com", "splunk.com", or "delmonte.com"
language: 'en', // Try: [fr, de, es, ja, zh-CN] Full list: https://github.com/okta/okta-signin-widget#language-and-text
i18n: {
//Overrides default text when using English. Override other languages by adding additional sections.
'en': {
'primaryauth.title': 'Sign In', // Changes the sign in text
'primaryauth.submit': 'Sign In' // Changes the sign in button
// More e.g. [primaryauth.username.placeholder, primaryauth.password.placeholder, needhelp, etc.].
// Full list here: https://github.com/okta/okta-signin-widget/blob/master/packages/#okta/i18n/dist/properties/login.properties
}
},
// Changes to widget functionality
features: {
registration: true, // Enable self-service registration flow
rememberMe: true, // Setting to false will remove the checkbox to save username
//multiOptionalFactorEnroll: true, // Allow users to enroll in multiple optional factors before finishing the authentication flow.
//selfServiceUnlock: true, // Will enable unlock in addition to forgotten password
//smsRecovery: true, // Enable SMS-based account recovery
//callRecovery: true, // Enable voice call-based account recovery
router: true // Leave this set to true for the API demo
},
baseUrl: 'https://live-widget.oktapreview.com',
clientId: '0oaexo9c530ZUVuOj0h7',
redirectUri: 'https://developer.okta.com/live-widget',
authParams: {
issuer: 'https://live-widget.oktapreview.com/oauth2/ausexqn31sz3HMxdf0h7',
responseType: ['id_token', 'token'],
scopes: ['openid', 'email', 'profile']
}
};
signInWidget = new OktaSignIn(signInWidgetConfig);
function widgetSuccessCallback(res) {
var key = '';
if (res[0]) {
key = Object.keys(res[0])[0];
signInWidget.tokenManager.add(key, res[0]);
}
if (res[1]) {
key = Object.keys(res[1])[0];
signInWidget.tokenManager.add(key, res[1]);
}
if (res.status === 'SUCCESS') {
var token = signInWidget.tokenManager.get(key);
console.log("Logged in to Okta and issued token:");
console.log(token);
console.log("Reload this page to start over.");
alert("Logged in! Check your developer console for details");
}
}
function widgetErrorCallback(err) {
}
RenderLogin:** signInWidget.renderEl({ el: '#widget-container' }, widgetSuccessCallback, widgetErrorCallback);
I have an express checkout button on my webpage which looks somethin like that:
<body>
<div id="paypal-button"></div>
<script src="https://www.paypalobjects.com/api/checkout.js"></script>
<script>
paypal.Button.render({
env: 'sandbox', // Or 'sandbox'
client: {
sandbox: '<censored>',
production: 'xxxxxxxxx'
},
commit: true, // Show a 'Pay Now' button
payment: function(data, actions) {
return actions.payment.create({
payment: {
transactions: [
{
amount: { total: '1.00', currency: 'USD' }
}
]
}
});
},
onAuthorize: function(data, actions) {
return actions.payment.execute().then(function(payment) {
console.log(data);
});
}
}, '#paypal-button');
</script>
I also have an IPN handler on my rails backend that i tested with the IPN simulator at https://developer.paypal.com/developer/ipnSimulator/ and selected express checkout and it works fine. The only thing I couldn't figure out is how to setup paypal to send the IPNs to my server. I tried setting up a paypal business account and entering url there for IPNs but i don't recieve anything on the server nor on the IPNs history website.
I see button code is for sandbox.
Sandbox is a test environment, you should setup IPN in your sandbox account to receive IPN notifications.
You can login to sandbox account in this URL: www.sandbox.paypal.com
If you are using live account, you'll need to change "env" and "client" to production.
I'm trying to implement the payment process with Paypal Checkout
This is my code
<div class='wrapper-packages'>
<div id="paypal-button"></div>
</div>
<script>
paypal.Button.render({
env: 'sandbox',
client: {
sandbox: 'xxxxxxxx',
production: 'xxxxxxxx'
},
payment: function() {
var env = this.props.env;
var client = this.props.client;
return paypal.rest.payment.create(env, client, {
transactions: [
{
amount: { total: '1.00', currency: 'USD' }
}
]
});
},
commit: true, // Optional: show a 'Pay Now' button in the checkout flow
onAuthorize: function(data, actions) {
// Optional: display a confirmation page here
return actions.payment.execute().then(function() {
alert('ok');
});
}
}, '#paypal-button')
</script>
When I click on Paypal Checkout button, it opens the modal for log in paypal account, but I can't do login
The login credentials are ok, I've checked it.
So, what can be the problem?
When using PayPal's Sandbox, you need to use Sandbox Test Accounts. You can read more about them in the Docs
I am trying to integrate Paypal using Express Checkout. I am following the this example to make it work. I have setup sandbox account and checkout button show up without ant issue.
Problem happen when i click on the Button it open the popup window and ask for login details. after entering the the login details it open the sandbox account page but "your Order Summary section" is blank it doesn't show the amount as being passed by the API.
Below are image for both steps for your reference
Image 1 Button:
Image 2: Paypal Login screen
Image 3 : Screen After Log in
I am not sure what i am doing wrong. This video from paypal show it is pretty simple.
Test Code on my page.
<html>
<head></head>
<body>
<br>Express Checkout </br>
<div id="paypal-button">Pay Now</div>
<script src="https://www.paypalobjects.com/api/checkout.js"></script>
<script>
paypal.Button.render({
env: 'sandbox', // Optional: specify 'sandbox' environment
client: {
sandbox: 'xxxxxxxxxxx',
production: 'xxxxxxxxx'
},
payment: function() {
var env = this.props.env;
var client = this.props.client;
return paypal.rest.payment.create(env, client, {
transactions: [
{
amount: { total: '1.00', currency: 'USD' }
}
]
});
},
commit: true, // Optional: show a 'Pay Now' button in the checkout flow
onAuthorize: function(data, actions) {
// Optional: display a confirmation page here
return actions.payment.execute().then(function() {
// Show a success page to the buyer
});
}
}, '#paypal-button');
</script>
</body>
</html>
I am using Laravel 5.1 trying to set it up with Stripe using Cashier.
I am using a custom button to execute the javascript (using Angular):
$scope.subscribe = function(plan){
var handler = StripeCheckout.configure({
key: 'pk_test_*************',
image: '/img/documentation/checkout/marketplace.png',
locale: 'auto',
token: function(token) {
// Use the token to create the charge with a server-side script.
// You can access the token ID with `token.id`
var data = 'stripeToken=' + token.id;
$http.post("/createSubscription", data).success(function(data, status) {
console.log(data);
});
}
});
handler.open({
name: 'basic',
description: 'basic monthly $100',
currency: "usd",
amount: 10000
});
$(window).on('popstate', function() {
handler.close();
});
};
And in my Laravel code I have:
public function createSubscription(Request $request)
{
$user = JWTAuth::parseToken()->authenticate();
$token = Input::get('stripeToken');
$user->subscription("basic_plan")->create($token);
return 'test';
}
But I keep getting an error saying "this customer has no attached payment source".
The returned token at this line:
token: function(token) {
...
Does contain the users email, card info (+ card token), and stripe token. But when I check my Stripe dashboard, a customer is added without any data (no card, no email and not set up with the subscription).
I am trying to create customers with a subscription plan via this form.
(I do have the Billable trait set up and included in the controller)